A Guided Tour Through the SproutCore Jungle

1. A Guided Tour Through the Jungle @floriankugler berlinjs.org/apps May 10th, 2012
2. What is SproutCore? Cocoa inspired web application framework Large-scale, Desktop-grade applications Strict MVC (+ statechart) architecture Well defined application structure Backend agnostic Ruby build tools
3. What’s comparable? Cappuccino Sencha ExtJS Ember.js
4. A SproutCore History * 2007 Charles Jolley  2008 2009 1.0 Release 2010 1.4 Release 2010 Strobe Corp. 2010 + @wycats 2011 1.5 Release ...
5. A SproutCore History 1.5 Release 1.6 Release 2.0 beta Strobe Corp.
6. A SproutCore History 1.5 Release 1.6 Release 2.0 beta amber.js ember.js 1.8 Release ( 1.7 )
7. Status Quo SproutCore 1.4 SproutCore 1.8 ember.js SproutCore “core” (Modularization) Core SproutCore concepts Clear mission statement (Auto updating template views) Lightweight Fast, complex, large-scale apps Render delegates Auto updating template views Window-based apps Improved build tools Page-based apps Desktop browsers No build tools required
8. Core Concepts Strict MVC architecture with well defined event/data flow KVC / KVO / Bindings Computed properties Build views with HTML & CSS, update with jQuery Statecharts
9. MVC Architecture DataStore Controllers Object | Array | Tree Views Panes | Collections | Label | Button | CheckBox | ... Statechart
10. MVC Architecture Model App Controller View
11. The “V” Property Model Controller View Runloop mouseDown mouseUp keyDown mouseMoved 1 2 3 4 5 KVO Bindings Call Call
12. KVC / KVO myObject.set(‘foo’, ‘bar’); fooDidChange: function() { console.log(‘foo changed to ‘ + this.get(‘foo’)); }.observes(‘foo’) enumerable = myObject.get(‘anArray’); enumerable.pushObject(‘foo’); anArrayDidChange: function() { console.log(‘anArray length: ‘ + this.getPath(‘anArray.length’); }.observes(‘*anArray.[]’)
13. Bindings contactsController = SC.ArrayController.create(); contactController = SC.ObjectController.create({ contentBinding: ‘App.contactsController.selection’ }); addressesController = SC.ArrayController.create({ contentBinding: ‘App.contactController.addresses’ }); addressController = SC.ObjectController.create({ contentBinding: ‘App.addressesController.selection’ }); ... street: SC.LabelView.design({ valueBinding: ‘App.addressController.streetName’ }) ...
14. Computed Properties addressController = SC.ObjectController.create({ contentBinding: ‘App.addressesController.selection‘ fullName: function() { return this.get(‘firstname’) + ‘ ‘ + this.get(‘lastName’); }.property(‘firstName’, ‘lastName’).cacheable() }); ... name: SC.LabelView.design({ valueBinding: ‘App.addressController.fullName’ }) ...
15. Custom Views App.AddressView = SC.View.extend({ displayProperties: [ ‘content’ ], render: function(ctx) { ctx.push( ‘<div class=”last-name”>‘ + this.getPath(‘content.lastName’) + ‘</div>’ ); }, update: function($) { $.find(‘last-name’).text(this.getPath(‘content.lastName’)); } });
16. Custom Views App.AddressView = SC.View.extend(SC.ContentDisplay, { contentDisplayProperties: [ ‘lastName‘ ], render: function(ctx) { ctx.push( ‘<div class=”last-name”>‘ + this.getPath(‘content.lastName’) + ‘</div>’ ); }, update: function($) { $.find(‘last-name’).text(this.getPath(‘content.lastName’)); } });
17. Custom Views App.AddressView = SC.View.extend(SC.ContentDisplay, { contentDisplayProperties: [ ‘lastName‘ ], displayProperties: [ ‘highlighted‘ ], ... update: function($) { $.find(‘last-name’).text(this.getPath(‘content.lastName’)); if (this.get(‘highlighted’)) { $.addClass(‘highlighted’); } else { $.removeClass(‘highlighted’); } }, mouseDown: function(evt) { this.set(‘highlighted’, YES); } });
18. Statecharts showContactsState editContactState editContactDefaultState editContactDeleteState editContact submit deleteContact confirm cancel
19. Statecharts editButton: SC.ButtonView.design({ ... action: ‘editContact’ }) showContactsState: SC.State.design({ editContact: function() { this.gotoState(‘editContactState’); } }) editContactState: SC.State.design({ enterState: function() { // setup view tree }, exitState: function() { // tear down view tree }, submit: function() { this.gotoState(‘showContactsState’); } })
20. editContactState: SC.State.design({ initialSubstate: ‘editContactDefaultState’, enterState: function() { /* setup view tree */ }, exitState: function() { /* tear down view tree */ }, editContactDefaultState: SC.State.design({ submit: function() { ... }, deleteContact: function({ this.gotoState(‘editContactDeleteState’); }) }), editContactDeleteState: SC.State.design({ enterState: function() { /* setup view tree */ }, exitState: function() { /* tear down view tree */ }, confirm: function() { this.gotoState(‘showContactsState’); }, cancel: function() { this.gotoState(‘editContactDefaultState’); } }) })
21. The Future The community is recovering from the disruptive changes during the last year SproutCore is actively maintained Roadmap discussions are ongoing... Interesting spin-off: Blossom (#blossom) Built off SproutCore 1.4 Canvas based view layer
22. SproutCore and Mobile I wouldn’t recommend it Try it: touch.ebay.com It’s a lot of JavaScript to be downloaded and parsed (~ 600-800 kB) Too DOM heavy Keep an eye on Blossom, Ember.js
23. For Whom is SproutCore? Complex, desktop-grade application? Rich user interaction? Handles a lot of data? Targets desktop browsers? ... Then SproutCore is a very well designed and mature application framework, check it out!
24. Resources sproutcore.com Guides & API docs Install SproutCore as Ruby Gem Highly recommended to clone SC repo into the frameworks folder of your app #sproutcore frozencanuck.wordpress.com
25. Questions? @floriankugler mail@floriankugler.de