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

Next Ember

Pepe Cano
October 25, 2018

Next Ember

Ember.js Stockholm meetup (25th October 2018)

- A quick intro of the Ember history
- How the Load Impact app has continuously upgraded Ember.
- Latest and new features that will land in Ember

Pepe Cano

October 25, 2018
Tweet

More Decks by Pepe Cano

Other Decks in Technology

Transcript

  1. Sproutcore: - CPs - Bindings - Observers - RunLoop -

    CoreView - Handlebars Sproutcore UI Kit DI API Component API Router API Testing API RSVP: Promise API Ember Data Beta Ember Inspector Code split into JS libraries Six week release cycle 17 207 201 2012 2013 2014 2015 2017 2016 2018 17 2019 1.0
  2. 17 207 201 2012 2013 2014 2015 2017 2016 2018

    17 2019 1.6 1.10 Loading and error router substates. APIs improvements: - CP - Promises - Testing - RunLoop - Helpers Router Query Params HTMLBars Block Params Services and injections The Road to 2.0 Default CLI and ES6 modules Virtual DOM and DDAU Simplify APIs Ember Data SEMVER
  3. 17 207 201 2012 2013 2014 2015 2017 2016 2018

    17 2019 1.13 2.4 New Template APIs Closure actions Helper API hasBlock API New component lifecycle Themes 2.X Alignment JS: ES6.. Ember Modules API Stabilization: Data, CLI, FastBoot, Addons Angle Bracket Pods Routable Components Subteams Contextual Components New DI container API Virtual DOM and DDAU Stabilization
  4. 17 207 201 2012 2013 2014 2015 2017 2016 2018

    2019 2.14 2.18 Engines New Testing APIs Glimmer 2 Data, FastBoot, CLI 2017- State of the Union Routable Components Pods Module Unification Reduce file size ES6 Classes and decorators Drop IE9/10 support V1 Router API Ember Modules API Data, FastBoot, CLI
  5. 17 207 201 2015 2017 2016 2018 1.7, Data beta.9,

    custom bundling 1.8, Data beta.11 1.9, Data beta.12 1.9, Data beta.14 1.10, Data beta.15 Load Impact V3 1.12, Data beta.17 1.13 1.13.6 2.0 2.1 2.2 & CLI 2.4 2.5 2.6 2.7 2.8 2.10 K6.io 2.12 2.16, Data 2.12 3.3 V4 3.4
  6. 2018 - Ember Roadmap Improve communication and streamline decision-making Finish

    what we started Ship a new edition: productivity and performance
  7. Dynamic Import import Component from '@ember/component'; export default class HighchartComponent

    extends Component { async didInsertElement() { const Highcharts = await import('highcharts'); // Add chart } };
  8. Dynamic Import ember-auto-import: auto & dynamic imports Reduce the size

    of your app bundle Stage 3 ECMA proposal Modules are cached
  9. Native Promise Replace RSVP & RSVP Promise Refactor non compliant

    APIs: hash, hashSettled, map, rethrow, filter, defer
  10. Native Promise actions router transitions render after render destroy Native

    Promises schedule callbacks on the microtask queue. Task Task Task Task Task
  11. Angle Brackets // Caller <Header @title="Hola" @count={{readonly counter}}/> // header.hbs

    {{@title}} {{#if this.canShowCounter}} <span class="header__count">{{@count}}</span> {{/if}}
  12. Named blocks // es-footer.hbs (Contextual Components) {{yield (hash info=(component 'es-footer/es-info')

    more=(component 'es-footer/es-more') )}} {{#unless hasBlock}} {{es-footer/es-info}} {{es-footer/es-more}} {{/unless}} // Caller {{es-footer}} {{es-footer as |f|}} {{#f.info}} My custom info {{/f.info}} {{f.more}} {{es-footer}}
  13. Named blocks {{es-footer as |f|}} {{f.info}} {{f.more}} {{f.more}} {{es-footer}} {{es-footer

    as |f|}} {{#f.info}} My custom info {{/f.info}} // Missing f.more {{es-footer}}
  14. Named blocks // Caller <Footer> <@info= as |title|> <h1>My {{title}}</h1>

    </@info> </Footer> <Footer info=(component 'my-info')/> // es-footer.hbs {{#if @info}} {{@info title=this.title}} {{else}} {{es-footer/es-info}} {{/if}} {{#if @more}} {{@more}} {{else}} {{es-footer/es-more}} {{/if}}
  15. New File Layout: Pods vs Classic ├── ui └── components

    ├── gravatar ├── component.js └── template.hbs src ├── data │ ├── models │ │ ├── comment │ │ │ ├── adapter.js │ │ │ ├── model.js │ │ │ └── serializer.js │ │ └── author.js │ └── transforms ├── services ├── ui │ ├── components │ ├── partials │ ├── routes │ ├── styles │ └── index.html ├── utils ├── main.js └── router.js
  16. New File Layout: Addons ├── styles │ └── power-select.scss ├──

    ui │ └── components │ ├── main │ │ ├── component.js │ │ └── template.hbs │ ├── multiple │ ├── component.js │ └── template.hbs └── main.js {{! src/prelude.hbs }} {{use Select from 'ember-power-select'}} {{! src/ui/routes/posts/template.hbs }} <Select @options=names as |name|> {{name}} </Select>
  17. New File Layout: module scopes Private Project & Route Packages:

    local Packages: engine ├── ui ├── routes ├── post ├── -components └── post-viewer ├── options │ ├── component.js │ └── template.hbs ├── component.js └── template.hbs
  18. Native Classes and decorators let app = new EmberApp(defaults, {

    babel: { // For Babel 6.X and set `parser`: 'babel-eslint' plugins: [ 'babel-plugin-transform-class-properties', 'babel-plugin-transform-decorators-legacy' ]}});
  19. Native Classes and decorators import Component from '@ember/component'; class Person

    { name = 'Pepe'; } export default class MyComponent extends Component { person = new Person(); };
  20. import { set } from '@ember/object'; import { computed }

    from '@ember-decorators/object'; class City { name = 'Stockholm'; country = 'Sweden'; @computed('name', 'country') get fullName() { return `${this.name}, ${this.country}`; } } let city = new City(); set(city, 'country', 'Spain'); // CPs not working with native set console.log(city.fullName); // Stockholm, Spain
  21. import Component from '@ember/component'; import { observes, on, action }

    from '@ember-decorators/object'; import { empty } from '@ember-decorators/object/computed'; export default class MyComponent extends Component { name = 'My name'; @empty('name') isEmptyName; @observes('name') nameChanged() {} @on('didInsertElement') didInsertElementEvent() {} @action changeName() {} }
  22. class City extends EmberObject { name = 'Stockholm'; } ERROR:

    using `new` when extending EmberObject let city = new City({name: 'Huelva'}); (<=3.5) name -> Huelva (>=3.6) name -> Stockholm Deprecation + Breaking private API !! Must use `create` when extends from `EmberObject` city = City.create({name: 'Huelva'}); () name -> Huelva
  23. import Component from '@ember/component'; import { className, classNames, tagName, attribute

    } from '@ember-decorators/component'; @tagName('span') @classNames('my-component') export default class MyComponent extends Component { @attribute role = 'button'; @className isActive = true; // is-active @className boundField = 'default-class'; @className('is-large', 'is-small') large = false; // is-small }
  24. Glimmer components (sparkles-component) @tagName('span') @classNames('my-component') export default class MyComponent extends

    Component { @attribute role = 'button'; } // my-component.hbs <span class="my-component" ...attributes> <h1>{{@name}}</h1> </span> export default class MyComponent extends GlimmerComponent {}
  25. // Caller <My-component class="is-active" role="button" @name="Hola"/> //my-component.hbs <span class="my-component" ...attributes>

    <h1>{{@name}}</h1> </span> // output <span class="my-component is-active" role="button"> <h1>Hola</h1> </span>
  26. Glimmer/Template only components Typescript New Testing API Routing service ES5

    GET for CPs New Homepage ... Native Promises Dynamic import Code Splitting & Tree shaking Named Blocks Angle Brackets New File Layout Native Classes