Creating GUI container components in Angular and Web Components

Creating container
components
in Web Components and Angular
ng-conf: March 5, 2015
Kara Erickson
Web Engineer
kara
karaforthewin
Rachael L Moore
UI Engineer
morewry
morewry

Roadmap
Web Components
Angular 1.3
Angular 2.0

I render in body.

Server Side Includes

{{> head}}
{{> menu}}
I render in body.
{{> foot}}
mustache

UI Components
<ot-site>
I render in body.
</ot-site>

Native Elements
<input type="range" />
<input type="range" min="1"
max="8" />

<div id="site">
</div>
Component Development

<div id="site">
<header></header>
</div>
Head

<div id="site">
<header></header>
<nav></nav>>
</div>
Menu

<div id="site">
<header></header>
<nav></nav>
<main></main>
</div>
Body

<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>
© 2015 OpenTable, Inc.
</footer>
</div>

Component Use
<ot-site>
</ot-site>

Component Use
<ot-site>
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
</ot-site>
I render in head.
I render in menu.
I render in body.

Component Use
<ot-site>
<div>

I render in head.
</div>
<div>

I render in menu.
</div>
<div>

I render in body.
</div>
</ot-site>
I render in head.
I render in menu.
I render in body.

<div id="site">
<header>

</header>
<nav>

</nav>
<main>

</main>
<footer>
</footer>
</div>
<ot-site>
<div>

I render in head.
</div>
<div>

I render in menu.
</div>
<div>

I render in body.
</div>
</ot-site>
Match Content → ← Match Component

Web Components
Shadow DOM
<ot-site>

Native Elements

Light DOM

#shadow-root (user-agent)
<div pseudo="track" id="track">
<div pseudo="thumb" id="thumb">
</div>
</div>
UA Shadow DOM

...had flourished.
<span id="myspan">
Long ago there was something in me, but now that thing is
gone.
</span>
I cannot...
Shadow Host

var $ = document.querySelector.bind(document)
var span = $("#myspan")
span.createShadowRoot()
Shadow Root

...had flourished.
<span id="myspan">
#shadow-root
Long ago there was something in me, but now that thing is
gone.
</span>
I cannot...
Shadow Root

Before
...had flourished. Long
ago there was something
in me, but now that thing
is gone. I cannot...
After
...had flourished. I
cannot...

var host = $("ot-site")
host.createShadowRoot()
host.shadowRoot.innerHTML = ``
ot-site.js

host.shadowRoot.innerHTML = .``.
ot-site.js

host.shadowRoot.innerHTML = `
<div id="site">
<header>

</header>
<nav>

</nav>
<main>

</main>
<footer>
</footer>
</div>
`
ot-site.js

host.shadowRoot.innerHTML += `
<style>
/* use your imagination */
</style>
`
ot-site.js

<ot-site>
#shadow-root
<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>©</footer>
</div>
<style>/**/</style>
</ot-site>
Composed DOM

<div id="site">
<header>
<content />
</header>
<nav>
<content />
</nav>
<main>
<content />
</main>
<footer>
</footer>
</div>
`
ot-site.js

<div id="site">
<header>
<content select="" />
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
`
ot-site.js

