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

Next Ember

89e3039f1a0c7d1733b3b6054d042709?s=47 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

89e3039f1a0c7d1733b3b6054d042709?s=128

Pepe Cano

October 25, 2018
Tweet

Transcript

  1. Next Ember Pepe Cano

  2. Retrospective

  3. 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
  4. 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
  5. 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
  6. 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
  7. Our Changelog

  8. 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
  9. None
  10. 2018 - Ember Roadmap Improve communication and streamline decision-making Finish

    what we started Ship a new edition: productivity and performance
  11. Next Ember

  12. Dynamic Import import Component from '@ember/component'; export default class HighchartComponent

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

    of your app bundle Stage 3 ECMA proposal Modules are cached
  14. Code Splitting & Tree shaking Engines Dynamic import ember-cli-rollup-packager ||

    embroider RFC packaging (route boundaries)
  15. Native Promise Replace RSVP & RSVP Promise Refactor non compliant

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

  17. Native Promise actions router transitions render after render destroy Native

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

    {{@title}} {{#if this.canShowCounter}} <span class="header__count">{{@count}}</span> {{/if}}
  19. 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}}
  20. 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}}
  21. 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}}
  22. 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
  23. 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>
  24. 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
  25. New File Layout: commands ember-module-migrator EMBER_CLI_MODULE_UNIFICATION=true ember serve/generate/

  26. 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' ]}});
  27. Native Classes and decorators import Component from '@ember/component'; class Person

    { name = 'Pepe'; } export default class MyComponent extends Component { person = new Person(); };
  28. Native Classes and decorators | ember-decorators Goal to deprecate EmberObject

    Alignment with JS community and better tooling
  29. 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
  30. 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() {} }
  31. 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
  32. 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 }
  33. Native Classes and decorators | ember-decorators More decorators to adopt

    all public APIs QUEST issue & codemod
  34. 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 {}
  35. // 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>
  36. 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
  37. Thank you!