Reusable Components in Angular: Architecture, transclusion, and more

SF Angular Meetup
OpenTable
January 12, 2015
MTV Angular Meetup
Google
January 20, 2015
Reusable Components
in Angular
Architecture, transclusion, and more

Who We Are
Rachael L Moore
UI Engineer
morewry
Kara Erickson
Web Engineer
kara

UI Components
What they are
Why to use them
How to design them

Implementations
Multi-transclude
Attribute passing
Sub-directives

FIREWORKS NIGHT CC BY GPS
Benefits of UI ComponentsBenefits of UI Components

Faster DevelopmentFaster Development

QualityQuality
TROPHIES CC BY BRAD K

Better DeploymentBetter Deployment
T-10 D PARACHUTE CC BY PROGRAM EXECUTIVE OFFICE

Consistency
Faster development
Quality
Benefits of UI Components
Better deployment
Accuracy
Better focus

Custom ElementsCustom Elements
BRIGHT YELLOW FLOWER CROCHET CC BY SINGLE STITCHES

Coherent ConfigCoherent Config

Consistency
Faster development
Quality
Better deployment
Accuracy
Better focus
Custom elements
Coherent config
Benefits of UI Components

How to Design UI ComponentsHow to Design UI Components

Natural LanguageNatural Language

VolatilityVolatility
ETNA VOLCANO PAROXYSMAL ERUPTION CC BY GNUCKX

Prior art
Natural language
Volatility
How To Design UI Components
Visual patterns
Behavioral patterns
Technical limitations

Visual PatternsVisual Patterns
SANTAS AT CITY HALL CC BY DENNIS YANG

Technical LimitationsTechnical Limitations
FACEPALM CC BY BRANDON GRASLEY

<div>
<header />
<nav />
<div />
<footer />
</div>
<directive-1>
<directive-2 />
<directive-3 />
<directive-4 />
<directive-5 />
</directive-1>
<self /> closing tags for brevity only (do not try at home)

<ot-site>
</ot-site>
site.html

<ot-site></ot-site>
HTML attributes
Transclusion
Site scaffold interface

<ot-site current-app=
"Marketing">
</ot-site>
HTML attributes
Transclusion

<ot-site current-app="
Marketing" license="
2015 Copyright
OpenTable" account-
manager="true" app-
switcher="false" site-
title="AppCtrl.title"
sidebar="See more
options" card-layout="
true" card-values="
AppCtrl.cards"></ot-
site>
HTML attributes
Transclusion

Marketing"license="
2015CopyrightOpenTable"
account-manager="true"
app-switcher="false"
site-title="AppCtrl.
title"sidebar="
Seemoreoptions"sidebar-
items="AppCtrl.
sidebarList"card-
layout="true"card-
values="AppCtrl.cards"
rid-selector="true"
dropdown-theme="dark"
sub-header="Themes"
tabs="true"tabs-items="
AppCtrl.tabs"sidebar-
content="Here is very
HTML attributes
Transclusion

<ot-site>
<div>Transcluded
content</div>
</ot-site>
HTML attributes
Transclusion

<ot-site>
</ot-site>
index.html

<ot-site>
<div>
I’m transcluding the header.
</div>
<div>
I’m transcluding the menu.
</div>
<div>
I’m transcluding the body.
</div>
</ot-site>
index.html

.directive("otSite", () => {
return {
scope: {},
template: ``
};
});
site.js

return {
scope: {},
template: `` .
};
});
site.js

"<div>" +
"<p ng-class="{'highlight': selected}">Hey</p>" +
"</div>"
`<div>
<p ng-class="{'highlight': selected}">Hey</p>
</div>`
ES6 Review - Template Strings
ES5
ES6

ES6 Review - Template Strings
var name = "Kara";
var greeting = "Hi " + name + "!"; // Hi Kara!
var name = "Kara";
var greeting = `Hi ${name}!`; // Hi Kara!
ES5
ES6

ES6 Review - Fat Arrows
var that = this;
var toggleMenu = function() {
that.menuShowing = !that.menuShowing;
};
var toggleMenu = () => {
this.menuShowing = !this.menuShowing;
};
ES5
ES6

return {
scope: {},
template: `
<div>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</div>`
};
site.js
...

return {
scope: {},
template: `
<div>
<header></header>
<nav></nav>
<main></main>
<footer></main>
</div>`
};
site.js
...

