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

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

More Decks by Marco Otte-Witte

Other Decks in Programming


  1. 2

  2. …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
  3. CoC is based on the idea that all projects have

    lots of things in common that can all be solved once by the framework
  4. » 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
  5. // 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() });
  6. » 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)
  7. » 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
  8. Ember goes to great lengths to make sure the community

    moves forward, not leaving a single project behind
  9. RFCs are were new features and changes are discussed in

    the open before implementation begins
  10. // config/environment.js var ENV = { EmberENV: { FEATURES: {

    'ember-routing-routable-components': true } } };
  11. the release process is inspired by the Chromium Project's Release

    Channels https://www.chromium.org/getting-involved/dev-channel
  12. Upgrading from one major release to the next is as

    easy as clearing all deprecations and switching the release number
  13. » 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.
  14. » 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")
  15. This is only possible with Ember CLI that provides a

    standard build system and a common project structure
  16. 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
  17. 2

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

    releases, thus is going to be fully backwards compatible
  19. FastBoot boots Ember apps on the server and rehydrates them

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

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

    require anyone to rewrite their apps
  22. » 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
  23. » 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>
  24. 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