Fuel up your Ember with Octane

Slidedeck to describe the ember roadmap in 2018 with features shipping with an edition called Octane.

Transcript

1. 02.11.2018 Fuel up your Ember with Octane Thomas Gossmann
2. 1. Ember Editions 2. Components 3. Module Unification Table of Contents 2
3. 1. Ember Editions
4. • May 2018: Call for Posts https://emberjs.com/blog/2018/05/02/ember-2018-roadmap-call-for-posts.html • Response: 52 Blog Posts https://github.com/zinyando/emberjs2018-posts 1. Ember Editions Community Involvement 4
5. • RFC Editions https://github.com/emberjs/rfcs/pull/371 • Editions vs. Releases • Funnel efforts into one edition • Features • Documentation • Defaults • Addons • Marketing 1. Ember Editions RFC 5
6. • Edition: Octane https://github.com/emberjs/rfcs/pull/364 • Focus: Performance & Productivity • Highlights: • Broccoli 2.0 • Module Unification (MU) • Glimmer Components • Native JavaScript Classes • Native JavaScript Modules 6 1. Ember Editions Octane
7. 2. Components
8. 9 2. Components Evolution of Components ember 3.0 3.1 3.2 3.3 3.4 Feature Component RFC • Template-only- glimmer-components • Named Arguments <AngleBracketsPolyfill/> Custom Components RFC Merged: 21.3.2018 <SparklesComponent/> PoC for @glimmer/component Modifiers Manager RFC Merged: 19.10.2018 Modifiers RFC Started: 17.8.2018 <AngleBrackets/> ? Glimmer Components 3.5 Broccoli 2 3.6 Native JavaScript Classes
9. • Question: What is ? • Answer: Ambiguous, could be one of the following: • Helper • Component • Property 10 2. Components Clarity (1) {{flummux}}
10. • Clarification: • RFC: Deprecate property lookup fallback https://github.com/emberjs/rfcs/blob/master/text/0308-deprecate-property-lookup-fallback.md 11 2. Components Clarity (2) Name Syntax Convention Appearance Helper {{foo}} kebap-case Template Glimmer/Ember Component <Foo> or <FooBar> StudlyCase Template Web Component <foo-bar> kebap-case Template Modifier <… {{foo}} …> kebap-case Inside Element Tag Property {{this.foo}} camelCase Template Named Argument {{@foo}} camelCase Template
11. 12 2. Components Ember Components // template.hbs <PhoneInput @required=true @value={{this.phoneNumber}} @onFocus={{action 'clear'}} local-class=“phone" {{effect 'fade-in'}} /> // controller.ts import Controller from ‘@ember/controller‘; class MyController extends Controller { phoneNumber: number = 12345; @action clear(val) {} } Legend: Component/Element Argument Attribute Modifier Property Helper // template.hbs <input value={{@value}} required={{this.required}} oninput={{action 'changeValue‘…}} onfocus={{action this.onFocus}} > // component.ts import Component from ‘@ember/component‘; class PhoneInput extends Component { onFocus?: () => void; required: boolean = this.required ?? false; @action changeValue(val) { this.set(‘value‘, val); } } <div class=“phone_eg4w3g“> <input value=“12345“ required > </div> Input Component Generated output
12. 13 2. Components Glimmer Components // template.hbs <PhoneInput @required=true @value={{this.phoneNumber}} @onFocus={{action this.clear}} local-class=“phone" {{effect 'fade-in'}} /> // controller.ts import Controller from ‘@ember/controller‘; class MyController extends Controller { phoneNumber: number = 12345; clear(val) {} } Legend: Component/Element Argument Attribute Modifier Property Helper // template.hbs <input value={{this.value}} …attributes required={{this.required}} oninput={{action this.changeValue …}} > // component.ts import Component, { tracked } from ‘@glimmer/component‘; class PhoneInput extends Component { onFocus?: () => void; required: boolean = this.required ?? false; @tracked value: number; constructor() { super(); this.value = this.args.value; } changeValue(val) { this.value = val; } } <input value=“12345“ required class=“phone_eg4w3g“ > Input Component Generated output
13. 14 2. Components @tracked (@computed 2.0)
14. • Opt-in observables • No path: @tracked(‘person‘) ! @tracked(‘person.givenName‘) • No need for set() • Auto-tracked 15 2. Components @tracked (@computed 2.0) import Component, { tracked } from '@glimmer/component'; interface Args { givenName: string; familyName: string; } class NameDisplay extends Component<Args> { @tracked private person = { givenName: string; familyName: string; } constructor() { super(); this.person.givenName = this.args.givenName; this.person.familyName = this.args.familyName; } @tracked get fullName(): string { return `${this.person.givenName} ${this.person.familyName}`; } } <NameDisplay @givenName=“Bruce“ @familyName=“Wayne“ />
15. 1) Named args cannot have default values (by design) Workaround 1: • Assign them to properties • Use {{this.prop}} instead of {{@arg}} • Use @arg decorator: sparkles-decorators 16 2. Components Criticism import Component from 'sparkles-component'; import { arg } from 'sparkles-decorators'; class MyComponent extends Component { @arg foo!: string = 'defaultValue'; @arg({name: 'bar'}) baz?: string; }
16. 1) Named args cannot have default values (by design) Workaround 2: • Use optional helper from ember-composable-helpers • Invocation: • Template (component): 17 2. Components Criticism <MyInput @onClick={{action this.click}} /> <input onclick={{action (optional @onClick)}} />
17. 2) Too much clarity when interfering with html attributes as arguments: Imagine a sparkles component with an optional id attribute, that receives a default value if none passed Invoked that way: What will happen? How do consumers know? Be careful, provide good documentation 18 2. Components Criticism <MyComponent /> <MyComponent @id="wurst"/> <MyComponent id="bla"/> // id not accessible to the component <MyComponent id="bla" @id="wurst"/> {{!template.hbs}} <div id={{this.id}} ...attributes> </div> // component.ts import Component from '@glimmer/component'; import { arg } from ‘sparkles-component‘; Import { guidFor } from ‘@ember/object/internals‘; interface Args { id?: string; } export default class MyComponent extends Component<Args> { @arg id!: string = guidFor(this); }
18. • Good Parts • No didReceiveAttrs, no didUpdateAttrs • No DOM event handlers on the component class (much cleaner) • Template contains only outerHTML • No more tagName, classNames, classNameBindings, attributeBindings • Separation of args and properties (no accidental overrides) • Use sparkles-component (requires ember 3.4) • Use sparkles-decorators for superior args handling • Make use of @tracked • Clarity for your template • Tricky Parts • Handle {{@args}} with care • No access to this.element 19 2. Components Glimmer Components Summary
19. 3. Module Unification (MU)
20. src/ data/ models/ appointment.ts product.ts recommendation/ model.ts services/ summary.ts ui/ components/ consultant-persona/ component.ts styles.css template.hbs routes/ desired-income/ route.ts template.hbs addon/ + app/ 21 3. Module Unification (MU) Who moved my cheese? addon/ components/ consultant-persona/ component.ts styles.css template.hbs desired-income/ route.ts template.hbs models/ appointment.ts product.ts recommendation.ts services/ summary.ts src/ à
21. Collections • Group modules into type-aware „collections“ Examples: components, initializers, instance- initializers, models, routes, services, utils Groups • Grouping logical units Available: data, init, ui 22 3. Module Unification (MU) Pods 2.0 src/ data/ models/ appointment.ts product.ts recommendation/ model.ts services/ summary.ts ui/ components/ consultant-persona/ component.ts styles.css template.hbs routes/ desired-income/ route.ts template.hbs
22. 23 3. Module Unification (MU) Public Collections src/ ui/ components/ wizard/ wizard-header/ component.ts styles.css template.hbs wizard-body/ component.ts styles.css template.hbs component.ts styles.css template.hbs <!-- ui/some-route/template.hbs --> <Wizard> <WizardHeader>Hello</WizardHeader> <WizardBody> Clarkees Rock! </WizardBody> </Wizard> - Components are resolved by their name (not folder structure) <WizardHeader> ! <Wizard/WizardHeader> - Public collections: components, models, partials, initializers, instance- initializers, routes, services, transforms, utils
23. src/ ui/ components/ modal/ -components/ header/ component.ts styles.css template.hbs body/ component.ts styles.css template.hbs component.ts styles.css template.hbs 24 3. Module Unification (MU) Private Collections <!-- ui/components/modal/template.hbs --> {{yield (hash header=(component Header modal=this) body=(component Body modal=this) )}} <!-- ui/some-route/template.hbs --> <Modal as |diag|> <diag.header>Hello</diag.header> <diag.body> Clarkees Rock! </diag.body> </Modal> - Scoped to their parent - Can appear in other collections as well (private components inside routes) - Private components cannot access their siblings (= need to be passed in) - Private collections: components, models, initializers, instance-initializers, routes, services, transforms
24. • RFC: Module Unification Packages https://github.com/emberjs/rfcs/pull/367 • Organize Components into lightweight packages or addons • Use {{use}} to import them into your templates: • Global {{use}} go into src/prelude.hbs which is prepended to each template 25 3. Module Unification (MU) Packages: Organization & Structure Lightweight Packages are placed in the packages/ folder in the root of your project: packages/ gadget/ src/ui/components/ widget/ component.ts template.hbs src/ … {{use Widget from 'gadget'}} <Widget @options={{someOptions}} @value={{someValue}} /> {{use DateInput from '@clark/ember-clark-ui-form'}} <DateInput @value=“1970-01-01">
25. • Folder mess: src/ui/components/ • Contains everything component related: • Components • Helpers • Modifiers • Clarity gained in templates is lost in folder structure L 26 2. Components Criticism
26. Appendix
27. 1. Install ember-cli-create: 2. Run: Will provide you a graphical wizard to select Octane parts 28 Try Ember Octane today $ yarn global add ember-cli-create $ ember-cli-create
28. • Newsletters: • Ember Times: https://the-emberjs-times.ongoodbits.com/ • Ember Weekly: http://www.emberweekly.com/ • Podcast • EmberMap Podcast: https://embermap.com/topics/the-embermap-podcast • Chat • Discord: https://discord.gg/zT3asNS 29 Staying up-to-date with ember
29. Join us on clark.de