Understanding Ember.js (SXSW)

Presented at SXSW 2015.

Ember.js is being rapidly adopted by companies large and small, from Vine (Twitter) & Yahoo, to startups left and right. This talk will explain why, and teach you about how Ember works.

I'll explore Ember's core concepts, and the design decisions behind them. An emphasis will be placed on proper flow of data and events through an Ember app, the division of responsibilities within the layers of an Ember app, and more.

Transcript

1. Understanding
   Ember.js
   Luke Melia, Yapp & Yapp Labs
   SXSW, March 13th, 2015
   1
   

   View Slide

2. About this Nerd
   2
   

   View Slide

3. Product + Ember Consulting
   3
   TODO: Half page Yapp,

   half page Yapp Labs
   Ember.js
   Consulting
   & Training
   

   View Slide

4. My experience with Ember
   Very early adopter
   Contributor to Ember.js codebase
   and ecosystem
   Develop and maintain commercial
   Ember.js apps
   Consultant to a few dozen Ember-
   using companies, both startups and
   enterprises.
   Give talks on Ember, including last
   week at EmberConf 2015 4
   

   View Slide

5. Organizer of
   Ember.js NYC
   Live streamed
   monthly at

   http://live.ember.nyc
   5
   

   View Slide

6. What to expect

   from this session
   Starting high-level,
   moving to low-
   level.
   Pace and
   emphasis depends
   on who is in the
   room.
   Plus Q & A 6
   

   View Slide

7. How we deliver software has evolved…
   7
   

   View Slide

8. How we deliver software has evolved…
   8
   

   View Slide

9. How we deliver software has evolved…
   9
   

   View Slide

10. How we deliver software has evolved…
    10
    

    View Slide

11. How we deliver software has evolved…
    11
    

    View Slide

12. How we deliver software has evolved…
    12
    

    View Slide

13. …then came our beloved Internet…
    13
    

    View Slide

14. …and the browser, which became the most
    ubiquitous app runtime in the world.
    14
    

    View Slide

15. How we deliver via the web has evolved… 15
    Static HTML sent from server to browser
    

    View Slide

16. How we deliver via the web has evolved… 16
    Dynamic HTML sent from server to browser
    

    View Slide

17. How we deliver via the web has evolved… 17
    Apps running on the server,

    sending HTML representations to browser
    

    View Slide

18. How we deliver via the web has evolved… 18
    Server sends JS to the the browser,

    where the app is run, and interacts with a
    an API on the server
    

    View Slide

19. “The future is already here — it’s just not
    very evenly distributed” - William Gibson
    Many in tech haven’t yet arrived at the
    browser app paradigm.
    But for those of us who have, building
    apps the “old” way already feels
    antiquated.
    19
    

    View Slide

20. If it quacks like a duck…
    Single Page Apps
    Rich Client Apps
    Browser Apps
    All synonymous 20
    

    View Slide

21. Let’s look at some Ember apps
    (Quick demos of Beatport, Vine,
    Twitch, Bustle, & Zendesk)
    21
    

    View Slide

22. Similar to Native Mobile Apps
    Native apps have a similar
    paradigm of client app code
    talking to an API
    Differences in “install” and
    “update” processes. Walled
    gardens vs. open web.
    22
    

    View Slide

23. We have been moving in
    this direction with Javascript
    in web tech for a while.
    In many of our early
    attempts, our Javascript
    code collapsed under its
    own weight.
    23
    

    View Slide

24. The Need
    We desperately
    needed collective
    wisdom and best
    practices that we
    didn’t yet have. 24
    

    View Slide

25. The Need
    We needed it in the
    form of code that
    could help us structure
    and build these
    experiences in an
    approachable and
    maintainable way. 25
    

    View Slide

26. The Need
    There were lots of
    developers around the
    world solving the
    same problems at the
    same time. 26
    

    View Slide

27. The Need
    And as has become
    custom, we tried to
    share what we learned
    with each other in the
    form of code, open
    source code. 27
    

    View Slide

28. The Need
    There were no
    obstacles to doing this
    on the open web, no
    gatekeepers to check
    progress. 28
    

    View Slide

29. Lots of innovation in this space:

    a mind-boggling number of frameworks. 29
    

    View Slide

30. 30
    by
    The big three (today)
    

    View Slide

31. Goliath tech companies slug it out

    in market after market.
    31
    by
    

    View Slide

32. But this space is different. 32
    

    View Slide

33. Ember is the opposite, it is decentralized.
    33
    14 core team members from
    11 different companies, large
    and small
    Competitive spirit, but no
    corporate agenda
    All work happens in the open
    

    View Slide

34. Driven by a belief that
    our apps are not
    unique snowflakes.
    34
    

    View Slide

