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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  15. RFC #457 Nested Invocations in Angle Bracket Syntax

    View full-size slide


  16. RFC #311 Angle Bracket Invocation

    View full-size slide

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

    View full-size slide

  18. {{#if @isAdmin}}

    Delete"#button>

    {{/if}}

    View full-size slide

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

    Delete"#button>

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  23. 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 full-size slide

  24. 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 full-size slide

  25. 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 full-size slide

  26. 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 full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. Working

    With The DOM
    HIGHLIGHT #3
    Interactions made simple.

    View full-size slide

  31. 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 full-size slide

  32. 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 full-size 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() {
    >
    >
    {{on "click" this.toggleSize}}
    {{on "click" this.toggleSize}}
    @action
    import { action } from '@ember/object';

    View full-size slide

  34. 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 full-size slide

  35. "#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 full-size slide

  36. "#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 full-size 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
    >
    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 full-size 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
    >
    {{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 full-size slide

  39. {{!!% 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 full-size slide

  40. {{!!% 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 full-size slide

  41. {{!!% 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 full-size slide

  42. {{!!% 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 full-size 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
    />
    {{ref this "videoElement"}}
    this.videoElement.play();

    View full-size slide

  44. Working

    With The DOM
    HIGHLIGHT #3
    Interactions made simple.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. “Compiling Ember” by Edward Faulkner

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide