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.

49612ba6e616ca3c4c668ad35e3e84ce?s=128

Luke Melia

March 13, 2015
Tweet

Transcript

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

    13th, 2015 1
  2. About this Nerd 2

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

    page Yapp Labs Ember.js Consulting & Training
  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
  5. Organizer of Ember.js NYC Live streamed monthly at
 http://live.ember.nyc 5

  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
  7. How we deliver software has evolved… 7

  8. How we deliver software has evolved… 8

  9. How we deliver software has evolved… 9

  10. How we deliver software has evolved… 10

  11. How we deliver software has evolved… 11

  12. How we deliver software has evolved… 12

  13. …then came our beloved Internet… 13

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

    in the world. 14
  15. How we deliver via the web has evolved… 15 Static

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

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

    running on the server,
 sending HTML representations to browser
  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
  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
  20. If it quacks like a duck… Single Page Apps Rich

    Client Apps Browser Apps All synonymous 20
  21. Let’s look at some Ember apps (Quick demos of Beatport,

    Vine, Twitch, Bustle, & Zendesk) 21
  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
  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
  24. The Need We desperately needed collective wisdom and best practices

    that we didn’t yet have. 24
  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
  26. The Need There were lots of developers around the world

    solving the same problems at the same time. 26
  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
  28. The Need There were no obstacles to doing this on

    the open web, no gatekeepers to check progress. 28
  29. Lots of innovation in this space:
 a mind-boggling number of

    frameworks. 29
  30. 30 by The big three (today)

  31. Goliath tech companies slug it out
 in market after market.

    31 by
  32. But this space is different. 32

  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
  34. Driven by a belief that our apps are not unique

    snowflakes. 34
  35. Driven by the belief that we can build great apps

    faster by aggressively commoditizing solutions to our shared problems. 35
  36. Driven by a wish to “end the bikeshedding…” 36

  37. Ember is driven by a belief that building web apps

    can be a joy, and that we should not settle for less. 37
  38. Who is using Ember? 38 Many more… See also: http://builtwithember.io

  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?
  40. Ember’s approach shines as the size and complexity of an

    app grows. 40 Let’s look at why.
  41. It should be clear where code belongs and where to

    find it. 41
  42. You should have to write and maintain the least amount

    of code necessary. 42
  43. Change in one area of your app should not affect

    other areas. 43
  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
  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.
  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.
  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.
  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
  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.
  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.
  51. Inside Components 51 Component

  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.
  53. Ember’s Nested Routes and URLs 53

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

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

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

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

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

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

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

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

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

  63. 63 A map helps you know where you are and

    where to find things.
  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.
  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.
  66. Pods of Functionality Ember apps are organized by hanging Controller-

    Template pairs off of each Route, providing clear boundaries and isolation. 66
  67. Go with the Flow Ember apps have a clear flow

    of data and events. 67
  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
  69. Clean, declarative templates Ember uses Handlebars,
 a superset of the

    Mustache templating language.
 
 Emphasis on keeping templates “clean.” 69
  70. Clean, declarative templates 70 Yep. Nope. Not even possible.

  71. Data-bound Templates 71 All data-bound! Property paths in Ember Handlebars

    expressions are automatically observed and updated upon change.
  72. Emphasis on declarative interfaces (supports backward-compatible performance improvements) 72 metal-views

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

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

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

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

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

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

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

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

  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
  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
  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
  84. Testing 84 Excellent tooling for acceptance tests Decent support for

    unit tests Mature adapters for QUnit (default) and Mocha
  85. Testing Code Example 85

  86. Liquid Fire 86 Animation library for Ember Very clean separation

    of concerns Demo! (An abbreviated version of this)
  87. Liquid Fire 87

  88. ember-cli: Amazing development experience 88 Generators &
 project scaffolding ES6

    Module-based workflow Broccoli-based build
 with fast incremental builds Production packaging LiveReload
  89. ember-cli: Amazing development experience 89 Development server with express.js, fast

    rebuilds, mocks & proxy capabilities Robust addon API
  90. Addon Ecosystem 90 725 addons and counting!

  91. 6-week release cycle, semantic versioning 91

  92. Ember
 Inspector 92

  93. Open Source License: MIT License 93 Very open, commercial-friendly OSS

    license “Do whatever you like with it”
  94. Downsides: Summary SEO Time to initial render Rerender performance 94

  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
  96. Downsides: Solution on the Horizon Glimmer! Diffs dynamic nodes for

    very fast, update- only-what-is-necessary re-renders In development 96
  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
  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