Virtual EmberConf 2021: Platform State of the Union

Transcript

1. PLATFORM
   STATE OF
   THE UNION
   

   View Slide

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

   View Slide

3. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

4. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

5. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

6. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

7. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

8. 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 Polyfills and Codemods
   Website and Blog Redesign
   ember new !"lang
   {{page-title}}
   @ember!# ES Modules
   Unbundled ember-source
   RouterService#refresh()
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. Embroider
    HIGHLIGHT #1
    Building A Bridge To Tomorrow
    

    View Slide

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

    View Slide

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

    View Slide

16. z
    

    View Slide

17. Named Blocks
    HIGHLIGHT #2
    Content. Content Everywhere.
    

    View Slide

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

    View Slide

19. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    
    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
    
    

    View Slide

20. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    
    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
    

    View Slide

21. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    
    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
    

    View Slide

22. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    
    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
    

    View Slide

23. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    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
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    {{yield item}}
    
    

    View Slide

24. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    id="{{this.id}}-button"
    
    aria-haspopup="listbox"
    
    aria-expanded={{if this.expanded "true" "false"}}
    
    {{on "click" this.toggle}}>
    
    {{@label}}
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    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
    

    View Slide

25. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item}}
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    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?
    

    View Slide

26. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item}}
    
    
    
    {{else}}
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    {{/each}}
    
    
    
    {{/if}}
    
    
    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?
    

    View Slide

27. Destination
    
    Where would be the perfect destination for your virtual vacation?
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item}}
    
    
    
    {{else}}
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

28. 
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item}}
    
    
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

29. 
    
    
    
    
    
    Too much free time?
    
    Become a virtual tour guide and share your passion with the world!
    
    
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    {{yield to="banner"}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item to="item"}}
    
    
    
    {{else}}
    
    {{yield to="empty"}}
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

30. 
    
    
    
    
    
    Too much free time?
    
    Become a virtual tour guide and share your passion with the world!
    
    
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    {{yield to="banner"}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item to="item"}}
    
    
    
    {{else}}
    
    {{yield to="empty"}}
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

31. 
    
    
    
    
    
    Too much free time?
    
    Become a virtual tour guide and share your passion with the world!
    
    
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    {{yield to="banner"}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item to="item"}}
    
    
    
    {{else}}
    
    {{yield to="empty"}}
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

32. 
    
    
    
    
    
    Too much free time?
    
    Become a virtual tour guide and share your passion with the world!
    
    
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    {{yield to="banner"}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item to="item"}}
    
    
    
    {{else}}
    
    {{yield to="empty"}}
    
    {{/each}}
    
    
    
    {{/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!
    

    View Slide

33. 
    
    
    
    
    
    Too much free time?
    
    Become a virtual tour guide and share your passion with the world!
    
    
    
    
    
    
    
    {{item.name}}
    
    {{item.description}}
    
    
    
    
    
    Sorry, we are sold out.
    
    Join our mailing list to be notified of new tours!
    
    
    
    
    
    app/templates/index.hbs
    
    
    
    
    {{#if this.expanded}}
    
    {{yield to="banner"}}
    
    
    
    {{#each @items as |item|}}
    
    
    
    {{yield item to="item"}}
    
    
    
    {{else}}
    
    {{yield to="empty"}}
    
    {{/each}}
    
    
    
    {{/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
    

    View Slide

34. 
    
    ...
    
    
    {{#my-component}}
    
    ...
    
    {{/my-component}}
    

    View Slide

35. 
    
    ...
    
    
    
    
    ...
    
    ...
    
    ...
    
    
    

    View Slide

36. 
    
    ...
    
    
    
    
    ...
    

    View Slide

37. 
    
    ...
    
    
    
    
    Hello!
    
    ...
    
    
    

    View Slide

38. 
    
    
    
    {{#if this.condition}}
    
    ...
    
    {{/if}}
    
    
    
    
    
    
    {{#if this.condition}}
    
    ...
    
    {{/if}}
    
    
    

    View Slide

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

    View Slide

40. {{yield "one" "two" "three" to="thing"}}
    
    
    First: {{first}}
    
    Second: {{second}}
    
    Third: {{third}}
    
    
    

    View Slide

41. 
    
    Hello!
    
    
    
    
    Hello!
    
    
    

    View Slide

42. {{#my-component}}
    
    Hello!
    
    {{else}}
    
    Bye!
    
    {{/my-component}}
    
    
    Hello!
    
    Bye!
    
    
    

    View Slide

43. {{yield}} {{yield to="default"}}
    

    View Slide

44. Value Semantics
    HIGHLIGHT #3
    Contextual Components, Helpers, Modifiers and More
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. 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
    @label="Bio" @field="bio" />
    @form={{...}}
    

    View Slide

53. 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
    @label="Bio" @field="bio" />
    

    View Slide

54. 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)
    }}
    
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. 
    
    
    new!
    new!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

64. 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
    
    
    ...
    
    {{#if (this.someHelper foo="bar")}}...{{/if}}
    
    app/components/my-component.hbs
    new!
    

    View Slide

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

    View Slide

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

    View Slide

67. 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
    
    width={{this.width}}
    
    height={{this.height}}
    
    ...attributes
    
    {{this.keepInViewport}}>
    
    app/components/my-component.hbs
    new!
    

    View Slide

68. 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}}
    <
    
    
    {{#if (
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

72. #617 RFC Stages
    Process Updates
    Accessibility Working Group
    TypeScript Strike Team Tooling
    #649 Deprecation Staging
    Polyfills
    Codemods
    #685 New Browser Support Policy
    

    View Slide

73. View Slide

74. PLATFORM
    STATE OF
    THE UNION
    

    View Slide