$30 off During Our Annual Pro Sale. View Details »

Understanding Ember.js (SXSW)

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.

Luke Melia

March 13, 2015
Tweet

More Decks by Luke Melia

Other Decks in Technology

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 [email protected].
    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