Ember.js Lunch Talk at Carbon5

Transcript

1. A framework for creating ambitious web applications EMBER.JS

2. WHAT IS EMBER?

3. DATA BINDING.

4. COMPUTED PROPERTIES.

5. DATA-BOUND DECLARATIVE TEMPLATES. We want it to be possible to

   define your view structure declaratively, with its data requirements, and leave code for handling events.

6. MVC STRUCTURE. Rant: MVC/MVVM/ MVP/etc. all mean the same thing

   * Data * View * Intermediary

7. EMBER MVC. Model Model Model Controller View View View

8. ARRAY CONTROLLER. Person Person Person PeopleController ListView StatsView Button ArrayProxy

   males draftMales name gender isDrafted

9. OPTIONAL EMBER-DATA.

10. ROLLING IN EMERGING PATTERNS. One of Ember’s main goals to

    identify common patterns and make them conventional. As patterns emerge, we work to reduce the boilerplate necessary to implement them.

11. WHY?

12. MANAGES COMPLEXITY. Ember aims to reduce the complexity created by

    the links between many moving pieces by clearly defining how communication occurs between parts of your application.

13. MAKES YOU MORE PRODUCTIVE. Ember’s philosophy is that by eliminating

    trivial choices and making the answers conventional, you can focus your energy on non-trivial problems. This philosophy is taken directly from Rails.

14. BUILT FOR THE LONG HAUL. Ember is not a throwaway

    weekend project or a corporate-sponsored project. It is built by and for the Ember community, an open source project first and only.

15. OPTIMIZED FOR DEVELOPER HAPPINESS.

16. OBJECT MODEL.

17. Person = Ember.Object.extend({ firstName: null, lastName: null }); CLASSES.

18. Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'),

    last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello(); MIXINS.

19. Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'),

    last = this.get('lastName'); alert(first + " " + last + ": HELLO!") } }); Person = Ember.Object.extend(Speaker); Person.create({ firstName: "Yehuda", lastName: "Katz" }).hello(); MIXINS.

20. Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'),

    last = this.get('lastName'); return first + " " + last + ": HELLO"; } }); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; } }); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; } }); alert(phil.hello()); MIXINS AND SUPER.

21. Speaker = Ember.Mixin.create({ hello: function() { var first = this.get('firstName'),

    last = this.get('lastName'); return first + " " + last + ": HELLO"; } }); Dog = Ember.Object.extend(Speaker, { hello: function() { return this._super() + " THIS IS DOG"; } }); var phil = Dog.create({ firstName: "Budweiser", lastName: "Phil", hello: function() { return this._super() + " ZAAAAAAAA"; } }); alert(phil.hello()); MIXINS AND SUPER.

22. Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + '

    ' + this.get('lastName'); }.property('firstName', 'lastName') }); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz" }); alert(yehuda.get('fullName')); COMPUTED PROPS.

