Compose all the things (Wicked Good Ember 2015)

Compose all the things
Mike North
Wicked Good Ember 2015

@MichaelLNorth
modernwebui.org
Modern Web UI
advertising.yahoo.com
Yahoo Ads & Data
Hi
ember-resize
ember-orientation
ember-cpm
ember-cli-materialize
…and more

@MichaelLNorth
Composability
(Mike working w/ a composable system)

//TODO
• The state of ember at yahoo
• What’s composability, and why do we care?
• 4 areas where you can compose today
• Style
• CPMs
• Components
• Tests

@MichaelLNorth
Yahoo Ads & Data
• 14 Ember Apps
• 68 Ember-focused developers
• A “flagship” app that ’s huge (70K lines JS)
• An internal collection of add ons
Ember @ Yahoo

@MichaelLNorth
Composability
• Recombinant self-
contained pieces
• Built around
established contracts
and conventions
• Promotes reuse
What do I mean?

@MichaelLNorth
Why composability?
• Leverage existing code repeatedly
• Build apps in a more expressive way (DSLs)
• Opportunities for unforeseen uses!

@MichaelLNorth
Great places to start
Style
Tests
Computed Properties
Components

@MichaelLNorth
Great places to startStyle
Declarative CSS
A
<div id=“myThing”>
...
</div>
#myThing {
float: left;
color: white;
}
B
<div class=“pull-left white-text">
...
</div>
.pull-left {
float: left;
}
.white-text {
color: white;
}

@MichaelLNorth
• Atomic CSS classes
• Expressive HTML
• Promotes consistency
Declarative CSS
<div class=“pull-left white-text">
...
</div>
.pull-left {
float: left;
}
.white-text {
color: white;
}

@MichaelLNorth
• You may have classes and/or attributes for
• Testing
• Style
• Behavior
Keep attributes & classes organized
<input class="first-name large-input”
data-autoid="first-name" />
.large-input {
font-size: 32px;
}
style
fillIn(‘input[data-autoid="first-name"]',
'Mike');
testing

@MichaelLNorth
Great places to startComputed Properties
How does a computed property work?
GET
Has cached
value?
Recalculate
No
Yes
X
Allows
caching?
Cache
X
XYes
No
ReturnX

@MichaelLNorth
How does a computed property work?
DEPENDENT CHANGED
Cache
X
I’ve
changed!
ViewProperty
obj.get(‘val’)

@MichaelLNorth
CPs can be thought of as ﬁlters
CP
r
g
b
#ff1a99
get() set()
(sometimes)
CP
r
b
g
#ff1a99

@MichaelLNorth
• Ember.computed.*
Macros make this even easier
function product(prop, coeff) {
return Ember.computed(prop, {
get() {
return this.get(prop) * coeff;
}
});
}

@MichaelLNorth
totalAmount: sum(
'subtotal',
'tipAmount',
'taxAmount',
product('discount', -1)
),
Composable CPs can be mixed and
matched
ember-cpm

@MichaelLNorth
Example

@MichaelLNorth
Great places to startComponents
• Not source of truth for state ✔
• Promotes Reuse ✔
• Recombinant ?
Components are pretty close…
ember-cli-materialize

@MichaelLNorth
Looking for this
<div class="card blue-grey darken-1">
<div class="card-content white-text">
<div class="card-title">
Wicked Good Ember
</div>
This will go in the body of the card
</div>
<div class="card-action">
<a>
<span {{action “accept”}}>Accept</span>
</a>
<a>
<span {{action “cancel”}}>Cancel</span>
</a>
</div>
</div>

