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.

Transcript

1. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago The Future is Now! Modern Ember in 2018 Near
2. Dave Wasmer Head of Engineering @ Praxis Psst ... we're hiring! Remote, greenfield product, dedicated OSS time
3. EmberConf Keynote March 2018
4. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago ~6 months later ... How are we doing?
5. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Statuses: Complete ⚠ Partially Available In Progress Design / Planning
6. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago WARNING Use unstable, canary, or experimental features at your own risk!
7. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Buckle up ...
8. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago New File Layout a.k.a. Module Unification
9. What is it? •New folder structure •More explicit usage of code from addons (i.e. {{use}}) New File Layout
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
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
12. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago & Testing Improvements a.k.a. async / await & non-jQuery based helpers
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'); });
14. Status: Complete • Actually - async / await is supported in app code as well (as of 3.4)! & Testing Improvements
15. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago ⛴ Named Imports a.k.a. import only what you need
16. What is it? Use ES2015 named imports, which can help unlock treeshaking: & Testing Improvements import { computed } from '@ember/object';
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
18. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Native Classes a.k.a. ditch the custom object model
19. What is it? Use native JavaScript class syntax: Native Classes export default Component.extends({ "// ""... }); export default class extends Component { "// ""... }
20. Status: ⚠ Partially Available • Native classes work, with caveats: • Observers and events don't work • A few special properties need specific decorators Native Classes
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) { "// ""...
22. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Angle Brackets a.k.a. pointy Ember
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"}} "/>
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
25. Caveats: • Does not support pathed invocation: Angle Brackets {{foo/bar}} ""==> <Foo/Bar>
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. ...
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}}
28. Status: Design / Planning • Original RFC 226 was merged back in July 2017 • But ... Named Blocks
29. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Bonus Round New ideas and developments started after EmberConf!
30. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Semantic Test Helpers a.k.a. accessibility through tests
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')
32. Status: Design / Planning • RFC 327 opened in April, discussion is ongoing. Semantic Test Helpers
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
34. What is it? A new release concept to mark a change in Ember's overall programming model. Editions
35. Status: Design / Planning • RFC 371 opened earlier this month, discussion is ongoing Editions
36. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago The future of Ember looks bright! near
37. Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago But we need to show this! h/t @nullvoxpopuli and @needbee
38. Psst ... we're hiring! Remote, greenfield product, dedicated OSS time