return {
scope: {},
transclude: true,
template: `
<div>
<header></header>
<nav></nav>
<main></main>
<footer></main>
</div>`
site.js
...

return {
scope: {},
transclude: true,
template: `
<div>
<header ng-transclude></header>
<nav ng-transclude></nav>
<main ng-transclude></main>
<footer></footer>
</div>`
site.js
...

$transclude((function(clone)) {
$element.empty();
$element.append(clone);
});
}
ng-transclude

return {
scope: {},
transclude: true,
template: `
<div>
<header ng-transclude></header>
<nav ng-transclude></nav>
<main ng-transclude></main>
<footer></footer>
</div>`
site.js

return {
scope: {},
transclude: true,
template: `
<div>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</div>`
site.js

<ot-site>
<div transclude-to="site-head">
I’m transcluding the header.
</div>
<div transclude-to="site-menu">
I’m transcluding the menu.
</div>
<div transclude-to="site-body">
I’m transcluding the body.
</div>
</ot-site>
index.html

return {
scope: {},
transclude: true,
template: `
<div>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</div>`
site.js
...

return {
scope: {},
transclude: true,
template: `
<div>
<header transclude-id="site-head"></header>
<nav transclude-id="site-menu"></nav>
<main transclude-id="site-body"></main>
<footer></footer>
</div>`
site.js
...

Custom transclusion
For element in clone:
1. Get target ID
2. Find target element with that ID
3. Append clone element to target

angular.forEach(clone, (cloneEl) => {
// get desired target ID
// find target element with that ID
// append element to target
});
custom-transclude.js

var tId = cloneEl.attributes["transclude-to"].value;
});

var target = templ.find(`[transclude-id="${tId}"]`);
});

var target = templ.find(`[transclude-id="${tId}"]`);
target.append(cloneEl);
});

...
});

...
if (target.length) {
}
});

...
} else {
cloneEl.remove();
}
});

...
} else {
cloneEl.remove();
throw new Error(
`Target not found. Please specify the correct
transclude-to attribute.`
);
}
...

Two parameters:
○ scope (optional)
○ callback function
□ passes clone
Transclude function
transclude (clone) =>
# DOM manipulation

var tId = ...
var target = ...
if (target.length) {...}
else {...}
});

transclude((clone) => {
var tId = ...
var target = ...
else {...}
});
});

Transclude function access points
compile: (tElem, tAttrs, transclude) =>
link: (scope, iElem, iAttrs, ctrl, transclude) =>
controller: ($scope, $element, $transclude) =>

site.js.directive("otSite", () => {
return {
scope: {},
transclude: true,
template: `
<div>
<header transclude-id="site-head"></header>
<nav transclude-id="site-menu"></nav>
<main transclude-id="site-body"></main>
<footer></footer>
</div>`
...

...
});

...
compile: (tElem, tAttrs, transclude) => {
}
});

...
var tId = ...
var target = ...
else {...}
});
});
...

site.js.directive("otSite", ($rootScope) => {
...
transclude($rootScope.$new(), (clone) => {
var tId = ...
var target = ...
else {...}
});
});
...

transclusion scope using $rootScope.$new()

...
return (scope, iElem, iAttrs) => {
var tId = ...
var target = ...
else {...}
});
...

...
return (scope, iElem, iAttrs) => {
transclude(scope.$parent.$new(), (clone) => {
var tId = ...
var target = ...
else {...}
});
...

Transclude function availability
compile: (tElem, tAttrs, transclude) =>
link: (scope, iElem, iAttrs, ctrl, transclude) =>
controller: ($scope, $element, $transclude) =>

...
(scope, iElem, iAttrs) => {
var tId = ...
var target = ...
else {...}
});
});
...

...
link: (scope, iElem, iAttrs, ctrl, transclude) => {
var tId = ...
var target = ...
else {...}
});
});
...

...
var tId = ...
var target = ...
else {...}
});
});
...

Directive Life Cycle
Parent compile 1
2 Child compile
Parent controller 3
Parent pre-link 4
5 Child controller
6 Child pre-link
7 Child post-link
Parent post-link 8

Transclude function in ...
link / controller....
○ Auto-generates scope
○ No wrapper
○ Link: safest for DOM
manipulation
compile...
○ Scope issues
○ Wrapper code
○ Deprecated

.factory("MultiTransclude", () => {
return {
};
});
multi-transclude.js

.factory("MultiTransclude", () => {
return {
transclude: (elem, transcludeFn) => {
}
};
});
multi-transclude.js

multi-transclude.js.factory("MultiTransclude", () => {
return {
transclude: (elem, transcludeFn) => {
transcludeFn((clone) => {
var tId = ...
var target = ...
else {...}
});
});
...

...
}
};
});

site.js.directive("otSite", (MultiTransclude) => {
...
}
};
});

site.js.directive("otSite", (MultiTransclude) => {
...
MultiTransclude.transclude(iElem, transclude);
}
};
});
Code Demo

Multi-transclusion model
Pros Cons
Flexible UI Open system
All in one directive Requires custom DOM manipulation
Extensible Less “HTML-like”
Re-usable for any component