23. Person = Ember.Object.extend({ fullName: function() { return this.get('firstName') + '

    ' + this.get('lastName'); }.property('firstName', 'lastName') }); var yehuda = Person.create({ firstName: "Yehuda", lastName: "Katz" }); alert(yehuda.get('fullName')); COMPUTED PROPS.

24. UNIFORM ACCESS IS GREAT FOR REFACTORING.

25. IT ALSO GIVES BINDINGS A SINGLE RULE.

26. >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >> Core.Person.toString();

    => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> NAMESPACES.

27. MASSIVELY IMPROVED DEBUGGING.

28. CAN USE NAMES IN CONVENTIONS. This is something Rails does

    a lot of, and which is hard to do in JS since klass.name is not available in general. We use this extensively in the default REST adapter in ember-data.

29. App.Post = DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string') }); // vs.

    App.Post = DS.Model.extend({ collectionURL: "/posts", singleURL: "/post", title: DS.attr('string'), body: DS.attr('string') }); CONVENTIONS.

30. A SINGLE, RICH OBJECT MODEL.

31. THE BASIC RULES APPLY TO ALL KINDS OF OBJECTS.

32. LIKE BACKBONE EVENTS ON STEROIDS. Our goal, again is to

    wrap up common patterns in the base distribution so that you don’t have to think about them all the time.

33. THE VIEW LAYER.

34. <ul> <li>First</li> <li>Second</li> <li>Third</li> </ul> DATA BOUND.

35. <ul> {{#each App.items}} <li>{{name}}</li> {{/each}} </ul> DATA BOUND.

36. App.items = [ { name: "One" }, { name: "Two"

    }, { name: "Three" } ]; DATA BOUND.

37. App.items = [ { name: "One" }, { name: "Two"

    }, { name: "Three" } ]; DATA BOUND. • One • Two • Three

38. App.items.pushObject({ name: "Fourth" }); DATA BOUND.

39. App.items.pushObject({ name: "Fourth" }); DATA BOUND. • One • Two

    • Three

40. App.items.pushObject({ name: "Fourth" }); DATA BOUND. • One • Two

    • Three • One • Two • Three • Fourth

41. App.items .objectAt(0) .set('name', '1'); DATA BOUND.

42. App.items .objectAt(0) .set('name', '1'); DATA BOUND. • One • Two

    • Three • Fourth

43. App.items .objectAt(0) .set('name', '1'); DATA BOUND. • One • Two

    • Three • Fourth • 1 • Two • Three • Fourth

44. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> </div> {{else}} <img src="/images/loading.gif">

    {{/if}} CONDITIONALS.

45. App = Ember.Application.create(); jQuery.getJSON("/bootstrap", function(json) { App.set('title', json.title); App.set('body', json.body);

    App.set('isLoaded', true); }); ASYNCHRONY.

46. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{#view App.DashboardView}} {{#each App.widgetsController}}

    {{view App.Widget widgetBinding="this"}} {{/each}} {{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget! {{/view}} {{/view}} </div> {{else}} <img src="/images/loading.gif"> {{/if}} DECLARATIVE.

47. {{#if App.isLoaded}} <div class="content"> <h1>{{App.title}}</h1> <div>{{App.body}}</div> {{view App.DashboardView templateName="dashboard"}} </div>

    {{else}} <img src="/images/loading.gif"> {{/if}} <!-- dashboard template --> {{#each App.widgetsController}} {{view App.Widget widgetBinding="this"}} {{/each}} {{#view Ember.Button target="App.widgetsController" action="newWidget"}} New Widget! {{/view}} COMPOSABLE.

48. App.ButtonView = Ember.View.extend({ tagName: "button", didInsertElement: function() { this.$().button(); }

    }); CUSTOMIZABLE.

49. {{#view App.ButtonView}}Hi!{{/view}} CUSTOMIZABLE.

50. App.ButtonView = Ember.ButtonView.extend({ didInsertElement: function() { this.$().button(); } }); CUSTOMIZABLE.

    Ember’s controls are UI-agnostic, so you can use the semantics (like target/action, text field) without having to back out Ember- supplied UI.

51. {{#view App.ButtonView target="App.widgetController" action="new"}} New Widget {{/view}} CUSTOMIZABLE.

52. <body> <script type="text/x-handlebars"> <!-- view contents here --> </script> </body>

    TEMPLATES.

53. <head> <script type="text/x-handlebars" data-template-name="name"> <!-- view contents here --> </script>

    </head> NAMED TEMPLATES.

54. Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string); TEMPLATES.

55. Ember.TEMPLATES["name"] = Ember.Handlebars.compile(string); Ember.TEMPLATES["other"] = function() { return "hi!" };

    TEMPLATE API. You will need to do property lookups through .get, so at least a bit of template engine customizability is required. If arbitrary code is allowed, you can even implement observable helpers.

56. BASIC APP ARCHITECTURE

57. ARCHITECTURE. Models Controllers provide data to Views provide data to

58. ARCHITECTURE. Models Controllers trigger events on Views modify

59. ARCHITECTURE. Models Controllers updates Views updates

60. EXAMPLE.

61. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards 1 deck 10

    cards 7 left to study 1 deck 10 cards 7 left to study 1 deck 10 cards

62. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards create new card

    create new card 1 deck 11 cards 8 left to study 1 deck 11 cards

63. FLASHCARDS. Deck, Card CardsController Decks, Deck, Cards 1 deck 11

    cards 8 left to study new card added left to study goes to 8 render new card update # left

64. RULE OF THUMB.

65. ▪ Models contain persistable data ▪ Controllers proxy models and

    add client-side application state ▪ Views represent a single representation of persistable or application state RULE OF THUMB.

66. EVOLVING PATTERNS

67. ROUTING.

68. STATE MANAGERS.

69. PERSISTENCE.

70. IMPROVED DEBUGGING. Deferred, asynchronous code can be hard to debug

    (what caused that callback to be triggered?!) A debug build could provide more information, at the cost of slower performance. We’re also working on and off on a Chrome extension.

71. DOCUMENTATION. Our documentation is sparse and currently focused on the

    top-down. Generated documentation is coming, as is more information on common patterns not yet encapsulated in code.

72. RAILS INTEGRATION. Ember works well with any (or no) server-side

    framework. Because Rails and Ember share philosophies, we can leverage conventions on both sides to further reduce boilerplate for people willing to adhere to even more strict rules about file structure and REST APIs.

73. AS PATTERNS SOLIDIFY, WE ROLL THEM IN.

74. SOMETIMES WE GIVE THEM A LITTLE PUSH.

75. THANK YOU.

76. @TOMDALE @EMBERJS EMBERJS.COM GITHUB.COM/EMBERJS IRC #EMBERJS