Virtual EmberConf 2021: Platform State of the Union

Slide 1

Slide 1 text

PLATFORM STATE OF THE UNION

Slide 2

Slide 2 text

Isaac Lee Jared Galanis Kenigbolo Meya Stephen Matthew Beale Melanie Sumner Tom Dale Jen Weber Krati Ahuja Alex Navasardyan Sivakumar Kailasam Framework Learning Steering Framework Steering Framework Framework Learning Learning CLI CLI Scott Newcomer Core Team Changes Learning Learning Data Steering Steering

Slide 3

Slide 3 text

Improvements Modernized Built-In Components Production Build Templates Auto-Tracking Bug Fixes Better Error Messages Prettier New Lint Rules and Fixers Now Works In Integration Tests Route Transition Debug Utilities ember-cli-update Inspector Collapsible Sidebar Better Component Inspector Test Harness QOL Improvements Template Lint TODOs Template Recast Whitespace Preservation New Polyﬁlls and Codemods Website and Blog Redesign ember new !"lang {{page-title}} @ember!# ES Modules Unbundled ember-source RouterService#refresh()

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Deprecations getWithDefault tryInvoke String.prototype Extensions Ember.String Utilities {{#with}} Positional Arguments Implicit Injections Old Browser Support Policy Implicit this Property Lookup {{attrs.*}} Packager Experiment Legacy classNameBindings Template Syntax Classic Edition Optional Features Old Manager Capabilities hasBlock and hasBlockParams Magic Variables Array Observers Ember.Component Features On Built-In Components Transition Methods On Routes and Controllers {{loc}} Ember Global

Slide 10

Slide 10 text

t of Incoherence Pit of Incoherence Where We Are Where We Want to Be Incremental Change

Slide 11

Slide 11 text

Pit of Incoherence Pit of Incoherence Where We Are Where We Want to Be Incremental Change Octane Polaris

Slide 12

Slide 12 text

Pit of Incoherence Pit of Incoherence Where We Are Where We Want to Be Incremental Change Octane Polaris

Slide 13

Slide 13 text

Embroider HIGHLIGHT #1 Building A Bridge To Tomorrow

Slide 14

Slide 14 text

Ember addons addons Addons You app You app You App app.js vendor.js index.html

Slide 15

Slide 15 text

Ember addons addons Addons You app You app You App app.js vendor.js index.html You app You app De-Facto Standard

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Named Blocks HIGHLIGHT #2 Content. Content Everywhere.

Slide 18

Slide 18 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs Choose a destination... Destination Where would be the perfect destination for your  virtual vacation? Yufuin Scenic Japanese Onsen Town Paris Capital of France O‘ahu Third Largest Hawaiian Island

Slide 19

Slide 19 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{item.name}}

{{item.description}}

app/components/drop-down.hbs Choose a destination... Destination Where would be the perfect destination for your  virtual vacation? Yufuin Scenic Japanese Onsen Town Paris Capital of France O‘ahu Third Largest Hawaiian Island

Slide 20

Slide 20 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{item.name}}

{{item.description}}

Slide 21

Slide 21 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{item.name}}

{{item.description}}

Slide 22

Slide 22 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{item.name}}

{{item.description}}

Slide 23

Slide 23 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

app/components/drop-down.hbs Choose a destination... Destination Where would be the perfect destination for your  virtual vacation? Yufuin Scenic Japanese Onsen Town Paris Capital of France O‘ahu Third Largest Hawaiian Island

Slide 24

Slide 24 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{yield item}}

Slide 25

Slide 25 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{yield item}}

app/components/drop-down.hbs Choose a destination... Sorry, we are sold out. Join our mailing list to be notified of new tours! Destination Where would be the perfect destination for your  virtual vacation?

Slide 26

Slide 26 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{yield item}}
Sorry, we are sold out.
Join our mailing list to be notified of new tours!

Slide 27

Slide 27 text

Destination

Where would be the perfect destination for your virtual vacation?

app/templates/index.hbs

{{yield item}}
Sorry, we are sold out.
Join our mailing list to be notified of new tours!

app/components/drop-down.hbs Destination Where would be the perfect destination for your  virtual vacation? Choose a destination... Too much free time? Become a virtual tour guide and share your passion with the world! Yufuin Scenic Japanese Onsen Town Paris Capital of France O‘ahu Third Largest Hawaiian Island

Slide 28

Slide 28 text

app/templates/index.hbs

{{yield item}}

Slide 29

Slide 29 text

<:banner>

Too much free time?

Become a virtual tour guide and share your passion with the world! <:item as |item|>

<:empty>

Sorry, we are sold out.

Join our mailing list to be notified of new tours! app/templates/index.hbs

{{yield item to="item"}}
{{yield to="empty"}}

{{/if}} app/components/drop-down.hbs Destination Where would be the perfect destination for your  virtual vacation? Choose a destination... Too much free time? Become a virtual tour guide and share your passion with the world! Yufuin Scenic Japanese Onsen Town Paris Capital of France O‘ahu Third Largest Hawaiian Island