Behavioral PatternsBehavioral Patterns

<ot-list
items="" />
list.html

<ot-list
items=""
selected="" />
list.html

<ot-list
items=""
selected=""
on-select="" />
list.html

<ot-list
items=""
selected=""
on-select=""
theme="" />
list.html

Selectable List
Implementation

.controller("AppController", ($scope) => {
$scope.areas = {
list: [
"Floorplan",
"Combinations",
"Schedule",
"Publish"
],
current: "Floorplan"
};
});
app.js

<ot-site>
<ot-list></ot-list>
</ot-site>
index.html

<ot-site>
<ot-list
items="{{ areas.list }}"
selected="{{ areas.current }}"></ot-list>
</ot-site>
index.html

<ot-site>
<ot-list
selected="{{ areas.current }}"
transclude-to="site-body"></ot-list>
</ot-site>
index.html

.directive("otList", () => {
return {
template: ``
};
});
list.js

list.js.directive("otList", () => {
return {
template: `
<ul>
<li ng-repeat="item in items"
ng-bind="item"
ng-class="{'ot-selected': item === selected}"
ng-click="selectItem(item)">
</li>
</ul>`
};
...

return {
template: ...
};
});

return {
template: ...,
link: (scope, elem, attrs) => {
}
};
});

return {
template: ...,
scope.selectItem = (item) => {
scope.selected = item;
};
}
};
...

return {
template: ...,
scope.items = JSON.parse(attrs.items);
};
}
};
...

return {
template: ...,
scope.selected = attrs.selected;
};
}
...

Shared scope is the
default behavior
Need to set the scope
property
No scope set...
When asked if shared scope was a good idea...

app.js.controller("AppController", ($scope) => {
$scope.areas = {
list: [
"Floorplan",
"Combinations",
"Schedule",
"Publish"
],
current: "Floorplan"
};
});

$scope.areas = {...};
});

$scope.areas = {...};
$scope.apps = {
list: [
"Marketing",
"Planning",
"Reservations",
"Settings"
],
current: "Marketing"
};
...

<ot-site>
<ot-list
selected="{{ areas.current }}"
<ot-list
items="{{ apps.list }}"
selected="{{ apps.current }}"
</ot-site>
index.html

return {
template: ...,
scope: true,
};
...

List component, scope: true (leak)

return {
template: ...,
scope: {},
};
...

return {
template: ...,
scope: {},
};
}
};
});

return {
template: ...,
scope: {
items: "=items",
selected: "=selected"
},
};
...

return {
template: ...,
scope: {
items: "=",
selected: "="
},
};
...

<ot-site>
<ot-list
items="areas.list"
selected="areas.current"
<ot-list
items="apps.list"
selected="apps.current"
</ot-site>
index.html

<ot-site>
<ot-list
items="areas.list"
transclude-to="site-menu"></ot-list>
<ot-list
items="apps.list"
</ot-site>
index.html

Attribute passing model
Pros Cons
Simple interface Not very extensible
Closed system Less flexibility for users

<ot-dropdown>
<ot-trigger />
<ot-target />
</ot-dropdown>
dropdown.html

<ot-site>
<ot-list items="areas.list"
transclude-to="site-menu"></ot-list>
<ot-list items="apps.list"
</ot-site>
index.html

<ot-site>
...
</ot-site>
index.html

<ot-site>
...
<ot-dropdown>
</ot-dropdown>
</ot-site>
index.html

<ot-site>
...
<ot-dropdown>
selected="apps.current"></ot-list>
</ot-dropdown>
</ot-site>
index.html

<ot-site>
...
<ot-dropdown transclude-to="site-head">
</ot-dropdown>
</ot-site>
index.html

<ot-site>
...
<ot-dropdown>
<span ng-bind="apps.current"></span>
</ot-dropdown>
</ot-site>
index.html

<ot-site>
...
<ot-dropdown>
<span ng-bind="apps.current"
transclude-to="trigger"></span>
transclude-to="target"></ot-list>
</ot-dropdown>
</ot-site>
index.html

<ot-site>
...
<ot-dropdown>
<ot-trigger>
<span ng-bind="apps.current"></span>
</ot-trigger>
<ot-target>
</ot-target>
</ot-dropdown>
index.html
...

<ot-site>
...
<ot-dropdown>
<ot-trigger>
<span ng-bind="apps.current" />
</ot-trigger>
<ot-target>
<ot-list items="apps.list" ... />
</ot-target>
</ot-dropdown>
</ot-site>
index.html

Multi-transclude vs sub-directives
○ “HTML-like”
○ Built with separate parts
□ Maintain style of parts separately
□ Split options up into separate tags

dropdown.js.directive("otDropdown", () => {
return {
};
});

