Virtual EmberConf 2020: Platform State of the Union

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