Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Product + Ember Consulting 3 TODO: Half page Yapp,
 half

    page Yapp Labs Ember.js Consulting & Training
  2. 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
  3. 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
  4. How we deliver via the web has evolved… 15 Static

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

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

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

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

    Vine, Twitch, Bustle, & Zendesk) 21
  11. 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
  12. 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
  13. 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
  14. The Need There were lots of developers around the world

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

    the open web, no gatekeepers to check progress. 28
  17. 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
  18. Driven by the belief that we can build great apps

    faster by aggressively commoditizing solutions to our shared problems. 35
  19. Ember is driven by a belief that building web apps

    can be a joy, and that we should not settle for less. 37
  20. 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?
  21. 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
  22. 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.
  23. 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.
  24. 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.
  25. 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
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. Pods of Functionality Ember apps are organized by hanging Controller-

    Template pairs off of each Route, providing clear boundaries and isolation. 66
  32. 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
  33. Clean, declarative templates Ember uses Handlebars,
 a superset of the

    Mustache templating language.
 
 Emphasis on keeping templates “clean.” 69
  34. Data-bound Templates 71 All data-bound! Property paths in Ember Handlebars

    expressions are automatically observed and updated upon change.
  35. 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
  36. 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
  37. 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
  38. Testing 84 Excellent tooling for acceptance tests Decent support for

    unit tests Mature adapters for QUnit (default) and Mocha
  39. Liquid Fire 86 Animation library for Ember Very clean separation

    of concerns Demo! (An abbreviated version of this)
  40. ember-cli: Amazing development experience 88 Generators &
 project scaffolding ES6

    Module-based workflow Broccoli-based build
 with fast incremental builds Production packaging LiveReload
  41. 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
  42. Downsides: Solution on the Horizon Glimmer! Diffs dynamic nodes for

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