EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity

IDIOMATIC EMBER – FINDING THE SWEET SPOT OF PERFORMANCE &
PRODUCTIVITY EMBERCONF 2016 IDIOMATIC EMBER Finding the Sweet Spot of Performance & Productivity h D O C K YA R D h

PRODUCTIVITY EMBERCONF 2016 bit.ly/idiomatic-ember

PRODUCTIVITY EMBERCONF 2016

PRODUCTIVITY EMBERCONF 2016 LAUREN TAN SUGARPIRATE_ POTETO

PRODUCTIVITY EMBERCONF 2016 ZELDA

PRODUCTIVITY EMBERCONF 2016 I WORK AT DOCKYARD

PRODUCTIVITY EMBERCONF 2016 THE STATE OF JAVASCRIPT IN 2016

PRODUCTIVITY EMBERCONF 2016 leftpad

PRODUCTIVITY EMBERCONF 2016 “I hand-rolled my own front-end stack using the most organic, gluten-free and artisanal micro- libraries.”

PRODUCTIVITY EMBERCONF 2016 Performance Productivity

PRODUCTIVITY EMBERCONF 2016 ❤ ❤

PRODUCTIVITY EMBERCONF 2016 THE EMBER WAY?

PRODUCTIVITY EMBERCONF 2016 Data Component Owner Action

PRODUCTIVITY EMBERCONF 2016 this.attrs.fooAction(val); this.get('fooAction')(val); VS

PRODUCTIVITY EMBERCONF 2016 MORE JAVASCRIPT

PRODUCTIVITY EMBERCONF 2016 DECORATORS Stage 1 https://github.com/wycats/javascript-decorators

PRODUCTIVITY EMBERCONF 2016 https://github.com/rwjblue/ember-computed-decorators @computed('first', 'last') name(first, last) { return `${first} ${last}`; }

PRODUCTIVITY EMBERCONF 2016 ASYNC/AWAIT Stage 3 https://github.com/tc39/ecmascript-asyncawait

PRODUCTIVITY EMBERCONF 2016 await fillIn('.display-title', 'Hello!'); await click('.update-display-title'); assert.equal(find('.display-title').text(), 'Hello!'); https://github.com/emberjs/rfcs/pull/119

PRODUCTIVITY EMBERCONF 2016 GENERATORS ES2015 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

PRODUCTIVITY EMBERCONF 2016 countingTask: task(function* () { this.set('count', 0); while (this.get('count') < 5) { this.incrementProperty('count'); yield timeout(300); } this.set('count', 'DONE!'); }).restartable() https://github.com/machty/ember-concurrency

PRODUCTIVITY EMBERCONF 2016 ❤

PRODUCTIVITY EMBERCONF 2016 – Yehuda Katz “All good ideas will eventually end up in Ember.”

PRODUCTIVITY EMBERCONF 2016 THE EMBER WAY

PRODUCTIVITY EMBERCONF 2016 I. Data Down, Actions Up? II. Controllers are Dead III.Declarative & Composable Templates

PRODUCTIVITY EMBERCONF 2016 Is MVC Dead? ☠

PRODUCTIVITY EMBERCONF 2016 Is MVC Dead? ☠ NOPE

PRODUCTIVITY EMBERCONF 2016 2 WAY BINDINGS

PRODUCTIVITY EMBERCONF 2016 Who owns the data?

PRODUCTIVITY EMBERCONF 2016 Component A Component A.1 Component A.2 Component A.3 Route Owns the shared state of A1 - A3

PRODUCTIVITY EMBERCONF 2016 Component A Component A.1 Component A.2 Component A.3 Route Owns the shared state of A1 - A3 {{component configComponent user=user changeStep=(action "changeStep")}}

PRODUCTIVITY EMBERCONF 2016 {{component configComponent user=user currentStep=currentStep}} // don't do this in the child component! export default Component.extend({ actions: { next() { set(this, 'currentStep', 'configure-foo'); } } }); This is bad ☹

PRODUCTIVITY EMBERCONF 2016 …or someone else's state!

PRODUCTIVITY EMBERCONF 2016 <configure-username user={{user}} currentStep={{currentStep}}> ... </configure-username>

PRODUCTIVITY EMBERCONF 2016 export default Service.extend({ init() { this._super(...arguments); this.data = []; } });

PRODUCTIVITY EMBERCONF 2016 ROUTABLE CONTROLLER

PRODUCTIVITY EMBERCONF 2016 export default Controller.extend({ queryParams: ['category'], category: null });

