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
・ D O C K YA R D ・

EMBERCONF 2016
bit.ly/idiomatic-ember

EMBERCONF 2016

EMBERCONF 2016
🐰 LAUREN TAN
SUGARPIRATE_
POTETO

EMBERCONF 2016
🐶 ZELDA

EMBERCONF 2016
I WORK AT
DOCKYARD

EMBERCONF 2016
THE STATE OF
JAVASCRIPT IN 2016

EMBERCONF 2016
leftpad

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

EMBERCONF 2016
Performance Productivity

EMBERCONF 2016
❤❤

EMBERCONF 2016
THE EMBER WAY?

EMBERCONF 2016
Data
Component
Owner
Action

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

EMBERCONF 2016
MORE JAVASCRIPT

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

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

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

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

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

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

EMBERCONF 2016
❤

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

EMBERCONF 2016
THE EMBER WAY 🙏

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

EMBERCONF 2016
Is MVC Dead? ☠

EMBERCONF 2016
Is MVC Dead? ☠NOPE

EMBERCONF 2016
2 WAY BINDINGS 💣

EMBERCONF 2016
💎

EMBERCONF 2016
Who owns the data?

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

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")}}

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 ☹

EMBERCONF 2016
…or someone else's state!

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

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

EMBERCONF 2016
ROUTABLE CONTROLLER

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

EMBERCONF 2016
ROUTABLE COMPONENT

EMBERCONF 2016
Component = Controller + View

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

EMBERCONF 2016
// shopping-cart top-level component
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}}

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

EMBERCONF 2016
ACTIONS 🎬

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

EMBERCONF 2016
New-style Actions 👍
aka Closure Actions

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

EMBERCONF 2016
Classic Actions 👎
aka String Actions

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

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

EMBERCONF 2016
Your classic action

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

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

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

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

EMBERCONF 2016
SERVICES

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

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

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

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

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

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();
})
});

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

EMBERCONF 2016
isDropdownDisplayed: false,
actions: {
hideDropdown() {
set(this, 'isDropdownDisplayed', false);
},
saveUser(user) {
return get(this, 'save')(user);
}
}
});

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

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

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

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

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

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

EMBERCONF 2016
COMPUTED VS HELPER
VS COMPONENT HOOKS

EMBERCONF 2016
COMPUTEDS

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

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

EMBERCONF 2016
myValue: customMacro('myKey', 'foo', 'bar'),
someValue: customMacro('someKey', 'baz', 'qux'),
otherValue: customMacro('otherKey', 'meow', 'woof')
});

EMBERCONF 2016
💪👔👍 Business logic
👍👍👍👍 Reusable
⚛⚛⚛⚛ React to changes
🤔 Changes can be implicit
Totally arbitrary emojis

EMBERCONF 2016
HELPERS

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

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

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

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

EMBERCONF 2016
🎨🖌 Express UI logic
✍❤📖 Composable
😶💭 Simple mental model
🏃 🏃 Can be used as action
🕵🔬🔍 No hooks available (yet)
Totally arbitrary emojis

EMBERCONF 2016
COMPONENT HOOKS

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

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

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

EMBERCONF 2016
🐘💨🙊 Dealing with side eﬀects
😭➿😱 Can cause inﬁnite loops
🔨🔨 "Just re-render it"
🚀🚀🚀 Not invoked in FastBoot environment
Totally arbitrary ratings

EMBERCONF 2016
SHOULD I USE AN
OBSERVER?

EMBERCONF 2016
https://youtu.be/vvZEddrClAQ

EMBERCONF 2016
THE FUTURE

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

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

EMBERCONF 2016
Hidden blocks rendered,
CPU time wasted
Line of SightCamera
Without occlusion culling

EMBERCONF 2016
Hidden blocks not rendered,
CPU time saved
Line of SightCamera
With occlusion culling

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

EMBERCONF 2016
TL;DR

EMBERCONF 2016
Thanks!
🐰 LAUREN TAN
SUGARPIRATE_
POTETO

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

More Related Content

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