Slide 30

Slide 30 text

<:banner>

Too much free time?

Become a virtual tour guide and share your passion with the world! <:item as |item|>

<:empty>

Sorry, we are sold out.

Join our mailing list to be notified of new tours! app/templates/index.hbs

{{yield item to="item"}}
{{yield to="empty"}}

Slide 31

Slide 31 text

<:banner>

Too much free time?

Become a virtual tour guide and share your passion with the world! <:item as |item|>

<:empty>

Sorry, we are sold out.

Join our mailing list to be notified of new tours! app/templates/index.hbs

{{yield item to="item"}}
{{yield to="empty"}}

Slide 32

Slide 32 text

<:banner>

Too much free time?

Become a virtual tour guide and share your passion with the world! <:item as |item|>

<:empty>

Sorry, we are sold out.

Join our mailing list to be notified of new tours! app/templates/index.hbs

{{yield item to="item"}}
{{yield to="empty"}}

{{/if}} app/components/drop-down.hbs Destination Where would be the perfect destination for your  virtual vacation? Choose a destination... Too much free time? Become a virtual tour guide and share your passion with the world! Sorry, we are sold out. Join our mailing list to be notified of new tours!

Slide 33

Slide 33 text

<:banner>

Too much free time?

Become a virtual tour guide and share your passion with the world! <:item as |item|>

<:empty>

Sorry, we are sold out.

Join our mailing list to be notified of new tours! app/templates/index.hbs

{{yield item to="item"}}
{{yield to="empty"}}

Slide 34

Slide 34 text