35. Driven by the
    belief that we can
    build great apps
    faster by
    aggressively
    commoditizing
    solutions to our
    shared problems. 35
    

    View Slide

36. Driven by a wish
    to “end the
    bikeshedding…” 36
    

    View Slide

37. Ember is driven
    by a belief that
    building web
    apps can be a
    joy, and that we
    should not settle
    for less.
    37
    

    View Slide

38. Who is using Ember? 38
    Many more… See also: http://builtwithember.io
    

    View Slide

39. 39
    How
    does a framework
    support you as the size and
    complexity of your app increases?
    How
    does a framework
    support you as the size and
    complexity of your app increases?
    How

    does a framework

    support you as the size and

    complexity of your app increases?
    

    View Slide

40. Ember’s approach
    shines as the size
    and complexity of
    an app grows.
    40
    Let’s look at why.
    

    View Slide

41. It should be clear
    where code
    belongs and
    where to find it.
    41
    

    View Slide

42. You should have
    to write and
    maintain the least
    amount of code
    necessary.
    42
    

    View Slide

43. Change in one
    area of your app
    should not affect
    other areas.
    43
    

    View Slide

44. Clear Delineation of Responsibilities 44
    Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    

    View Slide

45. Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    Router 45
    The Router transitions between a
    collection of routes, each representing
    a high-level application state.
    

    View Slide

46. Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes 46
    Routes
    Each Route selects an appropriate model
    for its state, and handles high-level
    events appropriately.
    

    View Slide

47. Router
    Controller
    Component
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Template Template
    Routes
    Models 47
    Model Model Model Model
    Models encapsulate the data and

    relationships in your problem domain.
    

    View Slide

48. Router
    Component
    Model
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    Models 48
    Controllers present data to a template for
    rendering, by providing access to models and by
    managing local transient state.
    Controller Controller
    

    View Slide

49. Templates 49
    Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    Templates define the HTML to render
    via databinding and components.
    

    View Slide

50. Components 50
    Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    Components
    render a UI
    consisting of
    data-bound
    HTML and event
    handlers. They
    are composable.
    

    View Slide

51. Inside Components 51
    Component
    

    View Slide

52. Inside Ember Components 52
    Javascript
    Template
    The Template is declarative way to describe

    the HTML to be output, including bound data.

    The Javascript portion lets you handle DOM
    events, lifecycle management, and more.
    

    View Slide

53. Ember’s Nested Routes and URLs 53
    

    View Slide

54. github.com/emberjs/ember.js 54
    

    View Slide

55. github.com/emberjs/ember.js/issues 55
    

    View Slide

56. github.com/emberjs/ember.js/issues?q=closed 56
    

    View Slide

57. github.com/emberjs/ember.js 57
    

    View Slide

58. github.com/emberjs/ember.js/issues 58
    

    View Slide

59. github.com/emberjs/ember.js/issues?q=closed 59
    

    View Slide

60. github.com/emberjs/ember.js 60
    {{outlet}}
    

    View Slide

61. github.com/emberjs/ember.js/issues 61
    {{outlet}}
    

    View Slide

62. github.com/emberjs/ember.js/issues?q=closed 62
    

    View Slide

63. 63
    A map helps you know
    where you are and
    where to find things.
    

    View Slide

64. The router DSL is a map of your app 64
    PostRoute will load the Post model into the
    PostController and render the ‘post’ template

    into the main outlet.
    

    View Slide

65. The router DSL is a map of your app 65
    CommentsRoute will set up the CommentsController
    and render the ‘comments’ template into the main
    outlet of the ‘post’ template.
    

    View Slide

66. Pods of
    Functionality
    Ember apps are
    organized by
    hanging Controller-
    Template pairs off of
    each Route,
    providing clear
    boundaries and
    isolation. 66
    

    View Slide

67. Go with
    the Flow
    Ember apps have
    a clear flow of
    data and events.
    67
    

    View Slide

68. Router
    Controller
    Component
    Model
    Controller
    Component Component Component
    C C C C C C C C C C C C
    Model Model Model
    Template Template
    Routes
    A clear information flow: data down, actions up 68
    Data flows down
    from models via
    bindings
    Actions flow up from
    view layer to the router
    Router updates models &
    controllers based on events
    

    View Slide

69. Clean, declarative templates
    Ember uses
    Handlebars,

    a superset of the
    Mustache templating
    language.

    

    Emphasis on keeping
    templates “clean.” 69
    

    View Slide

70. Clean, declarative templates 70
    Yep.
    Nope. Not even possible.
    

    View Slide

71. Data-bound Templates 71
    All data-bound!
    Property paths in Ember Handlebars
    expressions are automatically observed and
    updated upon change.
    

    View Slide

72. Emphasis on declarative interfaces
    (supports backward-compatible
    performance improvements) 72
    metal-views htmlbars
    

    View Slide

