SproutCore is Awesome - HTML5 Summer DevFest

2,445 views
2,359 views

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,445
On SlideShare
0
From Embeds
0
Number of Embeds
140
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
  • 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

    ×