Creating GUI Component APIs in Angular and Web Components

Rachael L Moore
Sr UI Engineer
OpenTable
morewry
Creating GUI
Component APIs
in Angular and Web Components
(speaker notes included)
Kara Erickson
Software Engineer
OpenTable
kara | karaforthewin
Angular Connect
20 & 21 October 2015
ExCel London
London, UK

Custom Elements
Angular 1 Directives
Angular 2 Components

Periodic Table of HTML Elements
style script
cite
samp sup
ruby bdo
code
pre li dd textarea button progress h6 details tfoot
device video audio track canvas iframe source param object embed map area img
link noscript
q
var
sub
markkbd wbr figure ul dt input output keygen h5 article summary thead
base
rp
abbr
time
b
strong
del
br
figcaption ol dl label option datalist h4 nav command tbody
title
a
meter select aside h2 section caption td
meta
rt
dfn
emi
small ins hr
p div blockquote legend optgroup address h3 header menu th
head
span
fieldset form body h1 colgroup tr
html col table
footer

Periodic Table of HTML Elements
style script
cite
samp sup
ruby bdo
code
pre li dd textarea button progress h6 details tfoot
device video audio track canvas iframe source param object embed map area img
link noscript
q
var
sub
markkbd wbr figure ul dt input output keygen h5 article summary thead
base
rp
abbr
time
b
strong
del
br
figcaption ol dl label option datalist h4 nav command tbody
title
a
meter select aside h2 section caption td
meta
rt
dfn
emi
small ins hr
p div blockquote legend optgroup address h3 header menu th
head
span
fieldset form body h1 colgroup tr
html col table
footer
canvas

<select>
<option>Opt 1</option>
</select>
Standard Elements

Standard Elements - DOM Interfaces
var select = $("select")[0];<select>
</select>

var select = $("select")[0];
select.options
select.options.length
// 1
<select>
</select>

<select>
</select>
var select = $("select")[0];
select.add(
new Option("Opt 2")
);

<*>
<ng-transclude>
<select>
<option>...
<custom-element>
// HTMLElement
// HTMLUnknownElement
// HTMLSelectElement
// HTMLOptionElement
// WHATEVER I WANT!
Elements - DOM Interfaces Elements - DOM Interfaces

Creating GUI Component APIs in Angular and Web Components

Requirements- confirm modal.confirm()
Request Confirmation - Pseudocode
Request Confirmation

Requirements- modal modal.confirm()
<modal />
Confirmation Modal - Pseudocode
Confirmation Modal

Requirements- open modal.confirm()
<modal />
modal.open()
Modal Opens - Pseudocode
Confirmation Modal
Modal Opens

Requirements- content modal.confirm()
<modal>

</modal>
modal.open()
Custom Modal Content - Pseudocode
Confirmation Modal
Modal Opens
Custom Modal Content

Requirements- multiple 2 modal.confirm()
<modal>

</modal>
modal.open()
Multiple Modals - Pseudocode
Confirmation Modal
Modal Opens
Multiple Modals

Requirements- close modal.confirm()
<modal>

</modal>
modal.open()
modal.close()
Modal Closes - Pseudocode
Confirmation Modal
Modal Opens
Multiple Modals
Modal Closes

Requirements- proceed modal.confirm()
<modal>

</modal>
modal.open()
modal.close()
modal.proceed()
Proceed Afterwards - Pseudocode
Confirmation Modal
Modal Opens
Multiple Modals
Modal Closes
Proceed Afterwards

Requirements- callback modal.confirm(callback)
<modal>

</modal>
modal.open()
modal.close()
modal.proceed()
Proceed Afterwards - Pseudocode
Confirmation Modal
Modal Opens
Multiple Modals
Modal Closes
Proceed Afterwards

Custom Elements
brought to you by Web Components
Custom Elements
brought to you by Web Components

document.registerElement("ot-confirm-modal", {
prototype: {}
});
registerElement - OTConfirmModal.js

class OTConfirmModalElement {
};
prototype: OTConfirmModalElement.prototype
});
class OTConfirmModalElement - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement {
};
prototype: OTConfirmModalElement.prototype
});
extends HTMLElement - OTConfirmModal.js

...
};
OTConfirmModal.js

Confirmation Modal Template -
<div id="modal">
<div id="overlay"></div>
<section id="dialog">
<svg id="x"></svg>
<button id="cancel">
Cancel
</button>
<button id="confirm">
Confirm
</button>
</section>
</div>
Confirmation Modal Template -

<div id="modal">
<div id="overlay"></div>
<section id="dialog">
<svg id="x"></svg>
<button id="cancel">
Cancel
</button>
<button id="confirm">
Confirm
</button>
</section>
</div>
Confirmation Modal Template -Confirmation Modal Template -

...
createdCallback () {}
};
createdCallback - OTConfirmModal.js

...
createdCallback () {
// see Content Container talk from ng-conf
}
};
ng-conf - OTConfirmModal.js

...
open () {}
close () {}
};
open & close methods - OTConfirmModal.js

...
open () {
this.hidden = false;
}
close () {
this.hidden = true;
}
};
hidden property - OTConfirmModal.js