73. Ember’s Object Model, Observables, and
    Computed Properties 73
    

    View Slide

74. Ember’s Object Model, Observables, CPs 74
    

    View Slide

75. Ember’s Object Model, Observables, CPs 75
    

    View Slide

76. Ember’s Object Model, Observables, CPs 76
    

    View Slide

77. Ember’s Object Model, Observables, CPs 77
    

    View Slide

78. Ember’s Object Model, Observables, CPs 78
    

    View Slide

79. Ember’s Object Model, Observables, CPs 79
    

    View Slide

80. Ember’s Object Model, Observables, CPs 80
    

    View Slide

81. Ember’s Object Model, Observables, and
    Computed Properties 81
    Wins: write more declarative code
    Leverage decades of OO code reuse experience
    Consistent APIs throughout Ember
    

    View Slide

82. Ember Data 82
    make it easier to read and write to JSON REST APIs
    supports working with relationships between models
    1.0 scheduled for June 12th
    

    View Slide

83. Embracing Web Standards, and Pushing
    the Web Forward
    The Ember community is a leading force in vetting and
    influencing emerging web standards.
    This includes Promises, ES6 Modules, and soon, annotations.
    Core team member Yehuda Katz served on the TC-39
    standards body and maintains close relationships there.
    ember-cli apps ship with ember-cli-babel, which transpiles
    ES6 features to ES5-safe code.
    83
    

    View Slide

84. Testing 84
    Excellent tooling for acceptance tests
    Decent support for unit tests
    Mature adapters for QUnit (default) and Mocha
    

    View Slide

85. Testing Code Example 85
    

    View Slide

86. Liquid Fire 86
    Animation library for Ember
    Very clean separation of concerns
    Demo! (An abbreviated version of this)
    

    View Slide

87. Liquid Fire 87
    

    View Slide

88. ember-cli: Amazing development
    experience 88
    Generators &

    project scaffolding
    ES6 Module-based workflow
    Broccoli-based build

    with fast incremental builds
    Production packaging
    LiveReload
    

    View Slide

89. ember-cli: Amazing development
    experience 89
    Development server with express.js, fast
    rebuilds, mocks & proxy capabilities
    Robust addon API
    

    View Slide

90. Addon Ecosystem 90
    725 addons
    and counting!
    

    View Slide

91. 6-week release
    cycle, semantic
    versioning 91
    

    View Slide

92. Ember

    Inspector 92
    

    View Slide

93. Open Source License: MIT License 93
    Very open, commercial-friendly OSS license
    “Do whatever you like with it”
    

    View Slide

94. Downsides: Summary
    SEO
    Time to initial render
    Rerender performance
    94
    

    View Slide

95. Downsides: Solution on the Horizon
    Fastboot!
    Renders initial HTML on a Node.js server
    by running Ember app in Node-land
    Precedence in other frameworks
    Currently under development
    95
    

    View Slide

96. Downsides: Solution on the Horizon
    Glimmer!
    Diffs dynamic nodes for very fast, update-
    only-what-is-necessary re-renders
    In development
    96
    

    View Slide

97. 97
    Follow me @lukemelia
    Some examples appear courtesy of my company, Yapp Labs.

    We are available for Ember.js-related consulting. Contact luke@yapp.us.
    Q & A
    

    View Slide

98. Creative Commons photo credits: https://www.flickr.com/photos/appraisaliq/5641906164, https://www.flickr.com/photos/pfsullivan_1056/6009151814, https://www.flickr.com/
    photos/avaragado/6960433672, https://www.flickr.com/photos/clunkyrobot/82060751, https://www.flickr.com/photos/dhaun/14064199636, https://www.flickr.com/photos/
    dehub/2570417338, https://www.flickr.com/photos/joestump/5193676861, https://www.flickr.com/photos/splorp/8544662113, https://www.flickr.com/photos/reutc/2459061463,
    https://www.flickr.com/photos/cristiano_betta/2909483129, https://www.flickr.com/photos/jasonunbound/240727795, https://www.flickr.com/photos/
    armydre2008/5899177632, https://www.flickr.com/photos/chaoticmind75/5529114126, https://www.flickr.com/photos/15609463@N03/15004281025, https://www.flickr.com/
    photos/simonsmithster/3418650838, https://www.flickr.com/photos/thomashawk/9974469983, https://www.flickr.com/photos/bestarns/8305879000, https://www.flickr.com/
    photos/kinerific/7561104998, https://www.flickr.com/photos/fakeisthenewreal/121258082, https://www.flickr.com/photos/9061377@N05/703903629, https://www.flickr.com/
    photos/niznoz/4170565734
    98
    Thank you!
    @lukemelia
    @yapplabs
    @embernyc
    

    View Slide