creating gui component apis in angular and web components

Rachael L MooreSr UI EngineerOpenTable morewry

Creating GUI Component APIsin Angular and Web Components(speaker notes included)

Kara EricksonSoftware EngineerOpenTable kara | karaforthewin

Angular Connect20 & 21 October 2015ExCel LondonLondon, 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> <option>Opt 1</option></select>


var select = $("select")[0];

select.optionsselect.options.length// 1


<select> <option>Opt 1</option></select>


<select> <option>Opt 1</option> <option>Opt 2</option></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

Confirmation Enhancement

Existing Feature

Nouns, Adjectives, and Verbs

Requirements

Pseudocode

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

Modal Content

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.open()

Multiple Modals - Pseudocode


Confirmation Modal

Modal Opens


Multiple Modals

Requirements - close modal.confirm()


modal.open()modal.close()

Modal Closes - Pseudocode


Confirmation Modal

Modal Opens


Multiple Modals

Modal Closes

Requirements - proceed modal.confirm()



modal.proceed()

Proceed Afterwards - Pseudocode


Confirmation Modal

Modal Opens


Multiple Modals

Modal Closes

Proceed Afterwards

Requirements - callback modal.confirm(callback)



modal.proceed()

Proceed Afterwards - Pseudocode


Confirmation Modal

Modal Opens


Multiple Modals

Modal Closes

Proceed Afterwards

Custom Elementsbrought to you by Web ComponentsCustom Elementsbrought to you by Web Components

OTConfirmModal.js

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

registerElement - OTConfirmModal.js

class OTConfirmModalElement { };

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

class OTConfirmModalElement - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { };

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

extends HTMLElement - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ...};

OTConfirmModal.js

Confirmation Modal Template - OTConfirmModal.js

<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>


<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>



class OTConfirmModalElement extends HTMLElement { ... createdCallback () {}};

createdCallback - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ... createdCallback () { // see Content Container talk from ng-conf }};

ng-conf - OTConfirmModal.js

http://2015.ng-conf.morewry.com/

https://github.com/opentable/Angular-Connect-2015


OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ... open () {} close () {}};

open & close methods - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ... 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


OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ... confirm (callback) { this.onProceed = callback; this.open(); }};

confirm - OTConfirmModal.js


OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { ... proceed () { this.close(); this.onProceed(); }};

proceed - OTConfirmModal.js

class OTConfirmModalElement extends HTMLElement { createdCallback open close confirm (callback) proceed};

Angular-Connect-2015 Pseudocode Summary - OTConfirmModal.js

http://codepen.io/collection/nWQjYL/


<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 1Angular 1

Declarative custom tag

Imperative access to API


$("#id")[0].confirm(cb);

Custom Elements

Custom elements

Angular 1Custom elements

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

$("#id")[0].confirm(cb);// Flexible imperative API


// ?

Angular 1 Directive Communication

?

?

?


Events

?

?

Event Strategy

Button Modal

Event Strategy

Modal Button

click

Event Strategy

"confirm-me", block

Modal Button

Event Strategy

Modal Button

"confirm-me", block

Event Strategy

ModalOPEN Button

Event Strategy

Modal Button

Event Strategy

Modal Buttontrigger

$rootScope

AppController

trigger modal

Confirmation Modal - Scope tree

$rootScope

AppController

trigger modal


$broadcast

$rootScope

AppController

trigger modal


$emit

$rootScope

AppController

trigger modal


$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





$rootScope.$emit("confirm-id")





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


Events

?

?


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

<div ng-controller="AppController as App"> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal></div>

index.html

<div ng-controller="AppController as App"> <ot-confirm-modal> Are you sure? <button ot-on-confirm="block()">Block</button> </ot-confirm-modal></div>

index.html

<div ng-controller="AppController as App"> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal></div>

index.html

<div ng-controller="AppController as App"> <ot-confirm-required> <button ot-on-confirm="block()">Block</button> <ot-confirm-modal> Are you sure? </ot-confirm-modal> </ot-confirm-required></div>

index.html

Controller Strategy

Buttontrigger

Modal

Confirm-Required

Controller Strategy

Confirm-Required

require: "^confirmRequired"

require: "^confirmRequired"

Buttontrigger

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



Events


?


Events


Service


Events


Service


confirmModal.confirm();

Directive Strategy

Modal Button

Service Strategy

Button

Service Strategy

App ["confirmModal"]

Modal Button

Service Strategy

App// confirmModal.confirm()

Button

Service Strategy

App// confirmModal.confirm()

Modal Button

Service Strategy

App// confirmModal.close()

Modal Button

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


open:

1. get modal template2. compile the modal manually$compile(template)(scope)

index.html


open:

1. get modal template2. compile the modal manually

index.html

open:

1. get modal template2. compile the modal manually3. add custom content

index.html


/*confirmModal.confirm({callback: this.block,

template: "feature.html"})*/

