EmberJS Introduction - T3CON12

Introduction to Ember.js, presented at the TYPO3 conference in Stuttgart, Germany.

Transcript

1. View Slide

2. Building
   Ambitious
   Web Apps
   

   View Slide

3. jQuery
   

   View Slide

4. View Slide

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

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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

    View Slide

11. View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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
    

    View Slide

16. View Slide

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

    View Slide

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

    View Slide

19. What do client-side
    frameworks provide?
    

    View Slide

20. User Interface
    Data Persistence
    Application
    Architecture
    

    View Slide

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

    View Slide

22. User Interface HTML+CSS
    Data Persistence
    Application
    Architecture
    

    View Slide

23. User Interface View
    Data Persistence Model
    Application
    Architecture
    Controller
    

    View Slide

24. MVC
    

    View Slide

25. Enhance
    JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. Uniform Access
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

35. Application
    Structure
    

    View Slide

36. Model View Controller
    

    View Slide

37. Model View Controller
    Router
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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"
    

    View Slide

47. Why Ember?
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

51. As patterns solidify,
    we roll them in.
    

    View Slide

52. Sometimes we give
    them a little push.
    

    View Slide

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

    View Slide