Using Components to Build Native-Quality HTML5 Apps

USING COMPONENTS TO BUILD

Native-Quality HTML5 Apps

Gray Norton, Enyohttp://enyojs.com

@enyojs

@graynorton

Presentation originally authored by Kevin Schaaf (@kevinpschaaf)

HI.

KNOCKING ON DOORS

CSS

JS

Webpages

✔

Native-Quality

Apps

?CSS

JS

CONSISTENT LOOK & FEEL

HIGH PERFORMANCE

TOUCH-FRIENDLINESS

ADAPTABILITY

MAINTAINABILITY

REUSABILITY

…AND NO WHEEL-REINVENTION

TEMPLATES: NOT ENOUGH

?

Content-based Views Templates

Rich, Interactive Controls

UI PLUGINS: NOT ENOUGH

UI PLUGINS: NOT ENOUGH

A NEW WAY OF THINKING

COMPONENTS

THE SOLUTION:

Functions

Properties

EventsA

PI

Markup:

Event handling:

Logic / state:

ENCAPSULATE

Lifecycle management:

SLIDER

EXAMPLE:

Markup Lifecycle Event Handling Logic/API

Lifecycle management:Event handling:State / Logic:Markup:Markup:

new Slider({value:20});

new Slider({value:20});

new Slider({value:20});

new Slider({value:20});

new Slider({value:20});

APPLICATION VIEWS

EXAMPLE:

+Label

Label

API: setContent()

IntegerLabel

API: setValue()

Label: 20

ValueLabel

API: setContent()

setValue()

Label: 20

ValueLabel

API: setContent()

setValue()

Slider

API: setValue()

+

+

LabeledSlider

API: setLabel()

setValue()

LabeledSlider

API: setLabel()

setValue()

Groupbox

AttributeView

API: setAttributes()

AttributeView

API: setAttributes()

+

ContactDetailView

API: setContactModel()

new ContactDetailView({contactModel:m});

new ContactDetailView({contactModel:m});

new ContactDetailView({contactModel:m});

new ContactDetailView({contactModel:m});

new ContactDetailView({contactModel:m});

ContactDetail:AttributeView:LabeledSlider:Slider:

LIST

EXAMPLE:

List

Viewport

Page 0

Page 1

Render page

0

Render page

1

JavaScript: DOM:

Render page

0

SPOTLIGHT (FOCUS

MANAGER)

EXAMPLE:

WEB COMPONENTS

TOWARD STANDARDIZATION:

HTML TEMPLATES

CUSTOM ELEMENTS

SHADOW DOM

COMPONENT LOADER

…

HTML TEMPLATES

<template id="commentTemplate"><div>

<img src=""><div class="comment"></div>…

</div></template>

var t = document.querySelector("#commentTemplate");

someElement.appendChild(t.content.cloneNode());

CUSTOM ELEMENTS

& SHADOW DOM

<element extends="button" name="x-fancybutton” constructor=“FancyButton”><template>

<style scoped>@host { display: contents; }div.fancy {

…}

</style><div class="fancy">

<content></content></div><script>

FancyButton.prototype.fancify = function() { … };

this.lifecycle({ inserted: this.doSomething(); });</script>

</template></element>

<button is=“x-fancybutton”>Click Me!</button>

COMPONENT LOADER

<link rel="components" href=”my-components.html">

SO…WHY AGAIN?

USING COMPONENTS TO BUILD

Native-Quality HTML5 Apps

Gray Norton, Enyohttp://enyojs.com

@enyojs

@graynorton