open:

1. get modal template2. compile the modal manually3. add custom content 4. append to DOM

index.html


open:

1. get modal template2. compile the modal manually3. add custom content4. append to DOM

close:

index.html


open:

1. get modal template2. compile the modal manually3. add custom content4. append to DOM

close:

1. remove element2. destroy scope

index.html





// 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


Angular 2

class OtConfirmModal {}

Angular 2

@Component({})class OtConfirmModal {}

Angular 2

@Component({selector: "ot-confirm-modal"

})class OtConfirmModal {}

Angular 2

@Component({selector: "ot-confirm-modal",template: ``


Angular 2

@Component({selector: "ot-confirm-modal",template: `<div class="modal"><ng-content></ng-content><button>Cancel</button><button>Confirm</button>

</div><div class="overlay"></div>`


}

Angular 2

@Component({selector: "ot-confirm-modal",template: `<div class="modal" [hidden]="!isOpen"><ng-content></ng-content><button>Cancel</button><button>Confirm</button>

</div><div class="overlay" [hidden]="!isOpen"></div>`


}

Angular 2

@Component({selector: "ot-confirm-modal",template: `<div class="modal" [hidden]="!isOpen"><ng-content></ng-content><button (click)="close()">Cancel</button><button>Confirm</button>

</div><div class="overlay" [hidden]="!isOpen"(click)="close()"></div>`


}

Angular 2

@Component({selector: "ot-confirm-modal",template: `<div class="modal" [hidden]="!isOpen"><ng-content></ng-content><button (click)="close()">Cancel</button><button (click)="proceed()">Confirm</button>

</div><div class="overlay" [hidden]="!isOpen"(click)="close()"></div>`


}

Angular 2

@Component({...})class OtConfirmModal {}

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: `<button (click)="">Block</button><ot-confirm-modal>Are you sure?

</ot-confirm-modal>`})class App {}

app.ts


</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



})class App {}

app.ts

@Component({ selector: "app",template: `<button (click)="">Block</button><ot-confirm-modal #main>Are you sure?


})class App {}

app.ts

@Component({ selector: "app",template: `<button (click)="main.confirm(block)">Block</button><ot-confirm-modal #main>Custom content here.


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

@Component({ selector: "app",template: `<button (click)="main.confirm(block)">Block</button><ot-confirm-modal #main>Custom content here.


})class App {...}

app.ts

Angular 2

<ot-confirm-modal #id>Are you sure?

</ot-confirm-modal>

id.confirm(cb);

Custom elements



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

</button><ot-confirm-modal #main>Custom content here.


})...

app.ts

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

</button><ot-confirm-modal #main>Custom content here.


})...

app.ts

@Directive({})class OtConfirmWith {}

Angular 2

@Directive({selector: "[ot-confirm-with]"

})class OtConfirmWith {}

Angular 2

scope: {modal:"=otConfirmWith"

}


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;

}

Angular 2

scope: {modal:"=otConfirmWith"

}


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;

}

Angular 2

$element.on("click", requestConfirm)


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;@HostListener("click")requestConfirm() {this.modal.confirm();

}}

Angular 2

$element.on("click", requestConfirm)


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;@Output() confirm: EventEmitter = new EventEmitter();@HostListener("click")requestConfirm() {this.modal.confirm();

}}

Angular 2


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;@Output() confirm: EventEmitter = new EventEmitter();@HostListener("click")requestConfirm() {this.modal.confirm();

}emitConfirmEvent() {this.confirm.next();

} Angular 2...


})class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;@Output() confirm: EventEmitter = new EventEmitter();@HostListener("click")requestConfirm() {this.modal.confirm(this.emitConfirmEvent.bind(this));


} Angular 2...

@Directive({ selector: "[ot-confirm-with]" })class OtConfirmWith {@Input("ot-confirm-with") modal: OtConfirmModal;@Output() confirm: EventEmitter = new EventEmitter();@HostListener("click")requestConfirm() {this.modal.confirm(this.emitConfirmEvent.bind(this));


}}

Angular 2

ThanksOpenTable, Sara Rahimian, Simon Attley, Guest Center Web team

LinksCreating Container Components talkCustom Element ExamplesAngular Examples

PhotosGratisography & UnsplashAll photos public domain.

ThanksOpenTable, Sara Rahimian, Simon Attley, Guest Center Web team

LinksCreating Container Components talk Custom Element Examples Angular Examples

PhotosGratisography & UnsplashAll 3rd party photos public domain.









https://docs.google.com/document/d/1cE1gmClJ-VCaCyRmbhpxVTdVmwOkj9UxDm59oN40ljI/edit


https://docs.google.com/document/d/1cE1gmClJ-VCaCyRmbhpxVTdVmwOkj9UxDm59oN40ljI/edit

OpenTable is hiring!

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

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

http://www.opentable.com/careers/





creating gui component apis in angular and web components

Technology