SXSW 2015: Understanding Ember.js

Luke Melia
Yapp & Yapp Labs
@lukemelia

Presentation Description

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.

Presentation Notes

Examples of Ember Apps

The big three today

ToDoMVC is nice, but it doesn’t really demo as the size of your app grows. Ember.js works well as your app grows.

  • The Router transitions between a collection nof routes, each representing a high-level application state
  • Each Route chooses the correct model for its state and handles high-level events appropriately (eg: transitions, url changes)
  • Model depends on what environment you program in
  • Controllers present data to a template fro rendering, by providing access to models and by managing local transient state.
  • Template define what the HTML should render (databindind and components)
  • Components …
    • Javascript portion lets you handle DOM events, lifecycle management, and more
    • HTML/Template describes the DOM output

The router DSL is a map of your app. (he showed an example of how that works)

Ember uses Handlebars

Handlebars is a superset of the Mustache templating language (know called “htmlbars”). Emphasis on keeping clean and declarative templates.

{{displayTitle}}
{{#if canEdit}}
{{#linkTo ‘post.edit’ this}}Edit{{/linkTo}}
{{/if}}

Ember’s Object Model (Computed properties and Observables)

  • Ember allows you to do class based inheritance.
  • It has Observers, in that whenever something changes you can have a function fire off.

Ember Data

  • Make it easier to read and write to JSON REST APIs
  • Supports working with relationships between models
  • 1.0 scheduled for June 12th

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 (He didn’t explain this well)
  • 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 transpires ES6 features to ES5-safe code.

Testing

  • Excellent tooling for acceptance tests
  • Decent support for unit tests

Liquid Fire

  • Animation library for Ember
  • Very clean separation of concern
  • Demo
    • this.fromRoute(emberconf.speakers’),
      this.toRoute(emberconf.speaker’),
      this.use(‘explode’, {
      matchBy: ‘data-speaker-id’,
      use: [‘flyTo’, { 500 }]
      ….

ember-cli: Amazing development experience

  • It’s a command line tool that runs and watches the file system and automatically does rebuilds. It models your structure as a tree, notices when a branch changes, and just re-generates the changed branches (making it fast).
  • If you CMS+R and it hasn’t finished, it holds the HTTP request until it is done. (that’s neat)
  • Leverages express.js and has built in capabilities for mocks and proxies (see what it looks like if your API is slow vs quick).

Addon Ecosystem

Ember has a 6-week release cycle that’s modeled after Chrome. (Release, Beta, Canary)

In Ember 2.0 they’re not adding any new features, they’re just finally removing the depricated code. They’re making addons that will allow for backwards compatability of the depricated tags if you need them. (Smart!)

There’s an “Ember” extension in chrome which will show up next to “Console”. If you click $E in this new panel, you can then pull up “Console”, type $E, and have access to that object.

Downsides

  • SEO
    • Google sees it, but there’s no knowledge of how Google ranks dynamic JS vs static pages.
  • Time to initial render
  • Rerender performance

Solutions

  • Fastboot
    • Renders initial HTML on a Node.js server by running Ember app in Node-land. You could apply caching here.
    • Precedence in other frameworks
    • Currently under development
  • Glimmer!
    • Diffs dynamic nodes for very fast, update-only-what-is-necessary re-renders
    • In development
    • Initial stats put it on par or better than React’s performance.
Posted in SXSW 2015.

Leave a Reply

Your email address will not be published. Required fields are marked *