SproutCorea next generation javascript framework

What

Desktop-like Apps

Client Side MVC

Inspired by Cocoa

Why

Common App Features for Free

Cross-browser Optimized

Glue-code Eliminated

JavaScript and ProudNot trying to be Java, Ruby, Python, Obj-C

Features

At the code level...

Properties

Example: A contact’s first name

Most are simple values - numbers, strings, objects

Can be functions which dynamically “compute” value

Observers

Watch for property changes

Takes some action

Examples: Update view, send data to server

Bindings

Two objects, “bound” together

When one changes, the other changes also

Example

The contact firstName property is bound to the textFieldView value property.

When the contact’s firstName is updated, textFieldView’s value is updated automatically.

When textFieldView’s value changes, the valueDidChange observer kicks in & updates the UI.

Glue Code Eliminated!Controllers and views automatically stay in sync

with the model objects in your application!

But...there’s a small price to pay

Key Value Coding

Access properties with object.get(key)

Set properties with object.set(key, value);

This allows SproutCore to watch things change

Abbreviated as “KVC”

Example

Computed Properties

Accessed like stored properties ( with get() )

Calls a function to compute the value

Declared with .property()

Key Value Observing

Allows Object A to observe changes to Object B

How binding is able to work

Abbreviated as KVO

Automatic for stored (non-computed) properties

Requires a little setup for computed properties...

Computed Property KVO

When declaring, list the attributes the computed property relies on:

User Interface Features

ControlsSC.ListView SC.GridView

ControlsSC.SourceListView Form Controls

Controls

Split-Panes

Dialogs, Pop-up Menus, Pickers

Native-Controls

Developer Tools

Generators

Generate skeletons for your application, models, views, controllers

Helps you get started quickly

Gives you a standard place to put things

Helpers

Generate your views with small, declarative helpers

Similar to Ruby on Rails view helpers

In fact, written in Ruby!

Development Server

Handles including JS files and view partials into your HTML file - less work for you.

Allows change-and-refresh style development

Can proxy to external website backends for server interaction.

Build Tools

Packages all assets into single files - 1 HTML, 1 CSS, 1 JavaScript.

Minifies your JavaScript

Host your app on any server or CDN - just static files

ThanksScott Becker

http://synthesis.sbecker.net