Web component driven development

WEB COMPONENTS

DRIVEN DEVELOPMENT

Gil Fink

CEO and Senior Consultant, sparXys

@gilfink

About Me • sparXys CEO and senior consultant

• Microsoft MVP in the last 8 years

• Pro Single Page Application Development (Apress)

co-author

• 4 Microsoft Official Courses (MOCs) co-author

• GDG Rishon and AngularUP co-organizer

Agenda • Components?

• Components Architecture

• HTML5 Web Components

Component Definition • A component is

o Independent software unit

o Can be composed with other components

Component Characteristics

• Independent o A component should be independent

• Composable o All external interactions must take place through publicly defined

interfaces (API)

• Deployable o Self-contained and must be able to operate as a stand-alone entity

Components Architecture

Typical Web Page

Breaking The Page into Components

Header + Toolbar

About

Main Section

What’s new

Schedule

Summary

Recent list

From Design to Implementation

Main Section

Schedule

Summary

Recent list

Component

Child Component

Child Component

Child Component

<main-section>

<schedule>

<summary>

<recent-list>

Components Tree

<main-section>

<schedule> <summary> <recent-list>

<main-section>

<schedule>

<summary>

<recent-list>

Component Types • Stateless

• Stateful

• Routed

Stateless Components • Define inputs and outputs

• Data enters via property binding (input)

• Data leaves via events (output)

• Stateless/dumb/presentational

<schedule>

<summary>

<recent-list>

Stateful Components • Communicate with services and states

• Don’t directly mutate states

• Render child components

• Stateful/smart/container

<main-section>

Routed Components • Same as stateful component

• Includes a route definition bound to the component

<Route>

<about> <main-section> <whats-new>

Data Flow

Two Way Binding • Automatic synchronization of data between the

model and component’s view

• The view is a projection of the model at all times

Model

Component

Change in Model updates the component’s view

Change in component’s view updates the Model

Frameworks/Libraries • Most of the MVW frameworks include two way

binding o Angular 1

o Angular 2 (not out of the box)

o KnockoutJS

o And many more

Flux

Libraries • Libraries that leverages the Flux pattern:

o Facebook’s Flux: https://github.com/facebook/flux

o Redux: https://github.com/reactjs/redux

o Reflux: https://github.com/reflux/refluxjs

o Alt: http://alt.js.org/

o And many more

Mediator/Event Aggregator

Angular lodash postal.js … Core Libraries

Application Core

Facade

Pub / Sub

… Component

HTML / CSS / JavaScript

Component

HTML / CSS / JavaScript

Component

HTML / CSS / JavaScript

Mediator/Event Aggregator – Cont.

• Promotes loose coupling of components

• Allow components to broadcast or listen to

notifications from other components

• Notifications can be handled by any number of

components at once

Frameworks/Libraries • Framework that leverages the proposed solution:

o Most of the MVW frameworks include ways to apply this architecture

(AngularJS, Ember and Backbone for example)

o Aura: http://aurajs.com/

o And many more

HTML5 Web Components

HTML5 Web Components • A set of standards designed to componentize the

web

• Some general goals:

Code Reuse Encapsulation Separation of

Concerns Composition Theming Expressive Semantic

The Web Components Standards

• Reusable DOM fragments Templates

• Load HTML declaratively Imports

• DOM encapsulation Shadow DOM

• Create your own elements Custom

Elements

Setting The Environment • Browsers have only partial support for Web

Components o So we use the webcomponents.js Polyfill for Web Components

• Download: o https://github.com/webcomponents/webcomponentsjs/

o Or install using your favorite package manager (Nuget/Bower/npm)

• Make sure the Polyfill script runs first

Let’s Drill Down

Templates • A new HTML element – template

• Can be used to instantiate document fragments

• Can wrap HTML, style tags and script tags

• No data binding support

<template id=”myTemplate”> <div> … </div> </template>

Cloning a Template • Select the template and extract its content

o Use the importNode function to get the cloned content

• Only when the clone is appended to the DOM o The style and JavaScript are executed

o Resources like images are retrieved from the server

var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);

Templates Demo

Imports • Load additional HTML documents

o Without using Ajax

• A new type of link tag

• Use the rel attribute with the import type:

<link rel=”import” href=”myImport.html”>

Imports and Bundling • Enable to bundle a full component into one HTML

file o The HTML can include scripts and CSS styles

• The whole bundle can be retrieved in a single call

Imports and The DOM • Importing a document doesn’t include it into the

DOM o It will parse it in memory and load all the additional resources

• Use the import property of the link tag:

var content = document.querySelector(‘link[rel=”import”]’).import;

Imports Demo

Import Additional Notes • Scripts running inside the import can reference the

containing document by calling

document.currentScript.ownerDocument

• CORS constraints apply to documents imported

from other domains

Shadow DOM • Encapsulate DOM parts

o The browser will know how to present those parts

o The browser won’t show the encapsulated parts in the source code

• Creates a boundary between the component and

its user

The Problems Shadow DOM Tries to Solve

• Encapsulation of components/widgets

• Style leakage o Leaks from one component to another

o Leaks from imported 3th party library/framework

• Global DOM o id or class attributes all over the place

Shadow DOM in The Browser

<video src="media/myVideo.mp4" controls></video>

<input type="date">

Shadow DOM – Cont. • Use the createShadowRoot function to wrap an

element as a shadow DOM:

var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;

Styling Shadow DOM • :host and :host() pseudo-class

• ::content pseudo-element

<div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template>

</div>

Shadow DOM Demo

Custom Elements • Enable to extend or to create custom HTML

elements o The new element must inherit from HTMLElement

• Create a custom element using the registerElement

function:

• Extend an existing element:

var myElement = document.registerElement(‘my-element’);

var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });

Custom Elements – Naming

• You can create named elements (almost) any way

you want: o Same naming rules as other HTML tags

o There must be a dash (“-”) in the name

• To future-proof the name against the HTML standard

• To avoid naming collisions

Custom Elements – Usage • Use the element in your DOM:

or use the createElement function:

<my-input></my-input>

var elm = document.createElement(‘my-input’);

Custom Element Callbacks

• Custom elements have life cycle events:

• createdCallback o Called when an instance is created

• attachedCallback o Called when an instance is added to DOM subtree

• detachedCallback o Called when an instance is removed from a DOM subtree

• attributeChangedCallback o Called after an attribute value changes

Custom Elements Demo

The Current State of Web Components

• Still W3C Working Drafts

• Browser support:

http://caniuse.com/#search=web%20components

• Main libraries:

Polymer X-Tag

Summary • Component Driven Development enables you to

create web applications more efficiently

• HTML5 Web Components are emerging standards

that enables: • Encapsulation

• Separation of Concerns

• Element portability

• And more

• Taking the web one step forward!

Resources • http://webcomponents.org/

• My Blog – http://www.gilfink.net

• Follow me on Twitter – @gilfink

Thank You!