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
Tweet

More Decks by Marco Otte-Witte

Other Decks in Programming

Transcript

  1. Marco Otte-Witte
    @marcoow

    View full-size slide

  2. http://simplabs.com
    @simplabs

    View full-size slide

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

    View full-size slide

  4. …let's start with some context

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. …but isn't Ember dead?

    View full-size slide

  10. Ember is alive and well, just doesn't
    receive as much hype as the other ones

    View full-size slide

  11. So what is Ember.js?

    View full-size slide

  12. Ember is a framework for ambitious
    web applications

    View full-size slide

  13. …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

    View full-size slide

  14. the base Framework with the core
    functionality
    http://emberjs.com/images/brand/ember_Ember-Light.png
    https://github.com/emberjs/ember.js

    View full-size slide

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

    View full-size slide

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


    "ember-cli": "2.5.0",


    View full-size slide

  17. the data persistence library
    http://emberjs.com/images/brand/ember_Data-Light.png
    https://github.com/emberjs/data

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. https://babeljs.io

    View full-size slide

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

    View full-size slide

  23. http://jsonapi.org

    View full-size slide

  24. JSON API is great for all APIs, not only in
    combination with Ember

    View full-size slide

  25. “ “ “ “

    View full-size slide

  26. Convention over
    Configuration

    View full-size slide

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

    View full-size slide

  28. CoC is based on the idea that all
    projects have lots of things in common
    that can all be solved once by the
    framework

    View full-size slide

  29. CoC allows you to focus on features

    View full-size slide

  30. …and features mean value

    View full-size slide

  31. Conventions also prevent projects from
    piling up complexity

    View full-size slide

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

    View full-size slide

  33. conventions also make switching
    between projects easy

    View full-size slide

  34. Ember.js' Conventions

    View full-size slide

  35. The Router
    describes the application's route
    hierarchy and maps URLs to Ember
    routes

    View full-size slide

  36. Routes in Ember are nested and child
    routes render into their parent routes

    View full-size slide

  37. Routes
    load models and render templates

    View full-size slide

  38. Models
    represent persistent state

    View full-size slide

  39. Templates
    map data to DOM

    View full-size slide

  40. Components
    combine a template and associated
    code as a reusable UI element

    View full-size slide

  41. application.hbs
    {{outlet}}

    View full-size slide

  42. {{outlet}}
    albums.hbs

    View full-size slide

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

    View full-size slide

  44. Ember ClI implements a build system
    and defines a common project structure

    View full-size slide

  45. » 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

    View full-size slide

  46. // 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()
    });

    View full-size slide

  47. » ember build
    Built project successfully. Stored in "dist/".

    View full-size slide

  48. » 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)

    View full-size slide

  49. » 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

    View full-size slide

  50. Ember goes to great lengths to make
    sure the community moves forward, not
    leaving a single project behind

    View full-size slide

  51. RFCs Canary Beta Stable LTS

    View full-size slide

  52. RFCs are were new features and
    changes are discussed in the open
    before implementation begins

    View full-size slide

  53. the RFC process is inspired by Rust's
    RFCs
    https://github.com/rust-lang/rfcs

    View full-size slide

  54. Canary builds are where new features
    land first (behind feature flags)

    View full-size slide

  55. // config/environment.js
    var ENV = {
    EmberENV: {
    FEATURES: {
    'ember-routing-routable-components': true
    }
    }
    };

    View full-size slide

  56. Beta releases have new features that
    proved stable in Canary enabled by
    default

    View full-size slide

  57. Stable releases contain everything that
    proved to be stable in the Beta phase

    View full-size slide

  58. There are new beta and stable releases
    every 6 weeks

    View full-size slide

  59. the release process is inspired by the
    Chromium Project's Release Channels
    https://www.chromium.org/getting-involved/dev-channel

    View full-size slide

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

    View full-size slide

  61. Semantic Versioning
    gives software versions their meaning
    back
    (if used correctly)

    View full-size slide

  62. Major.Minor.Patch

    View full-size slide

  63. Ember's 6 week stable releases are
    minor releases and thus backwards
    compatible

    View full-size slide

  64. …might introduce new deprecations
    though

    View full-size slide

  65. Major Releases do not introduce any
    new functionality but remove previously
    deprecated cruft only

    View full-size slide

  66. Upgrading from one major release to
    the next is as easy as clearing all
    deprecations and switching the release
    number

    View full-size slide

  67. The whole community is moving
    forwards constantly in incremental
    steps that are easy for everyone to
    make

    View full-size slide

  68. "Stability without Stagnation"

    View full-size slide

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

    View full-size slide

  70. every fourth stable release is an LTS
    release

    View full-size slide

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

    View full-size slide

  72. Enabling Code Reuse
    across the community

    View full-size slide

  73. Addons can extend the build process,
    add commands, merge code into the
    app, etc.

    View full-size slide

  74. » 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.

    View full-size slide

  75. » 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
    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")

    View full-size slide

  76. » ember install ember-simple-auth
    Installed packages for tooling via npm.
    Installed addon package.

    View full-size slide

  77. This is only possible with Ember CLI that
    provides a standard build system and a
    common project structure

    View full-size slide

  78. …and everybody in the community is
    using it

    View full-size slide

  79. Big advancements

    View full-size slide

  80. 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

    View full-size slide

  81. Ember's new, super fast rendering
    engine
    2

    View full-size slide

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

    View full-size slide

  83. Glimmer 2 is coming with one of the
    next minor releases, thus is going to be
    fully backwards compatible

    View full-size slide

  84. Server side rendering for Ember apps
    https://github.com/ember-fastboot/fastboot-website/blob/master/public/images/logo.svg

    View full-size slide

  85. FastBoot boots Ember apps on the
    server and rehydrates them in the
    browser for super fast startup

    View full-size slide

  86. …which solves the problems of
    slow(ish) initial load while preserving all
    the benefits that you get with using sth.
    like Ember

    View full-size slide

  87. FastBoot will be available as an Addon
    and will not require anyone to rewrite
    their apps

    View full-size slide

  88. » 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

    View full-size slide

  89. » 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





    Fastboot







    Welcome to Ember




    View full-size slide

  90. There's a bright future
    ahead for Ember

    View full-size slide

  91. 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

    View full-size slide

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

    View full-size slide

  93. http://simplabs.com
    @simplabs

    View full-size slide