return {
scope: {}
};
});

return {
scope: {},
transclude: true
};
});

dropdown transclusion
index.html
trigger transclusion
target transclusion
<ot-site>
...
<ot-dropdown>
<ot-trigger>
<span ng-bind="apps.current" />
</ot-trigger>
<ot-target>
<ot-list items="apps.list" ... />
</ot-target>
</ot-dropdown>
</ot-site>

return {
scope: {},
transclude: true,
template: `
<div>
</div>`
};
});

return {
scope: {},
transclude: true,
template: `
<div ng-transclude>
</div>`
};
});

return {
scope: {},
transclude: true,
template: `
<div ng-transclude ng-click="toggleTarget()">
</div>`
};
});

return {
scope: {},
transclude: true,
template: `
<div ng-click="toggleTarget()" ng-transclude>
</div>`,
link: (scope) => {
scope.toggleTarget = () => {
scope.targetOpen = !scope.targetOpen;
};
...

.directive("otTarget",()=>{
return {
};
});
dropdown.js
.directive("otTrigger",()=>{
return {
};
});

return {
transclude: true
};
});
dropdown.js
return {
transclude: true
};
});

return {
transclude: true,
template: `
<div>
</div>`
};
});
dropdown.js
return {
transclude: true,
template: `
<div>
</div>`
};
});

return {
transclude: true,
template: `
<div ng-transclude>
</div>`
};
});
dropdown.js
return {
transclude: true,
template: `
<div ng-transclude>
</div>`
};
});

.directive("otTarget", () => {
return {
transclude: true,
template: `
<div ng-transclude>
</div>`
};
});
dropdown.js

.directive("otTarget", () => {
return {
transclude: true,
template: `
<div ng-show="targetOpen" ng-transclude>
</div>`
};
});
dropdown.js

Dropdown - trigger/target share scope

Directive to directive communication
○ Controller as directive API
○ “Require” controller from other directives
□ link: (scope, elem, attrs, controller) =>
□ Caveat: must be on element or parents

○ Controller as directive API
○ “Require” controller from other directives
□ link: (scope, elem, attrs, controller) =>
□ Caveat: must be on element or parents
Directive to directive communication

...
template: `
</div>`,
link: (scope) => {
};
}
});

...
template: `
</div>`,
controller: function ($scope) {
};
}
});

...
template: `
</div>`,
$scope.toggleTarget = () => {
};
}
});

...
template: `
</div>`,
$scope.toggleTarget = () => {
this.targetOpen = !this.targetOpen;
};
}
});

dropdown.js.directive("otTarget", () => {
return {
transclude: true,
require: "^otDropdown",
template: `
</div>`
};
});

return {
transclude: true,
template: `
</div>`,
link: (scope, elem, attrs, ctrl) => {
}
};
...

return {
transclude: true,
template: `
</div>`,
scope.ctrl = ctrl;
}
};
...

return {
transclude: true,
template: `
<div ng-show="ctrl.targetOpen" ng-transclude>
</div>`,
scope.ctrl = ctrl;
}
};
...

return {
transclude: true,
template: `
<div ng-transclude>
</div>`
};
});
return {
transclude: true,
template: `
<div
ng-show="ctrl.targetOpen"
ng-transclude>
</div>`,
link: ...
dropdown.js

return {
transclude: true,
scope: {},
template: `
<div ng-transclude>
</div>`
};
});
return {
transclude: true,
scope: {},
template: `
<div
ng-show="ctrl.targetOpen"
ng-transclude>
</div>`, ...
dropdown.js

Sub-directive model
Pros Cons
Flexible UI Open system
HTML-ish More boilerplate
Can modularize parts of the component Not extensible for new entry points

Application Scaffold
Conclusion

<ot-site>
<ot-trigger />
<ot-target>
<ot-list items="apps" />
</ot-target>
</ot-dropdown>
<ot-trigger />
<ot-target>
...
index.html

...
<div class="profile" />
<a href="/logoff" />
</ot-target>
</ot-dropdown>
<ot-list transclude-to="site-menu" items="areas" />
<div transclude-to="site-body">

</div>
</ot-site>
index.html

<ot-app>

</ot-app>
index.html

Barry Wong
Simon Attley
Caleb Morrell
Sara Rahimian
David Amusin
ALL OTHER PHOTOS CC0 / SPECIAL THANKS TO RYAN MCGUIRE

We’re hiring!
opentable.com/careers/
We’re hiring!
opentable.com/careers/

Questions?
Rachael L Moore
UI Engineer
morewry
Kara Erickson
Web Engineer
kara

Reusable Components in Angular: Architecture, transclusion, and more

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Reusable Components in Angular: Architecture, transclusion, and more