Building Web Applications using Ember.JS

Transcript

1. Building Web Applications using Emberjs Thursday, February 7, 13
2. Neeraj Singh @NeerajDotName Thursday, February 7, 13
3. Ruby on Rails consulting shop Thursday, February 7, 13
4. RubyOnRails jquery-ujs Spree ActiveMerchant nimbleShop Instapusheradmin_data Thursday, February 7, 13
5. EMBER jS Thursday, February 7, 13
6. dependencies - jquery - handlerbar Thursday, February 7, 13
7. MVC Thursday, February 7, 13
8. Backbone.js has 1.5k LOC EMBER.js has 60.4k LOC Thursday, February 7, 13
9. Backbone.js requires lots of third party plugins Thursday, February 7, 13
10. Ember has - bindings - run loop - ember-data Thursday, February 7, 13
11. Ember enhances JS - mixins - classes - computed properties Thursday, February 7, 13
12. Architecture Thursday, February 7, 13
13. Models Controllers Views triggered events updated data to model Thursday, February 7, 13
14. Models Controllers Views update views updated data fires binding Thursday, February 7, 13
15. Object model Thursday, February 7, 13
16. Person = Ember.Object.extend({ firstName: null, lastName: null, }); Classes Thursday, February 7, 13
17. Person.create().toString(); <Person:ember178> Classes Thursday, February 7, 13
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: 'Neeraj', lastName: 'Singh' }).hello(); #=> Neeraj Singh Mixins Thursday, February 7, 13
19. Opinionated - convention over configuration - handlerbar Thursday, February 7, 13
20. App.Post = DS.Model.extend({ collectionURL: '/posts', singleURL: '/post', title: DS.attr('string'), body: DS.attr('string') }); App.Post = DS.Model.extend({ title: DS.attr('string'), body: DS.attr('string') }); Thursday, February 7, 13
21. Data Bindings Thursday, February 7, 13
22. <ul> {{#each App.items}} <li>{{name}}</li> {{/each}} </ul> App.items = [ { name: “One” }, { name: “Two” }, { name: “Three” } ] One Two Three Thursday, February 7, 13
23. App.items.pushObject({ name: 'Fourth' }); One Two Three Four Thursday, February 7, 13
24. Handlebar Thursday, February 7, 13
25. App.items.pushObject({ name: 'Fourth' }); One Two Three Four Thursday, February 7, 13
26. send your feedback to @bigBinary Thursday, February 7, 13