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

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
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!