<div id="site">
<header>
<content select="[head]" />
</header>
<nav>
<content select="[menu]" />
</nav>
<main>
<content select="[body]" />
</main>
<footer>
</footer>
</div>
`
ot-site.js

<ot-site>
<div>

I render in head.
</div>
<div>

I render in menu.
</div>
<div>

I render in body.
</div>
</ot-site>
index.html

<ot-site>
<div head>
I render in head.
</div>
<div menu>
I render in menu.
</div>
<div body>
I render in body.
</div>
</ot-site>
index.html

Match Content →
<div id="site">
<header>
<content select="[head]"/>
</header>
<nav>
<content select="[menu]"/>
</nav>
<main>
<content select="[body]"/>
</main>
<footer>
</footer>
</div>
<ot-site>
<div head>
I render in head.
</div>
<div menu>
I render in menu.
</div>
<div body>
I render in body.
</div>
</ot-site>
← Match Component

Light DOMShadow DOM
<div id="site">
  <header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
<ot-site>
<div head>
I render in head.
</div>
<div menu>
I render in menu.
</div>
<div body>
I render in body.
</div>
</ot-site>

<div id="site">
<header>
</header>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
</div>
Light DOMShadow DOM
<ot-site>
<div head>
I render in head.
</div>
<div menu>
I render in menu.
</div>
<div body>
I render in body.
</div>
</ot-site>

I render in head.
I render in menu.
I render in body.

Angular 1.3
Transcluding Directive
<ot-site>

.directive("otSite", function() {
return {
template: ``
};
});
ot-site.js

return {
template: `
<div id="site">
<header> 
</header>
<nav></nav> 
<main></main> 
<footer>
</footer>
</div>`
};
});
ot-site.js

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

<ot-site>
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
</ot-site>
index.html

ot-site.js
return {
template: `
<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>
</footer>
</div>`
};
});

ot-site.js
return {
transclude: true,
template: `
<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>
</footer>
</div>`
};
});

<ot-site>
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
</ot-site>
DOM

DOM
<ot-site>
<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>©</footer>
</div>
</ot-site>

<ot-site>
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
</ot-site>
Clone DOM

Clone DOM
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
<ot-site>
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
</ot-site>

<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
<ot-site>
</ot-site>
Clone DOM

<ot-site>
<div id="site">
<header>
</header>
<nav></nav>
<main></main>
<footer>©</footer>
</div>
</ot-site>
Clone
<div>
I render in head.
</div>
<div>
I render in menu.
</div>
<div>
I render in body.
</div>
DOM

ot-site.js
return {
transclude: true,
template: `
<div id="site">
<header ng-transclude>
</header>
<nav ng-transclude></nav>
<main ng-transclude></main>
<footer>
</footer>
</div>`
};
});

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

<ot-site>
<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
</ot-site>
index.html

<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
<ot-site>
<div id="site">
</header>
<footer>©</footer>
</div>
</ot-site>
DOMClone

<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
<ot-site>
<div id="site">
</header>
<footer>©</footer>
</div>
</ot-site>
DOMClone
angular.forEach(clone, function(cloneEl) {});

<ot-site>
<div id="site">
</header>
<footer>©</footer>
</div>
</ot-site>
DOMClone
var tId = cloneEl.attributes["t-to"].value;
<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>

DOMClone
var target = temp.find('[t-id="'+tId+'"]');
<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
<ot-site>
<div id="site">
</header>
<footer>©</footer>
</div>
</ot-site>

<ot-site>
<div id="site">
</header>
<footer>©</footer>
</div>
</ot-site>
<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
DOMClone
target.append(clone);

<div t-to="head">
I render in head.
</div>
<div t-to="menu">
I render in menu.
</div>
<div t-to="body">
I render in body.
</div>
DOMClone
<ot-site>
<div id="site">
<div t-to="head">
I render in head.
</div>
</header>
<footer>©</footer>
</div>
</ot-site>
</ot-site>target.append(clone);

angular.forEach(clone, function(cloneEl) {
// get desired target ID
var tId = cloneEl.attributes["t-to"].value;
// find target element with that ID
var target = temp.find('[t-id="'+tId+'"]');
// append element to target
target.append(cloneEl);
});
custom-transclude.js

Transclude function
transclude(function(clone) {
# DOM manipulation
});

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

Transclude function access points

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

Transclude function availability

ot-site.js
return {
transclude: true,
template: ...,
link: function(scope, elem, attr, ctrl, transclude) {
}
};
});

ot-site.js
return {
transclude: true,
template: ...,
var tId = ...
var target = ...
if (target.length) {...}
else {...}
});
});
}
};
});

ot-site.js
return {
scope: {},
transclude: true,
template: ...,
var tId = ...
var target = ...
if (target.length) {...}
else {...}
});
});
}
};
});

transcluding directive with isolate scope

Angular 2.0
Component Directive
<ot-site>

Angular 1.3
Transclusion
Angular 2.0

Shadow DOM
Angular 2.0Angular 1.3
Transclusion

<div id="site">
<header>
</header>
<nav></nav>
<main></main>
</div>
ot-site template

<div id="site">
<header>
<content select="[head]"></content>
</header>
<nav>
<content select="[menu]"></content>
</nav>
<main>
<content select="[body]"></content>
</main>
</div>
ot-site template

Shadow DOM
Transclusion
Manual scope

Transclusion
Manual scope
Shadow DOM
Sensible default context

ot-site.js
return {
template: ...
};
});

.directive(."otSite"., function() {
return {
template: ...
};
});
ot-site.js

ot-site.js
.directive(."otSite"., function() {
return {
.template: ....
};
});

Shadow DOM
Transclusion
Manual scope
One DDO

Shadow DOM
Class & annotation
Transclusion
Manual scope
One DDO

class OtSite() {
constructor () {
}
// public methods here
}
ot-site.js

ot-site.js
class OtSite() {
constructor () {
}
}
OtSite.annotations = [
];

ot-site.js
class OtSite() {
constructor () {
}
}
new Component({
})
];

ot-site.js
class OtSite() {
constructor () {
}
}
new Component({
selector: "ot-site"
})
];

ot-site.js
class OtSite() {
constructor () {
}
}
new Component({
selector: "ot-site"
}),
new Template({
url: "ot-site.html"
})
];

ot-site.js
class OtSite() {
constructor () {
}
}
@Component({
selector: "ot-site"
})
@Template({
url: "ot-site.html"
})

class OtSite() {
constructor () {
}
}
@Component({
selector: "ot-site"
})
@Template({
url: "ot-site.html"
})
ot-site.js

@Component({
selector: "ot-site"
})
@Template({
url: "ot-site.html"
})
class OtSite() {
constructor () {
}
}
ot-site.js

ot-site.js
@Component({
selector: "ot-site"
})
@Template({
url: "ot-site.html"
})
class OtSite() {
constructor () {
}
}

<ot-site>
<div head>
I render in head.
</div>
<div menu>
I render in menu.
</div>
<div body>
I render in body.
</div>
</ot-site>

Thanks, everyone!
Kara Erickson
Web Engineer
kara
karaforthewin
Rachael L Moore
UI Engineer
morewry
morewry

We’re hiring!
Visit our careers page at
opentable.com/careers/
We’re hiring!
Visit our careers page at
opentable.com/careers/

Creating GUI container components in Angular and Web Components

More Related Content

What's hot (20)

Viewers also liked (7)

Recently uploaded (20)

Creating GUI container components in Angular and Web Components