Building Ambitious Web Applications With Ember.js

Slide 1

Slide 1 text

Building Ambitious Web Applications With Ember.js Christopher Meiklejohn @cmeik Friday, November 9, 12

Slide 2

Slide 2 text

An Introduction To Ember.js Christopher Meiklejohn @cmeik Friday, November 9, 12

Slide 3

Slide 3 text

@cmeik Friday, November 9, 12

Slide 4

Slide 4 text

Basho Friday, November 9, 12

Slide 5

Slide 5 text

What is Ember.js? Friday, November 9, 12

Slide 6

Slide 6 text

MVC Structure Friday, November 9, 12

Slide 7

Slide 7 text

Data Bindings Friday, November 9, 12

Slide 8

Slide 8 text

Computed Properties Friday, November 9, 12

Slide 9

Slide 9 text

Data Bound Declarative Templates Friday, November 9, 12

Slide 10

Slide 10 text

State Managers Friday, November 9, 12

Slide 11

Slide 11 text

Declarative Router Friday, November 9, 12

Slide 12

Slide 12 text

Run Loop Friday, November 9, 12

Slide 13

Slide 13 text

Ember Data Friday, November 9, 12

Slide 14

Slide 14 text

Let’s get started! Friday, November 9, 12

Slide 15

Slide 15 text

Object Model Friday, November 9, 12

Slide 16

Slide 16 text

Objects and Classes Friday, November 9, 12

Slide 17

Slide 17 text

App.Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var person = App.Person.create(); person.say("Hello Joe."); Friday, November 9, 12

Slide 18

Slide 18 text

Observers Friday, November 9, 12

Slide 19

Slide 19 text

App.Person = Ember.Object.extend({ fullNameChanged: function() { console.log('fullNameChanged!'); }.observes('fullName') }); Friday, November 9, 12

Slide 20

Slide 20 text

App.Person = Ember.Object.extend({ childMarried: function() { console.log('ERMAHGERD!'); }.observes('[email protected]') }); Friday, November 9, 12

Slide 21

Slide 21 text

Mixins Friday, November 9, 12

Slide 22

Slide 22 text

App.Editable = Ember.Mixin.create({ edit: function() { this.set('isEditing', true); }, isEditing: false }); App.CommentView = Ember.View.extend( App.Editable, { template: Ember.Handlebars.compile('...') }); Friday, November 9, 12

Slide 23

Slide 23 text

Computed Properties Friday, November 9, 12

Slide 24

Slide 24 text