<ot-confirm-modal hidden>
...
</ot-confirm-modal>
OTConfirmModal.js - hidden attribute
...extends HTMLElement {
...
open () {
this.hidden = false;
}
close () {
this.hidden = true;
}
};
OTConfirmModal.js - hidden attribute

...
confirm (callback) {
this.onProceed = callback;
this.open();
}
};
confirm - OTConfirmModal.js

...
proceed () {
this.close();
this.onProceed();
}
};
proceed - OTConfirmModal.js

createdCallback
open
close
confirm (callback)
proceed
};
Angular-Connect-2015 Pseudocode Summary - OTConfirmModal.js

<ot-confirm-modal id="block">
Blocking will prevent diners from making
reservations online.
</ot-confirm-modal>
Tag - Integration with Application - index.html

...
var blockModal = $("#block")[0];
// blockModal.confirm()
Query DOM - Integration with Application - index.html

...
<button onclick="blockReservations()">
Block Reservations
</button>
Existing Button - Integration with Application - index.html

...
<button onclick="blockModal.confirm(blockReservations)">
Block Reservations
</button>
Confirm Method - Integration with Application - index.html

Summary - Integration with Application - index.html
<ot-confirm-modal id="block">
Blocking will prevent diners from making
reservations online.
</ot-confirm-modal>
$("#block")[0].confirm(blockReservations);

Declarative custom tag <ot-confirm-modal id="id">
Are you sure?
</ot-confirm-modal>
Custom Elements
Custom elements

Declarative custom tag
Imperative access to API
<ot-confirm-modal id="id">
Are you sure?
</ot-confirm-modal>
$("#id")[0].confirm(cb);
Custom Elements
Custom elements

Angular 1Custom elements
Are you sure?
</ot-confirm-modal>
// Declarative custom tag
// Flexible imperative API
Are you sure?
</ot-confirm-modal>
// ?

Angular 1 Directive Communication
?
?
?

Events
?
?

Event Strategy
ModalButton
click

Event Strategy
"confirm-me", block
ModalButton

Event Strategy
ModalButton
"confirm-me", block

Event Strategy
Modal
OPEN
Button

Event Strategy
ModalButton
trigger

$rootScope
AppController
trigger modal
Confirmation Modal - Scope tree

$rootScope
AppController
trigger modal
$broadcast

$rootScope
AppController
trigger modal
$emit

$rootScope
AppController
trigger modal
scope.$emit

$rootScope
AppController
trigger modal
scope.$emit $rootScope.$on

$rootScope
AppController
trigger modal
$rootScope.$emit $rootScope.$on

$rootScope
AppController
trigger modal
"confirm-" + modal
"confirm-" + this.id
$rootScope.$emit $rootScope.$on

Events
Name conflicts
Pollute $rootScope
Memory leaks

Are you sure?
</ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
$rootScope.$emit("confirm-id")

Are you sure?
</ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
$rootScope.$emit("confirm-id")
// or
<button on-confirm="cb()"
ot-confirm-with="id">

Events
Requiring controller
?

Events
?
require: "^someDir"
link: (s,e,a,ctrl) =>{}

<div ng-controller="AppController as App">
<button>Block</button>
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
</div>
index.html

<button ot-on-confirm="block()">Block</button>
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
</div>
index.html

<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
</div>
index.html

<ot-confirm-required>
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
</ot-confirm-required>
</div>
index.html

Controller Strategy
Button
trigger
Modal
Confirm-Required

Controller Strategy
Confirm-Required
require:
"^confirmRequired"
require:
"^confirmRequired"
Button
trigger
Modal

Are you sure?
</ot-confirm-modal>

Angular 1
<ot-confirm-required>
<button ot-on-confirm />
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>
</ot-confirm-required>
require: "^otConfirmModal",
link: (s, e, a, ctrl) => {
ctrl.confirm(cb);
}
Custom elements
Are you sure?
</ot-confirm-modal>

Events
?

Events
Service

Events
Service
confirmModal.confirm();

Directive Strategy
ModalButton

Service Strategy
App
["confirmModal"]
ModalButton

Service Strategy
App
// confirmModal.confirm()
Button

Service Strategy
App
// confirmModal.confirm()
ModalButton

Service Strategy
App
// confirmModal.close()
ModalButton

Service Strategy
App
// confirmModal.close()
Button

open:
index.html
Toggling the modal <button
ng-click="confirm()">
Block
</button>

open:
1. get modal template
$templateCache.$get("...")
index.html
Block
</button>

open:
2. compile the modal manually
$compile(template)(scope)
index.html
Block
</button>

open:
index.html
Block
</button>

open:
3. add custom content
index.html
Block
</button>
/*
confirmModal.confirm({
callback: this.block,
template: "feature.html"
})
*/

open:
4. append to DOM
index.html
Block
</button>

open:
4. append to DOM
close:
index.html
Block
</button>

open:
4. append to DOM
close:
1. remove element
2. destroy scope
index.html
Block
</button>

Are you sure?
</ot-confirm-modal>
// modal.html
confirmModal.confirm({
callback: block,
template: "modal.html"
});
<button on-confirm="block()"
ot-confirm-with="modal.html">

