EmberJS Introduction - T3CON12

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Building Ambitious Web Apps

Slide 3

Slide 3 text

jQuery

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Great for manipulating pages. Not so great for building large apps.

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

You can simulate an application by having the logic run on the server, and serving a series of pages

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

500ms The problem with this is that your user interface can only respond as fast as your server—especially bad on flaky 3G connections

Slide 13

Slide 13 text

Fix this by moving *all* of the logic to the client. The client has all of the application logic and HTML templates to render in the browser.

Slide 14

Slide 14 text

{ name: "Christian", occupation: "Engineer" } Instead of sending HTML, send JSON. Only request data that the client has not yet loaded. Instant response when showing data that has already been fetched.

Slide 15

Slide 15 text

By decoupling the user interface from the typical HTTP request/ response cycle, you can completely modify how updates are communicated to the client. WebSocket

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web ?

Slide 18

Slide 18 text

Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web

Slide 19

Slide 19 text

What do client-side frameworks provide?

Slide 20

Slide 20 text

User Interface Data Persistence Application Architecture

Slide 21

Slide 21 text

User Interface HTML+CSS Data Persistence ? Application Architecture ?

Slide 22

Slide 22 text

User Interface HTML+CSS Data Persistence Application Architecture

Slide 23

Slide 23 text

User Interface View Data Persistence Model Application Architecture Controller

Slide 24

Slide 24 text

MVC

Slide 25

Slide 25 text

Enhance JavaScript

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Mixins 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();

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Mixins + super 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());

Slide 30

Slide 30 text

Computed Properties 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'));

Slide 31

Slide 31 text

Uniform Access

Slide 32

Slide 32 text

“ Bertrand Meyer Uniform Access All services offered by a module should be available through a uniform notation, which does not betray whether they are implemented through storage or through computation.

Slide 33

Slide 33 text

Namespaces >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >> Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => No more [object Object]!

Slide 34

Slide 34 text

Names in Conventions 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') });

Slide 35

Slide 35 text

Application Structure

Slide 36

Slide 36 text

Model View Controller

Slide 37

Slide 37 text

Model View Controller Router

Slide 38

Slide 38 text

Router •ORMs model persistent state as objects •The router models application state as objects •Maps the browser‘s URL to app state

Slide 39

Slide 39 text

Router Private Blog Not Logged In Logged In Index Show Post Edit Post

Slide 40

Slide 40 text

Router Private Blog Not Logged In Logged In Index Show Post Edit Post

Slide 41

Slide 41 text

Router Private Blog Not Logged In Logged In Index Show Post Edit Post /login

Slide 42

Slide 42 text

Router /posts Private Blog Not Logged In Logged In Index Show Post Edit Post

Slide 43

Slide 43 text

Router /post/123 Private Blog Not Logged In Logged In Index Show Post Edit Post

Slide 44

Slide 44 text

Advantages •Never be in an unknown state •Find errors faster •Create a map of user actions

Slide 45

Slide 45 text

TypeError: Cannot call method 'showPhoto' of undefined

Slide 46

Slide 46 text

Entered state "notLoggedIn" Sent event "enterCredentials" Entered state "loggedIn" Entered state "loggedIn.index" Sent event "showPost" Entered state "loggedIn.showPost" Could not respond to event "editPost" in state "loggedIn.showPost"

Slide 47

Slide 47 text

Why Ember?

Slide 48

Slide 48 text

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.

Slide 49

Slide 49 text

100% Open Source Built by the Community 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.

Slide 50

Slide 50 text

•Manages complexity •MIT-licensed •More productive •Aggressively rolls in best practices •Built for the long haul