EmberJS Introduction - T3CON12

Transcript

1. None

2. Building Ambitious Web Apps

3. jQuery

4. None

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

   apps.
6. None
7. None
8. None
9. None

10. You can simulate an application by having the logic run

    on the server, and serving a series of pages
11. None

12. 500ms The problem with this is that your user interface

    can only respond as fast as your server—especially bad on flaky 3G connections

13. 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.

14. { 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.

15. By decoupling the user interface from the typical HTTP request/

    response cycle, you can completely modify how updates are communicated to the client. WebSocket
16. None

17. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web ?

18. Mobile Cocoa Touch Android SDK Desktop Cocoa .NET Web

19. What do client-side frameworks provide?

20. User Interface Data Persistence Application Architecture

21. User Interface HTML+CSS Data Persistence ? Application Architecture ?

22. User Interface HTML+CSS Data Persistence Application Architecture

23. User Interface View Data Persistence Model Application Architecture Controller

24. MVC

25. Enhance JavaScript

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

27. 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();

28. 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();

29. 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());

30. 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'));

31. Uniform Access

32. “ 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.

33. Namespaces >> Core = Ember.Namespace.create(); >> Core.Person = Ember.Person.extend(); >>

    Core.Person.toString(); => Core.Person >> Core.Person.create().toString(); => <Core.Person:ember157> No more [object Object]!

34. 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') });

35. Application Structure

36. Model View Controller

37. Model View Controller Router

38. Router •ORMs model persistent state as objects •The router models

    application state as objects •Maps the browser‘s URL to app state

39. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post

40. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post

41. Router Private Blog Not Logged In Logged In Index Show

    Post Edit Post /login

42. Router /posts Private Blog Not Logged In Logged In Index

    Show Post Edit Post

43. Router /post/123 Private Blog Not Logged In Logged In Index

    Show Post Edit Post

44. Advantages •Never be in an unknown state •Find errors faster

    •Create a map of user actions

45. TypeError: Cannot call method 'showPhoto' of undefined

46. 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"

47. Why Ember?

48. 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.

49. 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.

50. •Manages complexity •MIT-licensed •More productive •Aggressively rolls in best practices

    •Built for the long haul

51. As patterns solidify, we roll them in.

52. Sometimes we give them a little push.

53. Thank you. Questions? http://plus.tomdale.net http://emberjs.com