PRODUCTIVITY EMBERCONF 2016 ROUTABLE CONTROLLER

PRODUCTIVITY EMBERCONF 2016 ROUTABLE COMPONENT

PRODUCTIVITY EMBERCONF 2016 Component = Controller + View

PRODUCTIVITY EMBERCONF 2016 <h1>Alpaca Route Template</h1> <div class="my-amazing-template"> {{#each alpacas as |alpaca|}} <span> I'm a cute little {{alpaca}}! </span> {{/each}} </div> {{foo-alpaca alpacas=alpacas}} move to

PRODUCTIVITY EMBERCONF 2016 // shopping-cart top-level component export default Component.extend({ shoppingCart: inject.service(), actions: { remove(product) { // ... } } }); {{#each shoppingCart.products as |product|}} <h2>{{product.title}}</h2> <p>{{product.description}}</p> <button {{action "remove" product}}>Remove</button> {{/each}}

PRODUCTIVITY EMBERCONF 2016 Controller Action Action Action Route Action Action Action move to

PRODUCTIVITY EMBERCONF 2016 ACTIONS

PRODUCTIVITY EMBERCONF 2016 {{foo-bar submit="submit"}} {{foo-bar click=(action "submit")}}

PRODUCTIVITY EMBERCONF 2016 New-style Actions aka Closure Actions

PRODUCTIVITY EMBERCONF 2016 {{foo-bar click=(action "submit")}}

PRODUCTIVITY EMBERCONF 2016 Classic Actions aka String Actions

PRODUCTIVITY EMBERCONF 2016 {{foo-bar submit="submit"}}

PRODUCTIVITY EMBERCONF 2016 this.sendAction('someMysteriousAction', args);

PRODUCTIVITY EMBERCONF 2016 Your classic action

PRODUCTIVITY EMBERCONF 2016 get(this, 'submit')(...args);

PRODUCTIVITY EMBERCONF 2016 actions: { saveAndDoStuff(item) { get(this, 'save')(item) .then((savedItem) => // do stuff); } }

PRODUCTIVITY EMBERCONF 2016 ember install ember-route-action-helper https://github.com/DockYard/ember-route-action-helper

PRODUCTIVITY EMBERCONF 2016 {{foo-bar value=value updateFoo=(route-action "updateFoo") }}

PRODUCTIVITY EMBERCONF 2016 SERVICES

PRODUCTIVITY EMBERCONF 2016 export default Service.extend({ init() { this._super(...arguments); this.cart = []; }, addToCart(item) { // ... }, removeFromCart(item) { // ... } });

PRODUCTIVITY EMBERCONF 2016 {{if (eq fullName "Jim Bob") "You're the chosen one"}} https://github.com/jmurphyau/ember-truth-helpers

PRODUCTIVITY EMBERCONF 2016 {{concat "configure-" configName}} http://emberjs.com/api/classes/Ember.Templates.helpers.html

PRODUCTIVITY EMBERCONF 2016 import Ember from 'ember'; export function add([a, b]) { return a + b; } export default Ember.Helper.helper(add);

PRODUCTIVITY EMBERCONF 2016 export default Helper.extend({ // ... });

PRODUCTIVITY EMBERCONF 2016 export default Helper.extend({ localesService: inject.service('locales'), currentLocale: readOnly('localesService.currentLocale'), compute([key]) { let currentLocale = get(this, 'currentLocale'); return get(this, 'localesService').lookup(currentLocale, key); }, localeDidChange: observer('currentLocale', function() { this.recompute(); }) });

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ isDropdownDisplayed: false, actions: { saveUserAndHideDropdown(user) { get(this, 'save')(user) .then((user) => { // do stuff set(this, 'isDropdownDisplayed', false); }); } } });

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ isDropdownDisplayed: false, actions: { hideDropdown() { set(this, 'isDropdownDisplayed', false); }, saveUser(user) { return get(this, 'save')(user); } } });

PRODUCTIVITY EMBERCONF 2016 <button {{action (pipe saveUser hideDropdown) user}}> Save and Close </button>

PRODUCTIVITY EMBERCONF 2016 A(B(C(D('E'), 'F'), 'G'), 'H');

PRODUCTIVITY EMBERCONF 2016 <button {{action (pipe addToCart purchase redirectToThankYouPage) item}}> 1-Click Buy </button>

PRODUCTIVITY EMBERCONF 2016 ember install ember-composable-helpers https://github.com/DockYard/ember-composable-helpers

PRODUCTIVITY EMBERCONF 2016 <button {{action (pipe save closeDropdown) item}}>Save and Close</button> <button {{action (pipe save quitApp) item}}>Save and Quit</button>

PRODUCTIVITY EMBERCONF 2016 {{#if (eq (not (incr (count user))) (decr (count user))))}}

PRODUCTIVITY EMBERCONF 2016 COMPUTED VS HELPER VS COMPONENT HOOKS

PRODUCTIVITY EMBERCONF 2016 COMPUTEDS

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ @computed('payment', 'rate', 'periods') annuity(payment, rate, periods) { let factor = ((1 - Math.pow(1 + rate, -periods)) / rate); return payment * factor; } });

PRODUCTIVITY EMBERCONF 2016 export function customMacro(dependentKey, ...keys) { return computed(dependentKey, ...keys, { get() { // computed property logic } }); }

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ myValue: customMacro('myKey', 'foo', 'bar'), someValue: customMacro('someKey', 'baz', 'qux'), otherValue: customMacro('otherKey', 'meow', 'woof') });

PRODUCTIVITY EMBERCONF 2016 Business logic Reusable ⚛⚛⚛⚛ React to changes Changes can be implicit Totally arbitrary emojis

PRODUCTIVITY EMBERCONF 2016 HELPERS

PRODUCTIVITY EMBERCONF 2016 {{#each (repeat 3) as |nil index|}} <div data-thing={{concat "foo-" index}}> {{!some HTML block}} </div> {{/each}} https://github.com/DockYard/ember-composable-helpers#repeat

PRODUCTIVITY EMBERCONF 2016 {{capitalize "hello"}} {{capitalize "hello"}}

PRODUCTIVITY EMBERCONF 2016 export function toggle([obj, prop]) { return function() { set(obj, prop, !get(obj, prop)); }; } https://github.com/DockYard/ember-composable-helpers#toggle

PRODUCTIVITY EMBERCONF 2016 <button {{action (toggle this "isExpanded")}}> {{if isExpanded "I am expanded" "I am not"}} </button>

PRODUCTIVITY EMBERCONF 2016 Express UI logic ✍❤ Composable Simple mental model Can be used as action No hooks available (yet) Totally arbitrary emojis

PRODUCTIVITY EMBERCONF 2016 COMPONENT HOOKS

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ didReceiveAttrs() { this.updateChart(get(this, 'data')); }, updateChart(data) { // update the chart's data } });

PRODUCTIVITY EMBERCONF 2016 Initial Render init didReceiveAttrs willRender didInsertElement didRender External attr changed didUpdateAttrs didReceiveAttrs willUpdate willRender didUpdate didRender Internal value changed willUpdate willRender didUpdate didRender

PRODUCTIVITY EMBERCONF 2016 export default Component.extend({ didRender() { // this is an infinite loop that will crash your browser let isFoo = get(this, 'isFoo'); set(this, 'isFoo', !isFoo); } });

PRODUCTIVITY EMBERCONF 2016 Dealing with side eﬀects ➿ Can cause inﬁnite loops "Just re-render it" Not invoked in FastBoot environment Totally arbitrary ratings

PRODUCTIVITY EMBERCONF 2016 SHOULD I USE AN OBSERVER?

PRODUCTIVITY EMBERCONF 2016 https://youtu.be/vvZEddrClAQ

PRODUCTIVITY EMBERCONF 2016 THE FUTURE

PRODUCTIVITY EMBERCONF 2016 Game world state Front End IR Back End DirectX / OpenGL OS Screen

PRODUCTIVITY EMBERCONF 2016 Application state Front End HTMLBars Glimmer DOM APIs Browser Screen

PRODUCTIVITY EMBERCONF 2016 Hidden blocks rendered, CPU time wasted Line of Sight Camera Without occlusion culling

PRODUCTIVITY EMBERCONF 2016 Hidden blocks not rendered, CPU time saved Line of Sight Camera With occlusion culling

PRODUCTIVITY EMBERCONF 2016 https://air.mozilla.org/bay-area-rust-meetup-february-2016/#@1m53s

PRODUCTIVITY EMBERCONF 2016 TL;DR

PRODUCTIVITY EMBERCONF 2016 LAUREN TAN SUGARPIRATE_ POTETO

PRODUCTIVITY EMBERCONF 2016 Thanks! LAUREN TAN SUGARPIRATE_ POTETO

EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity

EmberConf 2016 – Idiomatic Ember: Finding the Sweet Spot of Performance & Productivity

More Decks by Lauren Tan

Other Decks in Programming

Featured

Transcript