App.president = Ember.Object.create({ firstName: "Barack", lastName: "Obama", fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.get('fullName'); Friday, November 9, 12

Slide 25

Slide 25 text

Controllers Friday, November 9, 12

Slide 26

Slide 26 text

Controllers ObjectController ArrayController Controller Friday, November 9, 12

Slide 27

Slide 27 text

Ember.ArrayController.create({ content: [object1, object2] }); Ember.ObjectController.create({ content: object3 }); Friday, November 9, 12

Slide 28

Slide 28 text

Controllers ObjectController ArrayController Controller Friday, November 9, 12

Slide 29

Slide 29 text

Controllers ObjectProxy ArrayProxy Friday, November 9, 12

Slide 30

Slide 30 text

Slide 31

Slide 31 text

App.presidentController = Ember.ObjectController.create({ contentBinding: 'App.president' }); App.presidentController.get('fullName'); Friday, November 9, 12

Slide 32

Slide 32 text

Views Friday, November 9, 12

Slide 33

Slide 33 text

App.PresidentView = Ember.View.create({ templateName: 'president', contentBinding: 'App.president' }); {{fullName}} Friday, November 9, 12

Slide 34

Slide 34 text

Run Loop Deferred rendering; change propagation; coalescing. Friday, November 9, 12

Slide 35

Slide 35 text

App.president = Ember.Object.create({ firstName: "George W.", lastName: "Bush", fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); App.president.set('firstName', 'Barack'); App.president.set('lastName', 'Obama'); Friday, November 9, 12

Slide 36

Slide 36 text

The Router and Application Structure Friday, November 9, 12

Slide 37

Slide 37 text

Application as a series of states Friday, November 9, 12

Slide 38

Slide 38 text

Application as a series of states hierarchy of views Friday, November 9, 12

Slide 39

Slide 39 text

Friday, November 9, 12

Slide 40

Slide 40 text

Friday, November 9, 12

Slide 41

Slide 41 text

Friday, November 9, 12

Slide 42

Slide 42 text

Friday, November 9, 12

Slide 43

Slide 43 text

Nested Outlets Outlet as Controller/View Pair Friday, November 9, 12

Slide 44

Slide 44 text

GiddyUp {{outlet projects}}

{{outlet scorecards}} {{outlet testResults}} {{outlet scorecard}} Friday, November 9, 12

Slide 45

Slide 45 text

GiddyUp {{outlet projects}}

{{outlet scorecards}} {{outlet}} Friday, November 9, 12

Slide 46

Slide 46 text

State Machine Application as a series of states and transitions. Friday, November 9, 12

Slide 47

Slide 47 text

GiddyUp.Router = Ember.Router.extend({ root: Ember.Route.extend({ index: Ember.Route.extend({ route: '/', redirectsTo: 'projects.index' }), // next slide }) }); Friday, November 9, 12

Slide 48

Slide 48 text

projects: Ember.Route.extend({ route: '/projects', // next slide index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }); }); Friday, November 9, 12

Slide 49

Slide 49 text

connectOutlets: function(router, context) { router.get('applicationController'). connectOutlet('projects', 'projects', GiddyUp.Project.find()); }, Friday, November 9, 12

Slide 50

Slide 50 text

Serialization The URL as a serialization of application state. Friday, November 9, 12

Slide 51

Slide 51 text

projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }); }); /projects/ Friday, November 9, 12

Slide 52

Slide 52 text

projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12

Slide 53

Slide 53 text

serialize: function(router, context) { return context.get('id'): } Friday, November 9, 12

Slide 54

Slide 54 text

Deserialization Deserialize the URL to a position in the state chart. Friday, November 9, 12

Slide 55

Slide 55 text

projects: Ember.Route.extend({ route: '/projects', index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ route: '/:project_id' }) }); /projects/:project_id Friday, November 9, 12

Slide 56

Slide 56 text

deserialize: function(router, params) { var projectId = params.project_id; return GiddyUp.Project.find(projectId); } Friday, November 9, 12

Slide 57

Slide 57 text

Template Actions Target the router with actions. Friday, November 9, 12

Slide 58

Slide 58 text

projects: Ember.Route.extend({ route: '/projects', showProject: Ember.Router. transitionTo('projects.show'), index: Ember.Route.extend({ route: '/' }), show: Ember.Route.extend({ index: '/:project_id' }) }); Friday, November 9, 12

Slide 59

Slide 59 text

<a {{action showProject this href=true}} >{{name}}</a> Friday, November 9, 12

Slide 60

Slide 60 text

Ember-Data And Persistence Friday, November 9, 12

Slide 61

Slide 61 text

Abstract Adapters REST, IndexedDb, etc. Friday, November 9, 12

Slide 62

Slide 62 text

Asynchronous Proxy; asynchronously populated; lazily loaded. Friday, November 9, 12

Slide 63

Slide 63 text

Identity Map Client side, in memory-cache. Friday, November 9, 12

Slide 64

Slide 64 text

Transactional Accumulate updates; commit and rollback. Friday, November 9, 12

Slide 65

Slide 65 text

State Managers Lifecycle management; isDirty, isClean, isSaving Friday, November 9, 12

Slide 66

Slide 66 text

App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), birthday: DS.attr('date'), children: DS.hasMany('App.Child'), fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName') }); var person = App.Person.find(1); Friday, November 9, 12