SproutCore is Awesome
“   One should not pursue goals    that are easily achieved. One    must develop an instinct for    what one can just bare...
SproutCore    1.0
Monolithic
~177kmin+gzip
Backbone.js
11k+dependencies
Flow   800k       156k       637k       498k
Do the Math
App code can only be bug-fixed by   your team
Framework code isbug-fixed by everyone
App Framework            AppApp
Goals
1. Make SproutCore   easier to pick up for   new developers
2. Improve load time on   mobile devices
3. Enable web-style   applications
SproutCore    2.0
SproutCore  Rebuilt
LeanerMore Modular
Single JS File29K gzip+min
WhySproutCore?
1. Bindings2. Computed properties3. Magic templates
“   Wrote a Sproutcore 2 app    without property/observes (it    looked like a backbone app),    then refactored with them...
Model                   ViewfirstName             <h1>                         {{name}}lastName              </h1>        ...
Model        Controller     Viewtitle         remaining   remaining“Rememberthe milk”       1         “1 item left”isDone ...
1. Modular2. Easy to unit test3. Think about state,   not events
annotated-todos.strobeapp.com
Todos = SC.Application.create();
Todos = SC.Application.create({  rootElement: body > #sidebar});
<body id="todos">  <h1>Todos</h1>  <script type="text/html">    {{#view Todos.StatsView id="stats"}}      {{#view SC.Butto...
Todos.StatsView = SC.View.extend({  remainingBinding: Todos.todosController.remaining,  remainingString: function() {    v...
Todos.CreateTodoView = SC.TextField.extend({  insertNewline: function() {    var value = this.get(value);     if (value) {...
Todos.todoListController = SC.ArrayProxy.create({  createTodo: function(title) {    var todo = Todos.Todo.create({      ti...
Starter Kit
Roadmap
SproutCore Meetup  July 26th, 6-8pm    Appnovation
Questions?    Tom Dale    @tomdaletom@strobecorp.com
SproutCore is Awesome - HTML5 Summer DevFest
SproutCore is Awesome - HTML5 Summer DevFest
Upcoming SlideShare
Loading in...5
×

SproutCore is Awesome - HTML5 Summer DevFest

2,237

Published on

In this talk, I described the current JavaScript framework landscape, and why you should consider trying SproutCore for your next web project.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,237
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • \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
  • Transcript of "SproutCore is Awesome - HTML5 Summer DevFest"

    1. 1. SproutCore is Awesome
    2. 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. 3. SproutCore 1.0
    4. 4. Monolithic
    5. 5. ~177kmin+gzip
    6. 6. Backbone.js
    7. 7. 11k+dependencies
    8. 8. Flow 800k 156k 637k 498k
    9. 9. Do the Math
    10. 10. App code can only be bug-fixed by your team
    11. 11. Framework code isbug-fixed by everyone
    12. 12. App Framework AppApp
    13. 13. Goals
    14. 14. 1. Make SproutCore easier to pick up for new developers
    15. 15. 2. Improve load time on mobile devices
    16. 16. 3. Enable web-style applications
    17. 17. SproutCore 2.0
    18. 18. SproutCore Rebuilt
    19. 19. LeanerMore Modular
    20. 20. Single JS File29K gzip+min
    21. 21. WhySproutCore?
    22. 22. 1. Bindings2. Computed properties3. Magic templates
    23. 23. “ 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
    24. 24. Model ViewfirstName <h1> {{name}}lastName </h1> bindingfullName namecomputedproperty
    25. 25. Model Controller Viewtitle remaining remaining“Rememberthe milk” 1 “1 item left”isDone falsetitle“Go toVancouver”isDone true
    26. 26. 1. Modular2. Easy to unit test3. Think about state, not events
    27. 27. annotated-todos.strobeapp.com
    28. 28. Todos = SC.Application.create();
    29. 29. Todos = SC.Application.create({  rootElement: body > #sidebar});
    30. 30. <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>
    31. 31. 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()});
    32. 32. Todos.CreateTodoView = SC.TextField.extend({  insertNewline: function() {    var value = this.get(value);     if (value) {      Todos.todosController.createTodo(value);      this.set(value, );    }  }});
    33. 33. 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),});
    34. 34. Starter Kit
    35. 35. Roadmap
    36. 36. SproutCore Meetup July 26th, 6-8pm Appnovation
    37. 37. Questions? Tom Dale @tomdaletom@strobecorp.com

    ×