Ember.js - the framework for creating ambitious web apps

Ember.js - the framework for creating ambitious web apps

Ember.js is the framework for creating ambitious web apps. In this talk I'm exploring why that is the case and how Ember support especially larger and long term projects with its focus on conventions, dedication to stability without stagnation and a great community.


Marco Otte-Witte

May 12, 2016


  1. None
  2. Marco Otte-Witte @marcoow

  3. http://simplabs.com @simplabs

  4. None
  5. http://emberjs.com/images/brand/ember_Ember-Light.png

  6. …let's start with some context

  7. 2

  8. https://facebook.github.io/react/ http://red-badger.com/blog/wp-content/uploads/2015/04/react-logo-1000-transparent.png

  9. https://angularjs.org https://s3-us-west-2.amazonaws.com/s.cdpn.io/68939/angular-logo.png

  10. https://angular.io https://github.com/angular/angular.io/blob/master/public/resources/images/logos/angular2/angular.svg ? ? ? ? ?

  11. https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png

  12. …but isn't Ember dead?

  13. Ember is alive and well, just doesn't receive as much

    hype as the other ones
  14. So what is Ember.js?

  15. Ember is a framework for ambitious web applications

  16. …but isn't Ember huge? » ls -lh 514K ember-data.prod.js 1.6M

    ember.prod.js 1.1K react-dom.js 644K react.js
  17. None
  18. the base Framework with the core functionality http://emberjs.com/images/brand/ember_Ember-Light.png https://github.com/emberjs/ember.js

  19. the command line interface http://emberjs.com/images/brand/ember_CLI-Light.png https://github.com/ember-cli/ember-cli

  20. Angular CLI is built on Ember CLI https://github.com/angular/angular-cli "dependencies": {

    … "ember-cli": "2.5.0",
  21. the data persistence library http://emberjs.com/images/brand/ember_Data-Light.png https://github.com/emberjs/data

  22. Liquid Fire for animations https://github.com/ember-animation/liquid-fire

  23. Ember Inspector Developer Tools extension for Chrome and Firefox https://github.com/emberjs/ember-inspector

  24. None
  25. Ecosystem

  26. http://www.ecma-international.org/ecma-262/6.0/

  27. https://babeljs.io

  28. https://babeljs.io http://handlebarsjs.com

  29. http://jsonapi.org

  30. JSON API is great for all APIs, not only in

    combination with Ember
  31. “ “ “ “

  32. Convention over Configuration

  33. https://github.com/rails/weblog/blob/gh-pages/images/rails-logo.svg

  34. CoC is based on the idea that all projects have

    lots of things in common that can all be solved once by the framework
  35. CoC allows you to focus on features

  36. …and features mean value

  37. Conventions also prevent projects from piling up complexity

  38. …as there's usually only one right way to do sth.

  39. conventions also make switching between projects easy

  40. Ember.js' Conventions

  41. None
  42. None
  43. The Router describes the application's route hierarchy and maps URLs

    to Ember routes
  44. None
  45. Routes in Ember are nested and child routes render into

    their parent routes
  46. None
  47. Routes load models and render templates

  48. None
  49. Models represent persistent state

  50. None
  51. Templates map data to DOM

  52. None
  53. Components combine a template and associated code as a reusable

    UI element
  54. None
  55. None
  56. application.hbs {{outlet}}

  57. {{outlet}} albums.hbs

  58. album.hbs {{star-rating}} {{song-tile}} {{play-icon}}

  59. Ember CLI

  60. Ember ClI implements a build system and defines a common

    project structure
  61. » tree app/ app "## app.js "## components $ &##

    album-tile.js "## models $ &## album.js "## router.js "## routes $ &## albums.js &## templates "## application.hbs "## components $ &## album-tile.hbs &## albums.hbs
  62. // app/models/album.js import Model from 'ember-data/model'; import attr from 'ember-data/attr';

    import { belongsTo } from 'ember-data/relationships'; export default Model.extend({ title: attr('string'), artist: belongsTo() });
  63. » ember build Built project successfully. Stored in "dist/".

  64. » ember serve Livereload server on http://localhost:49152 Serving on http://localhost:4200/

    Build successful - 2569ms. Slowest Trees | Total ----------------------------------------------+--------------------- Babel | 362ms Babel | 355ms SourceMapConcat: Concat: Vendor | 227ms SourceMapConcat: Concat: Addon JS | 141ms Slowest Trees (cumulative) | Total (avg) ----------------------------------------------+--------------------- Babel (13) | 1143ms (87 ms) SourceMapConcat: Concat: Vendor (1) | 227ms SourceMapConcat: Concat: Addon JS (1) | 141ms Funnel: Addon JS (7) | 129ms (18 ms)
  65. » ember test Built project successfully. Stored in "/Users/marcoow/Documents/Code/ember-blog/tmp/class- tests_dist-7Ro1V3FR.tmp".

    ok 1 PhantomJS 1.9 - Acceptance | list posts: visiting / renders all posts … ok 67 PhantomJS 1.9 - Unit | Model | post: belongs to an author ok 68 PhantomJS 1.9 - JSHint - unit/models/post-test.js: should pass jshint 1..68 # tests 68 # pass 68 # skip 0 # fail 0
  66. Evolution

  67. Ember goes to great lengths to make sure the community

    moves forward, not leaving a single project behind
  68. RFCs Canary Beta Stable LTS

  69. RFCs are were new features and changes are discussed in

    the open before implementation begins
  70. None
  71. the RFC process is inspired by Rust's RFCs https://github.com/rust-lang/rfcs

  72. Canary builds are where new features land first (behind feature

  73. // config/environment.js var ENV = { EmberENV: { FEATURES: {

    'ember-routing-routable-components': true } } };
  74. Beta releases have new features that proved stable in Canary

    enabled by default
  75. Stable releases contain everything that proved to be stable in

    the Beta phase
  76. There are new beta and stable releases every 6 weeks

  77. the release process is inspired by the Chromium Project's Release

    Channels https://www.chromium.org/getting-involved/dev-channel
  78. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

  79. Semantic Versioning gives software versions their meaning back (if used

  80. Major.Minor.Patch

  81. Ember's 6 week stable releases are minor releases and thus

    backwards compatible
  82. …might introduce new deprecations though

  83. None
  84. Major Releases do not introduce any new functionality but remove

    previously deprecated cruft only
  85. Upgrading from one major release to the next is as

    easy as clearing all deprecations and switching the release number
  86. The whole community is moving forwards constantly in incremental steps

    that are easy for everyone to make
  87. "Stability without Stagnation"

  88. Long Term Support releases are less frequently updated stable releases

  89. every fourth stable release is an LTS release

  90. http://emberjs.com/blog/2016/02/25/announcing-embers-first-lts.html

  91. Enabling Code Reuse across the community

  92. Addons can extend the build process, add commands, merge code

    into the app, etc.
  93. » ember install ember-cli-sass Installing packages for tooling via npm.

    Binary downloaded and installed at /Users/marcoow/ Documents/Code/ember-workshop/tomster-player/ node_modules/ember-cli-sass/node_modules/broccoli-sass- source-maps/node_modules/node-sass/vendor/darwin-x64-14/ binding.node "/Users/marcoow/Documents/Code/ember-workshop/tomster- player/node_modules/ember-cli-sass/node_modules/ broccoli-sass-source-maps/node_modules/node-sass/vendor/ darwin-x64-14/binding.node" exists. testing binary. Binary is fine; exiting. Installed packages for tooling via npm. Installed addon package.
  94. » ember install ember-cli-deploy Installed packages for tooling via npm.

    installing ember-cli-deploy create config/deploy.js Installed addon package. » ember help deploy Requested ember-cli commands: ember deploy <deployTarget> <options...> Deploys an ember-cli app --deploy-config-file (String) (Default: config/deploy.js) --verbose (Boolean) (Default: false) --activate (Boolean) (Default: false) --show-progress (Boolean) (Default: true) aliases: -p, -progress --log-info-color (String) (Default: "blue") --log-error-color (String) (Default: "red")
  95. » ember install ember-simple-auth Installed packages for tooling via npm.

    Installed addon package.
  96. This is only possible with Ember CLI that provides a

    standard build system and a common project structure
  97. …and everybody in the community is using it

  98. None
  99. Big advancements

  100. Ember's conventions, unified build system, common project structure and the

    release process allow Ember to make big advancements and take the whole community with it
  101. Ember's new, super fast rendering engine 2

  102. Ember's rendering performance used to be not too great actually

  103. 2

  104. Glimmer 2 is coming with one of the next minor

    releases, thus is going to be fully backwards compatible
  105. Server side rendering for Ember apps https://github.com/ember-fastboot/fastboot-website/blob/master/public/images/logo.svg

  106. FastBoot boots Ember apps on the server and rehydrates them

    in the browser for super fast startup
  107. …which solves the problems of slow(ish) initial load while preserving

    all the benefits that you get with using sth. like Ember
  108. FastBoot will be available as an Addon and will not

    require anyone to rewrite their apps
  109. » ember install ember-cli-fastboot Installed packages for tooling via npm.

    Installed addon package. » ember fastboot Built project successfully. Stored in "fastboot-dist". Installing FastBoot npm dependencies Ember FastBoot running at http://[::]:3000
  110. » curl -i localhost:3000 HTTP/1.1 200 OK X-Powered-By: Express Content-Type:

    text/html; charset=utf-8 Content-Length: 694 ETag: W/"2b6-8EjmJvo+xk/TQB5ieKgfwg" Date: Thu, 05 May 2016 19:35:42 GMT Connection: keep-alive <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Fastboot</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/" /> <link rel="stylesheet" href="assets/vendor.css"> <link rel="stylesheet" href="assets/fastboot.css"> </head> <body> <div id="ember490" class="ember-view"><h2 id="title">Welcome to Ember</h2></div> <script src="assets/vendor.js"></script> <script src="assets/fastboot.js"></script> </body> </html>
  111. There's a bright future ahead for Ember

  112. None
  113. None
  114. Ember does not depend on the goodwill of a single

    company but is backed by a great community and core team members with all kinds of backgrounds
  115. None
  116. https://emberjs.com http://emberjs.com/images/brand/ember_Ember-Light.png

  117. Thanks

  118. http://simplabs.com @simplabs