Events
Require controller
Service

Events risky implementation
Require controller
Service

Events risky implementation
Require controller clunky interface
Service

class OtConfirmModal {}
Angular 2

@Component({})
Angular 2

@Component({
selector: "ot-confirm-modal"
})
Angular 2

@Component({
selector: "ot-confirm-modal",
template: ``
})
Angular 2

@Component({
template: `
<div class="modal">
<ng-content></ng-content>
<button>Cancel</button>
<button>Confirm</button>
</div>
<div class="overlay"></div>`
})
Angular 2

@Component({
template: `
<div class="modal" [hidden]="!isOpen">
<button>Cancel</button>
</div>
<div class="overlay" [hidden]="!isOpen"></div>`
})
Angular 2

@Component({
template: `
<button (click)="close()">Cancel</button>
</div>
<div class="overlay" [hidden]="!isOpen"
(click)="close()"></div>`
})
Angular 2

@Component({
template: `
<button (click)="close()">Cancel</button>
<button (click)="proceed()">Confirm</button>
</div>
<div class="overlay" [hidden]="!isOpen"
(click)="close()"></div>`
})
Angular 2

@Component({...})
Angular 2

@Component({...})
class OtConfirmModal {
isOpen: boolean = false;
open() { this.isOpen = true; }
close() { this.isOpen = false; }
}
Angular 2

@Component({...})
class OtConfirmModal {
isOpen: boolean = false;
open() { this.isOpen = true; }
close() { this.isOpen = false; }
proceed() {
this.onProceed();
this.close();
}
confirm(callback) {
this.onProceed = callback;
this.open();
}
Angular 2...

@Component({
selector: "app"
})
class App {}
app.ts

@Component({
selector: "app",
template: ``
})
class App {}
app.ts

@Component({
selector: "app",
template: `
<button (click)="">Block</button>
`
})
class App {}
app.ts

@Component({
selector: "app",
template: `
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>`
})
class App {}
app.ts

@Component({
selector: "app",
template: `
<ot-confirm-modal>
Are you sure?
</ot-confirm-modal>`,
directives: [OtConfirmModal]
})
class App {}
app.ts

Local variables
Angular 2 Strategies var-a
#a
<input #a (keyup)>
<p> {{ a.value }} </p>
<ot-confirm-modal #main>
// main OtConfirmModal instance
Pseudocode

@Component({
selector: "app",
template: `
Are you sure?
})
class App {}
app.ts

@Component({
selector: "app",
template: `
<button (click)="main.confirm(block)">Block</button>
})
class App {...}
app.ts

@Component({...})
class App {
block() {
console.log("posted!");
}
}
app.ts

@Component({...})
class App {
_block() {
console.log("posted!");
}
get block(){
return this.block.bind(this);
}
}
app.ts

Angular 2
<ot-confirm-modal #id>
Are you sure?
</ot-confirm-modal>
id.confirm(cb);
Custom elements
Are you sure?
</ot-confirm-modal>

@Component({
selector: "app",
template: `
<button (click)="main.confirm(block)">
Block
</button>
})
...
app.ts

@Component({
selector: "app",
template: `
<button [confirm-with]="main" (confirm)="block()">
Block
</button>
})
...
app.ts

@Directive({})
class OtConfirmWith {}
Angular 2

@Directive({
selector: "[ot-confirm-with]"
})
class OtConfirmWith {}
Angular 2
scope: {
modal:"=otConfirmWith"
}

@Directive({
})
class OtConfirmWith {
@Input("ot-confirm-with") modal: OtConfirmModal;
}
Angular 2
scope: {
modal:"=otConfirmWith"
}

@Directive({
})
}
Angular 2
$element.on("click",
requestConfirm)

@Directive({
})
@HostListener("click")
requestConfirm() {
this.modal.confirm();
}
}
Angular 2
$element.on("click",
requestConfirm)

@Directive({
})
@Output() confirm: EventEmitter = new EventEmitter();
requestConfirm() {
}
}
Angular 2

@Directive({
})
requestConfirm() {
}
emitConfirmEvent() {
this.confirm.next();
}
Angular 2...

@Directive({
})
requestConfirm() {
this.modal.confirm(this.emitConfirmEvent.bind(this));
}
}
Angular 2...

@Directive({ selector: "[ot-confirm-with]" })
requestConfirm() {
this.modal.confirm(this.emitConfirmEvent.bind(this));
}
}
}
Angular 2

Thanks
OpenTable, Sara Rahimian,
Simon Attley, Guest Center Web team
Links
Creating Container Components talk
Custom Element Examples
Angular Examples
Photos
Gratisography & Unsplash
All photos public domain.
Thanks
OpenTable, Sara Rahimian,
Simon Attley, Guest Center Web team
Links
Creating Container Components talk
Custom Element Examples
Angular Examples
Photos
Gratisography & Unsplash
All 3rd party photos public domain.

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

Creating GUI Component APIs in Angular and Web Components

Recommended

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to Creating GUI Component APIs in Angular and Web Components (20)

Recently uploaded (20)

Creating GUI Component APIs in Angular and Web Components