The Future is Now: Ember in 2018

F70874714f4bb31b2ab4b6c70de39b04?s=47 Dave Wasmer
September 21, 2018

The Future is Now: Ember in 2018

Let's explore the latest core developments and ecosystem addons that enable the next generation of Ember developer experience. At EmberConf earlier this year, Tom Dale and Yehuda Katz demonstrated what the future of Ember of development would look like. A few short months later, and lots of progress has been made - we'll see what's landed, what's coming, and how to write bleeding edge Ember.

F70874714f4bb31b2ab4b6c70de39b04?s=128

Dave Wasmer

September 21, 2018
Tweet

Transcript

  1. 1.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago The Future is Now! Modern Ember in 2018 Near
  2. 2.

    Dave Wasmer Head of Engineering @ Praxis Psst ... we're

    hiring! Remote, greenfield product, dedicated OSS time
  3. 5.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Statuses: Complete ⚠ Partially Available In Progress Design / Planning
  4. 6.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago WARNING Use unstable, canary, or experimental features at your own risk!
  5. 8.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago New File Layout a.k.a. Module Unification
  6. 9.

    What is it? •New folder structure •More explicit usage of

    code from addons (i.e. {{use}}) New File Layout
  7. 10.

    Status: ⚠ Partially Available • Available behind flags • Still

    in progress: • Performance improvements & benchmarking • Dummy apps falsely detected as MU apps • Generator updates • Handle old CLI versions • MU addon + classic app interop New File Layout
  8. 11.

    How to use • Run all commands with these flags

    • Add to package.json: • Then: New File Layout $ MODULE_UNIFICATION=true EMBER_CLI_MODULE_UNIFICATION=true ember new modern-ember "scripts": { "ember": "MODULE_UNIFICATION=true EMBER_CLI_MODULE_UNIFICATION=true ember" yarn ember server
  9. 12.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago & Testing Improvements a.k.a. async / await & non-jQuery based helpers
  10. 13.

    What is it? Use async / await in tests: &

    Testing Improvements it('button does something', async function() { await visit('/'); await click('.button'); expect(currentURL()).to.equal('/something-else'); });
  11. 14.

    Status: Complete • Actually - async / await is supported

    in app code as well (as of 3.4)! & Testing Improvements
  12. 15.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago ⛴ Named Imports a.k.a. import only what you need
  13. 16.

    What is it? Use ES2015 named imports, which can help

    unlock treeshaking: & Testing Improvements import { computed } from '@ember/object';
  14. 17.

    Status: ⚠ Partially Available • Named imports themselves are fully

    supported: • But treeshaking is still in progress; there's experimental support via ember-cli-rollup-packager ⛴ Named Imports import { computed } from '@ember/object'; ember install ember-cli-rollup-packager
  15. 18.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Native Classes a.k.a. ditch the custom object model
  16. 19.

    What is it? Use native JavaScript class syntax: Native Classes

    export default Component.extends({ "// ""... }); export default class extends Component { "// ""... }
  17. 20.

    Status: ⚠ Partially Available • Native classes work, with caveats:

    • Observers and events don't work • A few special properties need specific decorators Native Classes
  18. 21.

    Status: Design / Planning RFC 338: Native Class Roadmap Native

    Classes "// Looks like a Component? Treat it like a Component! export default class FooComponent { didInsertElement() { if (this.args.isShowing) { "// ""...
  19. 23.

    What is it? Use angle brackets + PascalCase to invoke

    components: Angle Brackets {{site-header user=this.user class=(if this.user.isAdmin "admin")}} <SiteHeader @user={{this.user}} class={{if this.user.isAdmin "admin"}} "/>
  20. 24.

    Status: Complete • Ships natively in 3.4+ • Supported in

    2.12 - 3.4 via polyfill addon: Angle Brackets ember install ember-angle-bracket-invocation-polyfill
  21. 26.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Named Blocks a.k.a. named yields, a.k.a. named slots, a.k.a. block slots, a.k.a. ...
  22. 27.

    What is it? Pass multiple named template blocks into a

    component: Named Blocks {{#x-modal}} <@header=> <h1>I'm a modal header!"</h1> "</@header> <@body=> <p>I'm the body"</p> "</@body> {{/x-modal}}
  23. 28.

    Status: Design / Planning • Original RFC 226 was merged

    back in July 2017 • But ... Named Blocks
  24. 29.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Bonus Round New ideas and developments started after EmberConf!
  25. 30.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Semantic Test Helpers a.k.a. accessibility through tests
  26. 31.

    What is it? Use semantic, accessibility-based selectors in tests (rather

    than CSS based selectors) Semantic Test Helpers fillIn('.login-email', 'jane@example.com') fillIn('Email', 'jane@example.com')
  27. 32.

    Status: Design / Planning • RFC 327 opened in April,

    discussion is ongoing. Semantic Test Helpers
  28. 33.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago Editions a.k.a. what every other framework uses major semver releases for
  29. 34.

    What is it? A new release concept to mark a

    change in Ember's overall programming model. Editions
  30. 35.

    Status: Design / Planning • RFC 371 opened earlier this

    month, discussion is ongoing Editions
  31. 36.
  32. 37.

    Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018

    Chicago But we need to show this! h/t @nullvoxpopuli and @needbee