Slide 1

Slide 1 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago The Future is Now! Modern Ember in 2018 Near

Slide 2

Slide 2 text

Dave Wasmer Head of Engineering @ Praxis Psst ... we're hiring! Remote, greenﬁeld product, dedicated OSS time

Slide 3

Slide 3 text

EmberConf Keynote March 2018

Slide 4

Slide 4 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago ~6 months later ... How are we doing?

Slide 5

Slide 5 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Statuses: Complete ⚠ Partially Available In Progress Design / Planning

Slide 6

Slide 6 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago WARNING Use unstable, canary, or experimental features at your own risk!

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago New File Layout a.k.a. Module Uniﬁcation

Slide 9

Slide 9 text

What is it? •New folder structure •More explicit usage of code from addons (i.e. {{use}}) New File Layout

Slide 10

Slide 10 text

Status: ⚠ Partially Available • Available behind ﬂags • 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

Slide 11

Slide 11 text

How to use • Run all commands with these ﬂags • 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

Slide 12

Slide 12 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago & Testing Improvements a.k.a. async / await & non-jQuery based helpers

Slide 13

Slide 13 text

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'); });

Slide 14

Slide 14 text

Status: Complete • Actually - async / await is supported in app code as well (as of 3.4)! & Testing Improvements

Slide 15

Slide 15 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago ⛴ Named Imports a.k.a. import only what you need

Slide 16

Slide 16 text

What is it? Use ES2015 named imports, which can help unlock treeshaking: & Testing Improvements import { computed } from '@ember/object';

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Native Classes a.k.a. ditch the custom object model

Slide 19

Slide 19 text

What is it? Use native JavaScript class syntax: Native Classes export default Component.extends({ "// ""... }); export default class extends Component { "// ""... }

Slide 20

Slide 20 text

Status: ⚠ Partially Available • Native classes work, with caveats: • Observers and events don't work • A few special properties need speciﬁc decorators Native Classes

Slide 21

Slide 21 text

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) { "// ""...

Slide 22

Slide 22 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Angle Brackets a.k.a. pointy Ember

Slide 23

Slide 23 text

What is it? Use angle brackets + PascalCase to invoke components: Angle Brackets {{site-header user=this.user class=(if this.user.isAdmin "admin")}}

Slide 24

Slide 24 text

Status: Complete • Ships natively in 3.4+ • Supported in 2.12 - 3.4 via polyﬁll addon: Angle Brackets ember install ember-angle-bracket-invocation-polyfill

Slide 25

Slide 25 text

Caveats: • Does not support pathed invocation: Angle Brackets {{foo/bar}} ""==>

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

What is it? Pass multiple named template blocks into a component: Named Blocks {{#x-modal}} <@header=>

I'm a modal header!"

" <@body=>

I'm the body"

" {{/x-modal}}

Slide 28

Slide 28 text

Status: Design / Planning • Original RFC 226 was merged back in July 2017 • But ... Named Blocks

Slide 29

Slide 29 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Bonus Round New ideas and developments started after EmberConf!

Slide 30

Slide 30 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago Semantic Test Helpers a.k.a. accessibility through tests

Slide 31

Slide 31 text

What is it? Use semantic, accessibility-based selectors in tests (rather than CSS based selectors) Semantic Test Helpers fillIn('.login-email', '[email protected]') fillIn('Email', '[email protected]')

Slide 32

Slide 32 text

Status: Design / Planning • RFC 327 opened in April, discussion is ongoing. Semantic Test Helpers

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

What is it? A new release concept to mark a change in Ember's overall programming model. Editions

Slide 35

Slide 35 text

Status: Design / Planning • RFC 371 opened earlier this month, discussion is ongoing Editions

Slide 36

Slide 36 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago The future of Ember looks bright! near

Slide 37

Slide 37 text

Dave Wasmer Praxis (discoverpraxis.com) Psst ... we're hiring! EmberCamp 2018 Chicago But we need to show this! h/t @nullvoxpopuli and @needbee

Slide 38

Slide 38 text

Psst ... we're hiring! Remote, greenﬁeld product, dedicated OSS time