Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to SproutCore is Awesome - HTML5 Summer DevFest
Similar to SproutCore is Awesome - HTML5 Summer DevFest (20)
Recently uploaded
Recently uploaded (20)
SproutCore is Awesome - HTML5 Summer DevFest
- 2. “ One should not pursue goals that are easily achieved. One must develop an instinct for what one can just barely achieve through one’s greatest efforts. Albert Einstein
- 3. SproutCore 1.0
- 4. Monolithic
- 6. Backbone.js
- 9. Flow 800k 156k 637k 498k
- 10. Do the Math
- 11. App code can only be bug-fixed by your team
- 12. Framework code is bug-fixed by everyone
- 13. App Framework App App
- 14. Goals
- 15. 1. Make SproutCore easier to pick up for new developers
- 16. 2. Improve load time on mobile devices
- 17. 3. Enable web-style applications
- 18. SproutCore 2.0
- 21. Single JS File 29K gzip+min
- 22. Why SproutCore?
- 23. 1. Bindings 2. Computed properties 3. Magic templates
- 24. “ Wrote a Sproutcore 2 app without property/observes (it looked like a backbone app), then refactored with them: 392 LOC to 78 LOC. Trek Glowacki
- 25. Model View firstName <h1> {{name}} lastName </h1> binding fullName name computed property
- 27. Model Controller View title remaining remaining “Remember the milk” 1 “1 item left” isDone false title “Go to Vancouver” isDone true
- 28. 1. Modular 2. Easy to unit test 3. Think about state, not events
- 31. Todos = SC.Application.create({ rootElement: 'body > #sidebar' });
- 32. <body id="todos"> <h1>Todos</h1> <script type="text/html"> {{#view Todos.StatsView id="stats"}} {{#view SC.Button target="Todos.controller" action="clearTodos" }} Clear Completed Todos {{/view}} {{remainingString}} remaining. {{/view}} </script> </body>
- 33. Todos.StatsView = SC.View.extend({ remainingBinding: 'Todos.todosController.remaining', remainingString: function() { var remaining = this.get('remaining'); return remaining + (remaining === 1 ? " item" : " items"); }.property('remaining').cacheable() });
- 34. Todos.CreateTodoView = SC.TextField.extend({ insertNewline: function() { var value = this.get('value'); if (value) { Todos.todosController.createTodo(value); this.set('value', ''); } } });
- 35. Todos.todoListController = SC.ArrayProxy.create({ createTodo: function(title) { var todo = Todos.Todo.create({ title: title }); this.pushObject(todo); }, remaining: function() { return this.filterProperty('isDone', false).get('length'); }.property('@each.isDone'), });
- 36. Starter Kit
- 37. Roadmap
- 38. SproutCore Meetup July 26th, 6-8pm Appnovation
- 39. Questions? Tom Dale @tomdale tom@strobecorp.com
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n