Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Virtual EmberConf 2020: Platform State of the Union

Virtual EmberConf 2020: Platform State of the Union

Godfrey Chan

March 17, 2020
Tweet

More Decks by Godfrey Chan

Other Decks in Programming

Transcript

  1. PLATFORM
    STATE OF
    THE UNION

    View Slide

  2. HTML-First
    HIGHLIGHT #1
    For the ambitious markup developer.

    View Slide





  3. SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide





  4. SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  5. !!"

    * Base Elements

    !#

    * {

    margin: 0;

    padding: 0;

    }

    body,

    h1,

    h2,

    h3,

    h4,

    h5,

    h6,

    p,

    div,

    span,

    a,

    button {

    font-family: 'Lato', 'Open Sans', 'Helvetica Neue', 'Segoe UI', Helvetica;

    line-height: 1.5;

    }

    body {

    background: #f3f3f3;

    }

    a {

    color: #016aba;

    text-decoration: none;

    }

    app/styles/app.css




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  6. AN EMBER DEV'S
    GUIDE TO
    CSS GRID
    TOMORROW AT 1:30 PM · WITH JAMES STEINBACH

    View Slide



  7. app/templates/index.hbs




    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>





    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>



    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>

    View Slide

  8. app/components/nav-bar.hbs


    app/templates/index.hbs




    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>





    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>



    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>

    View Slide



  9. SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>
    app/components/nav-bar.hbs







    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>





    "#div>

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide








  10. "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>





    "#div>

    "#article>

    "#li>



    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  11. app/components/rental.hbs


    "#li>



    app/templates/index.hbs






    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>





    "#div>

    "#article>






    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>





    "#div>

    "#article>




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  12. app/components/rental.hbs






    View Larger"#small>

    "#button>



    Grand Old Mansion"#a>"#h3>

    Owner"&/span> Veruca Salt"#div>

    Type"&/span> Standalone"#div>

    Location"&/span> San Francisco"#div>

    Number of bedrooms"&/span> 15"#div>

    "#div>





    "#div>

    "#article>


    "#li>



    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide







  13. View Larger"#small>

    "#button>



    {{@title}}"#a>"#h3>

    Owner"&/span> {{@owner}}"#div>

    Type"&/span> {{@type}}"#div>

    Location"&/span> {{@location}}"#div>

    Number of bedrooms"&/span> {{@bedrooms}}"#div>

    "#div>





    "#div>

    "#article>
    app/components/rental.hbs


    "#li>



    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide







  14. View Larger"#small>

    "#button>



    {{@title}}"#a>"#h3>

    Owner"&/span> {{@owner}}"#div>

    Type"&/span> {{@type}}"#div>

    Location"&/span> {{@location}}"#div>

    Number of bedrooms"&/span> {{@bedrooms}}"#div>

    "#div>





    "#div>

    "#article>
    app/components/rental.hbs



    @title="Grand Old Mansion"

    @owner="Veruca Salt"

    @type="Standalone"

    @location="San Francisco"

    @bedrooms="15"

    @url="/rentals/grand-old-mansion"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Urban Living"

    @owner="Mike Teavee"

    @type="Community"

    @location="Seattle"

    @bedrooms="1"

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  15. RFC #457 Nested Invocations in Angle Bracket Syntax

    View Slide


  16. RFC #311 Angle Bracket Invocation

    View Slide

  17. {{yield}}

    View Slide

  18. {{yield to="header"}}
    RFC #460 Yieldable Named Blocks
    soon!

    View Slide

  19. {{#if @isAdmin}}

    Delete"#button>

    {{/if}}

    View Slide

  20. {{#if (or @isAuthor @isAdmin)}}

    Delete"#button>

    {{/if}}
    RFC #562 Adding Logical Operators To Templates
    soon!

    View Slide

  21. z

    View Slide

  22. HTML-First
    HIGHLIGHT #1
    For the ambitious markup developer.

    View Slide

  23. OCTANE:
    A PARADIGM SHIFT
    IN EMBERJS
    TODAY AT 11:30 AM · WITH SUCHITA DOSHI

    View Slide

  24. Integrating
    JavaScript
    HIGHLIGHT #2
    E!ortless reactivity.

    View Slide


  25. url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion&

    text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&

    hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&

    via=emberjs"

    target="_blank"

    rel="external nofollow noopener noreferrer"

    class="share button">

    Share on Twitter

    "#a>
    app/components/share-button.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    View Slide

  26. app/components/share-button.js

    url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion&
    text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&

    hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&

    via=emberjs"

    target="_blank"

    rel="external nofollow noopener noreferrer"

    class="share button">

    Share on Twitter

    "#a>
    app/components/share-button.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    View Slide

  27. app/components/share-button.js

    url=https%3A%2F%2Fsuper-rentals-tutorial.com%2Frentals%2Fgrand-old-mansion&
    text=Check+out+Grand+Old+Mansion+on+Super+Rentals%21&

    hashtags=vacation%2Ctravel%2Cauthentic%2Cblessed%2Csuperrentals&

    via=emberjs"

    target="_blank"

    rel="external nofollow noopener noreferrer"

    class="share button">

    Share on Twitter

    "#a>
    app/components/share-button.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    import Component from '@glimmer/component';

    export default class ShareButtonComponent extends Component {

    get shareURL() {

    let url = new URL('https:"$twitter.com/intent/tweet');

    url.searchParams.set('url', window.location.href);

    if (this.args.text) {

    url.searchParams.set('text', this.args.text);

    }

    if (this.args.hashtags) {

    url.searchParams.set('hashtags', this.args.hashtags);

    }

    if (this.args.via) {

    url.searchParams.set('via', this.args.via);

    }

    return url;

    }

    }

    View Slide

  28. import Component from '@glimmer/component';

    export default class ShareButtonComponent extends Component {

    get shareURL() {

    let url = new URL('https:"$twitter.com/intent/tweet');

    url.searchParams.set('url', window.location.href);

    if (this.args.text) {

    url.searchParams.set('text', this.args.text);

    }

    if (this.args.hashtags) {

    url.searchParams.set('hashtags', this.args.hashtags);

    }

    if (this.args.via) {

    url.searchParams.set('via', this.args.via);

    }

    return url;

    }

    }
    app/components/share-button.js

    target="_blank"

    rel="external nofollow noopener noreferrer"

    class="share button">

    Share on Twitter

    "#a>
    app/components/share-button.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place to stay."#p>

    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    View Slide

  29. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    toggleSize() {

    this.isLarge = !this.isLarge;

    }

    }
    app/components/rental/image.js
    {{#if this.isLarge}}





    View Smaller"#small>

    "#div>

    {{else}}





    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"

    View Slide

  30. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    toggleSize() {

    this.isLarge = !this.isLarge;

    }

    }
    app/components/rental/image.js
    {{#if this.isLarge}}





    View Smaller"#small>

    "#div>

    {{else}}





    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"

    View Slide

  31. AUTOTRACKING:
    REACTIVITY AND STATE IN
    MODERN EMBER
    TOMORROW AT 9:30 AM · WITH CHRIS GARRETT

    View Slide

  32. Working

    With The DOM
    HIGHLIGHT #3
    Interactions made simple.

    View Slide

  33. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    app/components/rental/image.js
    {{#if this.isLarge}}




    View Smaller"#small>

    "#div>

    {{else}}




    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"
    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    this.isLarge = !this.isLarge;

    }

    }
    toggleSize() {
    >
    >

    View Slide

  34. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    app/components/rental/image.js
    {{#if this.isLarge}}




    View Smaller"#small>

    "#div>

    {{else}}




    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"
    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    this.isLarge = !this.isLarge;

    }

    }
    toggleSize() {
    >
    >
    @action
    import { action } from '@ember/object';

    View Slide

  35. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    app/components/rental/image.js
    {{#if this.isLarge}}




    View Smaller"#small>

    "#div>

    {{else}}




    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"
    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    this.isLarge = !this.isLarge;

    }

    }
    toggleSize() {
    >
    >
    {{on "click" this.toggleSize}}
    {{on "click" this.toggleSize}}
    @action
    import { action } from '@ember/object';

    View Slide

  36. import Component from '@glimmer/component';

    import { tracked } from '@glimmer/tracking';

    import { action } from '@ember/object';

    export default class RentalImageComponent extends Component {

    @tracked isLarge = false;

    @action toggleSize() {

    this.isLarge = !this.isLarge;

    }

    }
    app/components/rental/image.js
    {{#if this.isLarge}}





    View Smaller"#small>

    "#div>

    {{else}}





    View Larger"#small>

    "#div>

    {{/if}}
    app/components/rental/image.hbs
    {{on "click" this.toggleSize}}
    {{on "click" this.toggleSize}}




    SuperRentals"#h1>"#a>



    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a place
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Mans
    Owner"&/span> Veruca Sa
    Type"&/span> Standalone"

    View Slide

  37. "#div>



    Where would you like to stay?"#span>



    "#label>






    @title="Grand Old Mansion"

    @owner="Veruca Salt"

    @type="Standalone"

    @location="San Francisco"

    @bedrooms="15"

    @url="/rentals/grand-old-mansion"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Urban Living"

    @owner="Mike Teavee"

    @type="Community"

    @location="Seattle"

    @bedrooms="1"

    @url="/rentals/urban-living"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Downtown Charm"

    @owner="Violet Beauregarde"

    @type="Community"

    app/templates/index.hbs




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  38. "#div>



    Where would you like to stay?"#span>


    "#label>






    @title="Grand Old Mansion"

    @owner="Veruca Salt"

    @type="Standalone"

    @location="San Francisco"

    @bedrooms="15"

    @url="/rentals/grand-old-mansion"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Urban Living"

    @owner="Mike Teavee"

    @type="Community"

    @location="Seattle"

    @bedrooms="1"

    @url="/rentals/urban-living"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Downtown Charm"

    @owner="Violet Beauregarde"

    @type="Community"

    app/templates/index.hbs
    >




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  39. "#div>



    Where would you like to stay?"#span>


    "#label>






    @title="Grand Old Mansion"

    @owner="Veruca Salt"

    @type="Standalone"

    @location="San Francisco"

    @bedrooms="15"

    @url="/rentals/grand-old-mansion"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Urban Living"

    @owner="Mike Teavee"

    @type="Community"

    @location="Seattle"

    @bedrooms="1"

    @url="/rentals/urban-living"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Downtown Charm"

    @owner="Violet Beauregarde"

    @type="Community"

    app/templates/index.hbs
    >
    autofocus




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  40. "#div>



    Where would you like to stay?"#span>


    "#label>






    @title="Grand Old Mansion"

    @owner="Veruca Salt"

    @type="Standalone"

    @location="San Francisco"

    @bedrooms="15"

    @url="/rentals/grand-old-mansion"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Urban Living"

    @owner="Mike Teavee"

    @type="Community"

    @location="Seattle"

    @bedrooms="1"

    @url="/rentals/urban-living"

    @img="https:"$""%"

    @map="https:"$""%"

    "'

    "#li>




    @title="Downtown Charm"

    @owner="Violet Beauregarde"

    @type="Community"

    app/templates/index.hbs
    >
    {{autofocus}}
    import Modifier from 'ember-modifier';

    export default class AutofocusModifier extends Modifier {

    didInstall() {

    this.element.focus();

    if (document.activeElement !== this.element) {

    !$ Make the element focusable then try again.

    this.element.setAttribute('tabindex', -1);

    this.element.focus();

    }

    }

    }
    app/modifiers/autofocus.js




    SuperRentals"#h


    About"#a>

    Contac
    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand
    Owner"&/span> V
    Type"&/span> Sta
    Location"&/s
    Number of be
    "#div>

    View Slide

  41. {{!!% uses @ember/render-modifiers addon !%}}

    app/components/animated-dots.hbs
    import Component from '@glimmer/component';

    import { action } from '@ember/object';

    import d3 from 'd3';

    export default class AnimatedDotsComponent extends Component {
    app/components/animated-dots.js




    SuperRentals"#h1>"#a>


    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a plac
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Ma
    Owner"&/span> Veruca
    Type"&/span> Standalon
    />

    View Slide

  42. {{!!% uses @ember/render-modifiers addon !%}}

    app/components/animated-dots.hbs
    import Component from '@glimmer/component';

    import { action } from '@ember/object';

    import d3 from 'd3';

    export default class AnimatedDotsComponent extends Component {
    app/components/animated-dots.js
    @action setupAnimation(element) {

    !$ From https:!$bl.ocks.org/mbostock/3231298

    !$ Released under the GNU General Public License, version 3

    let width = 960, height = 500;

    let svg = d3.select(element).append("svg")

    .attr("width", width)

    .attr("height", height);

    let nodes = d3.range(200).map(() => ({ radius: Math.random() * 12 + 4 })),

    root = nodes[0],

    color = d3.scale.category10();

    root.radius = 0;

    root.fixed = true;

    let force = d3.layout.force()

    .gravity(0.05)

    .charge(function(d, i) { return i ? 0 : -2000; })

    .nodes(nodes)

    .size([width, height]);

    force.start();




    SuperRentals"#h1>"#a>


    About"#a>

    Contact"#a>

    "#div>

    "#nav>





    "#div>

    Welcome to Super Rentals!"#h2>

    We hope you find exactly what you're looking for in a plac
    About Us"#a>

    "#div>





    Where would you like to stay?"#span>



    "#label>











    "#button>



    Grand Old Ma
    Owner"&/span> Veruca
    Type"&/span> Standalon
    {{did-insert this.setupAnimation}} />

    View Slide

  43. {{!!% uses ember-ref-modifier addon !%}}




    Play"#button>

    "#div>
    app/components/video-player.hbs
    import Component from '@glimmer/component';

    import { action } from '@ember/object';

    export default class VideoPlayerComponent extends Component {

    @action play() {

    }

    }

    app/components/video-player.js
    !$ !!&?
    />

    View Slide

  44. {{!!% uses ember-ref-modifier addon !%}}




    Play"#button>

    "#div>
    app/components/video-player.hbs
    import Component from '@glimmer/component';

    import { action } from '@ember/object';

    export default class VideoPlayerComponent extends Component {

    @action play() {

    }

    }

    app/components/video-player.js
    !$ !!&?
    />
    {{ref this "videoElement"}}

    View Slide

  45. {{!!% uses ember-ref-modifier addon !%}}




    Play"#button>

    "#div>
    app/components/video-player.hbs
    import Component from '@glimmer/component';

    import { action } from '@ember/object';

    export default class VideoPlayerComponent extends Component {

    @action play() {

    }

    }

    app/components/video-player.js
    />
    {{ref this "videoElement"}}
    this.videoElement.play();

    View Slide

  46. Working

    With The DOM
    HIGHLIGHT #3
    Interactions made simple.

    View Slide

  47. Into The Future
    WHAT'S NEXT?
    Building Ember, together.

    View Slide

  48. EMBERJS
    2019-2020
    ROADMAP
    Invest in Octane
    Modernize our build system
    Better accessibility by default
    Share Octane outside our community

    View Slide

  49. WHY JS
    IS COMING TO
    EMBER TEMPLATES
    TODAY AT 5:00 PM · WITH MATTHEW BEALE

    View Slide

  50. “Compiling Ember” by Edward Faulkner

    View Slide

  51. BUILDING
    EMBERJS
    TOGETHER
    Get involved
    Issues, PRs and RFCs
    Addons and tooling
    Teaching and outreach

    View Slide

  52. WHY CONTRIBUTING
    SEEMS SCARY
    TOMORROW AT 5:00 PM · WITH ANNE-GREETH VAN HERWIJNEN

    View Slide

  53. View Slide

  54. Melanie Sumner
    We are building it together.
    We are the together framework.

    View Slide

  55. View Slide

  56. View Slide