<:block>... {{#my-component}} <:block>... {{/my-component}}

Slide 35

Slide 35 text

<:block>... <:block>... <:block>... <:block>...

Slide 36

Slide 36 text

<:block>... <:block>...

Slide 37

Slide 37 text

<:block>... Hello! <:block>...

Slide 38

Slide 38 text

<:block> {{#if this.condition}} ... {{/if}} {{#if this.condition}} <:block>... {{/if}}

Slide 39

Slide 39 text

{{#if (has-block "foo")}} {{yield to="foo"}} {{else}} Some default content {{/if}}

Slide 40

Slide 40 text

{{yield "one" "two" "three" to="thing"}} <:thing as |first second third|> First: {{first}} Second: {{second}} Third: {{third}}

Slide 41

Slide 41 text

Hello! <:default>Hello!

Slide 42

Slide 42 text

{{#my-component}} Hello! {{else}} Bye! {{/my-component}} <:default>Hello! <:else>Bye!

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Value Semantics HIGHLIGHT #3 Contextual Components, Helpers, Modiﬁers and More

Slide 45

Slide 45 text

Application Form

Become a virtual tour guide and share your passion with the world!

app/templates/index.hbs Application Form Become a virtual tour guide and share your passion with the world! Tomster Your Name Bio Countries Visited France Japan United States Submit

Slide 46

Slide 46 text

Application Form

Become a virtual tour guide and share your passion with the world!

app/templates/index.hbs {{yield (hash Input=(component "my-form/input" form=this) TextArea=(component "my-form/text-area" form=this) Combo=(component "my-form/combo" form=this) Submit=(component "my-form/submit" form=this) ) }} app/components/my-form.hbs Application Form Become a virtual tour guide and share your passion with the world! Tomster Your Name Bio Countries Visited France Japan United States Submit

Slide 47

Slide 47 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 48

Slide 48 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 49

Slide 49 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 50

Slide 50 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 51

Slide 51 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 52

Slide 52 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 53

Slide 53 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 54

Slide 54 text

Application Form

Become a virtual tour guide and share your passion with the world!

app/templates/index.hbs {{yield app/components/my-form.hbs Application Form Become a virtual tour guide and share your passion with the world! Tomster Your Name Bio Countries Visited France Japan United States Submit Input TextArea Combo Submit|> Input @label="Your Name" @field="name" /> TextArea @label="Bio" @field="bio" /> Combo @label="Countries Visited" @field="visited" @options={{this.countries}} /> Submit /> (component "my-form/input" form=this) (component "my-form/text-area" form=this) (component "my-form/combo" form=this) (component "my-form/submit" form=this) }}

Slide 55

Slide 55 text

NAMED BLOCKS are called by the component author and can receive data from the component via block params. CONTEXTUAL COMPONENTS are called by the component consumer and can pass data to the component via arguments and blocks.

Slide 56

Slide 56 text

{{component "some-component"}} {{modifier "some-modifier"}} {{helper "some-helper"}} new! new!

Slide 57

Slide 57 text

{{yield (component "some-component")}} {{yield (modifier "some-modifier")}} {{yield (helper "some-helper")}} new! new!

Slide 58

Slide 58 text

new! new!

Slide 59

Slide 59 text

{{component "some-component" foo="bar"}} {{modifier "some-modifier" foo="bar"}} {{helper "some-helper" foo="bar"}} new! new!

Slide 60

Slide 60 text

...

{{#if (f.helper foo="bar")}}...{{/if}} new! new!

Slide 61

Slide 61 text

Application Form

Become a virtual tour guide and share your passion with the world!

{{#if (f.isEmpty "name")}} Please provide your name. {{/if}} {{#if (f.hasMinLength "bio" 100)}} Your bio is too short. {{else if (f.hasMaxLength "bio" 500)}} Your bio is too long. {{/if}} {{#if (f.hasMinLength "visited" 3)}} Wow, you visited a lot of countries! You will be a great tour guide! {{/if}} app/templates/index.hbs Application Form Become a virtual tour guide and share your passion with the world! Tomster Your Name Bio Countries Visited France Japan United States Submit Your bio is too short. Wow, you visited a lot of countries! You will be a great tour guide!

Slide 62

Slide 62 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 63

Slide 63 text

Application Form

Become a virtual tour guide and share your passion with the world!

Slide 64

Slide 64 text

...

{{#if (this.someHelper foo="bar")}}...{{/if}} app/components/my-component.hbs new!

Slide 65

Slide 65 text

import Component from '@glimmer/component'; import { SomeComponent, someModifier, someHelper } from 'some-addon'; export default class MyComponent extends Component { SomeComponent = SomeComponent; someModifier = someModifier; someHelper = someHelper; } app/components/my-component.js {{yield (hash SomeComponent=(component this.SomeComponent foo="bar") someModifier=(modifier this.someModifier foo="bar") someHelper=(helper this.someHelper foo="bar") ) }} app/components/my-component.hbs new!

Slide 66

Slide 66 text

import Component from '@glimmer/component'; import { helper } from '@ember/component/helper'; function sum(numbers) { if (numbers.length === 0) { return 0; } else { return numbers.pop() + sum(numbers); } } export default class MyComponent extends Component { sumHelper = helper(sum); } app/components/my-component.js Sum of 1 to 5: {{this.sumHelper 1 2 3 4 5}} app/components/my-component.hbs new!

Slide 67

Slide 67 text

import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import Modifier from 'ember-modifier'; export default class MyComponent extends Component { @tracked width = 100; @tracked height = 100; get keepInViewport() { let { width, height } = this; return class extends Modifier { didInstall() { // ... } willRemove() { // ... } }; } } app/components/my-component.js

app/components/my-component.hbs new!

Slide 68

Slide 68 text

import Component from '@glimmer/component'; export default class MyComponent extends Component { SomeComponent = SomeComponent; someModifier = someModifier; someHelper = someHelper; } app/components/my-component.js app/components/my-component.hbs new! import { SomeComponent, someModifier, someHelper } from 'some-addon'; this. this. this. SomeComponent @foo="bar" /> someModifier foo="bar"}}>... someHelper foo="bar")}}...{{/if}} <

Slide 69

Slide 69 text

app/components/my-component.hbs not yet! import { SomeComponent, someModifier, someHelper } from 'some-addon'; --- --- SomeComponent @foo="bar" /> someModifier foo="bar"}}>... someHelper foo="bar")}}...{{/if}} <

Slide 70

Slide 70 text

app/components/my-component.hbs not yet! import { SomeComponent, someModifier, someHelper } from 'some-addon';

...

{{#if (someHelper foo="bar")}}...{{/if}} app/components/my-component.js import { SomeComponent, someModifier, someHelper } from 'some-addon'; --- ---

...

{{#if (someHelper foo="bar")}}...{{/if}} import Component from '@glimmer/component'; import { helper } from '@ember/component/helper'; const sum = helper(function sum(numbers) { if (numbers.length === 0) { return 0; } else { return numbers.pop() + sum(numbers); } }); export default class MyComponent extends Component { Sum of 1 to 5: {{sum 1 2 3 4 5}} // other JS things... }

Slide 71

Slide 71 text

#287 {{#in-element}} New Primitives #615 Auto-Tracking Memoization #669 Tracked Storage #625 Helper Manager #626 invokeHelper #496 Strict Mode Templates #581 New Test Waiters #580 Destroyables

Slide 72

Slide 72 text

#617 RFC Stages Process Updates Accessibility Working Group TypeScript Strike Team Tooling #649 Deprecation Staging Polyﬁlls Codemods #685 New Browser Support Policy

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Destination

Slide 19

Slide 19 text

Destination

{{item.name}}

Slide 20

Slide 20 text

Destination

{{item.name}}

Slide 21

Slide 21 text

Destination

{{item.name}}

Slide 22

Slide 22 text

Destination

{{item.name}}

Slide 23

Slide 23 text

Destination

{{item.name}}

Slide 24

Slide 24 text

Destination

{{item.name}}

Slide 25

Slide 25 text

Destination

{{item.name}}

Slide 26

Slide 26 text

Destination

{{item.name}}

Sorry, we are sold out.

Slide 27

Slide 27 text

Destination

{{item.name}}

Sorry, we are sold out.

Slide 28

Slide 28 text

{{item.name}}

Slide 29

Slide 29 text