@MichaelLNorth
One option - lowest common element
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
{{#wge-card}}
Wicked Good Ember
</div>
</div>
{{#wge-card-action}}
<span {{action "accept"}}>
Accept
</span>
{{/wge-card-action}}
<span {{action "cancel"}}>
Cancel
</span>
</div>
{{/wge-card}}

@MichaelLNorth
One option - lowest common element
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
{{#wge-card}}
Wicked Good Ember
</div>
</div>
<span {{action "accept"}}>
Accept
</span>
<span {{action "cancel"}}>
Cancel
</span>
</div>
{{/wge-card}}
Not Useful

@MichaelLNorth
Another option - parent does everything
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
{{#wge-card
title="Wicked Good Ember"
cardActions=myCardActions}}
This will go in the body
of the card
{{/wge-card}}

@MichaelLNorth
Another option - parent does everything
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
{{#wge-card
title="Wicked Good Ember"
cardActions=myCardActions}}
This will go in the body
of the card
{{/wge-card}}
Not Composable

@MichaelLNorth
The expressive option
{{#wge-card title="Wicked Good Ember"}}
<span {{action "accept"}}>Accept</span>
<span {{action "cancel"}}>Cancel</span>
{{/wge-card}}

@MichaelLNorth
{{#wge-card
title="Wicked Good Ember"}}
This will go in the
body of the card
<span {{action “accept"}}>
Accept
</span>
<span {{action “cancel”}}>
Cancel
</span>
{{/wge-card}}
Components
Content projection - ruh roh
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
4 distinct pieces of content

@MichaelLNorth
{{#wge-card
This will go in the
body of the card
Accept
</span>
Cancel
</span>
{{/wge-card}}
Components
Content projection - ruh roh
Wicked Good Ember
</div>
</div>
<a>
</a>
<a>
</a>
</div>
</div>
4 distinct pieces of content
Sub-components
project into parent
{{yield}}
Simple property binding

@MichaelLNorth
Content projection approach
{{#wge-card
This will go in the
body of the card
Accept
</span>
Cancel
</span>
{{/wge-card}}
• Child components won’t
render directly
• Parent will handle
rendering of children
• Register/unregister to
parent

@MichaelLNorth
Child
export default Ember.Component.extend({
didInsertElement() {
this.nearestWithProperty('_wgeCard')
.registerWgeAction(this);
},
willDestroyElement() {
this.nearestWithProperty('_wgeCard')
.unregisterWgeAction(this);
},
render() {} // Don't render
});
const { computed: {alias, empty} } = Ember;
classNames: ['card'],
_wgeCard: true,
_cardActions: [],
// Needed to ensure context of
// child component templates
// is the controller
parentController: alias('targetObject'),
registerWgeAction(component) {
this.get('_cardActions')
.addObject(component);
},
unregisterWgeAction(component) {
.removeObject(component);
}
});
Parent
Components

@MichaelLNorth
import Ember from 'ember';
const { computed: {alias, empty} } = Ember;
classNames: ['card'],
_wgeCard: true,
_cardActions: [],
// Needed to ensure context of
// child component templates
// is the controller
parentController: alias('targetObject'),
registerWgeAction(component) {
.addObject(component);
},
unregisterWgeAction(component) {
.removeObject(component);
}
});
Parent
<div class="card-title">{{title}}</div>
{{yield}}
</div>
{{#if _cardActions.length}}
{{#each _cardActions as |cardAction|}}
{{view Ember.View
tagName='a'
template=cardAction.template
controller=parentController}}
{{/each}}
</div>
{{/if}}
Components
Parent.hbs

@MichaelLNorth
<div class="card-title">{{title}}</div>
{{yield}}
</div>
{{#if _cardActions.length}}
{{#each _cardActions as |cardAction|}}
{{view Ember.View
tagName='a'
template=cardAction.template
controller=parentController}}
{{/each}}
</div>
{{/if}}
“Captured”
template
Needed for
actions &
bindings

@MichaelLNorth
Great places to startTests
A lot of tests are verbose and ugly
• Sensitivity to order and/or timing
• Brittle selectors to interact with the DOM
• 1 change —> break N tests

@MichaelLNorth
test(“authorized user should end up at account's search list page”, function(assert) {
server.get(`${apiHost.url}/me`, json(200, me));
server.get(`${apiHost.url}/campaigns/:id`, json(200, campaign1));
server.get(`${apiHost.url}/seats/2`, json(200, seat2));
server.get(`${apiHost.url}/seats/1`, json(200, seat1));
server.get(`${apiHost.url}/account/:id`, json(200, account1));
server.get(`${apiHost.url}/breadcrumbs`, json(200, breadcrumbs.campaign));
visit('/app/account/1/campaigns');
andThen(function() {
assert.equal(currentPath(), ‘app.account.campaign', 'Current url is search list page for campaig
assert.equal(Ember.$('.top-navbar .brand-logo .active-title').text().trim(), campaign1.campaign
assert.equal(Ember.$('.resource-tiles-container .card').length, campaigns.campaigns.length, 'On
assert.deepEqual(Ember.$('.resource-tiles-container .resource-tile:first-child .card .card-cont
['Created', 'Updated'], 'Columns are correct');
assert.equal(Ember.$('.new-campaign-button').length, 1, 'New Campaign button is on the screen')
});
});
A lot of tests are verbose and ugly

@MichaelLNorth
A wild PageObject appears
• Prime pretender
• Access to controls
• Speciﬁc asserts
fillInclick
currentURL
andThenvisit
triggerEvent
$().val()$
$().click()$().trigger()
setFirstName
clickResetButton setAge
openSettings
PageObject API
Ember Testing API
DOMSee:

@MichaelLNorth
Writing PageObjects
• Return this
• To assert or not to assert?
• Build PageObjects for components
Example
The recombinant
part!

@MichaelLNorth
Great places to startSome ﬁnal thoughts
Even more composability on the way!
• Add-ons
• Ember.Service
• Engines (TBD)
• Components ( {{yield}}, block params,
etc…)

@MichaelLNorth
Conclusion
Style
Tests
Computed Properties
Components
truenorth/wge-examples

Compose all the things (Wicked Good Ember 2015)

More Related Content

Similar to Compose all the things (Wicked Good Ember 2015)

More from Mike North

Recently uploaded

Compose all the things (Wicked Good Ember 2015)