WEB COMPONENTSFUTURE OF WEB DEV

/ Matjaž Lipuš @MatjazL

AGENDASPACurrent stateFuture technologiesLets build an app

PRE SPAjQueryelement.click(handler)$.ajax()element.html(result)

SPAroutertemplatesapp statedataMVC

SPA TOOLINGhaml, jadeless, scssES6 (Babel)TypeScriptnpm, bower, jspmgrunt, gulp

SPA FRAMEWORKSrouter (state, url)componentstemplatinghelpers (http, url)dependency injectionsimple testing

SPA FRAMEWORKSBackbone.jsKnockoutEmberJSReact + FluxAngularJS

BACKBONE.JStemplatesmodels/collectionsrouting

KNOCKOUTtwo way bindingcustom events

EMBERJSstructured codeconvention over configuration

REACT + FLUXvirtual DOM (diff, fast updates)JSXevented approach (dispatcher)

ANGULAR 1MVVMDependency InjectionUnit testing (karma)Integration testing (protractor)5 years ago

ES6 - ES 2015official standard since last week ;)class syntax, arrow functions, maps, sets, promises,generatorsStill JavaScript (prototypal inheritance)

ES6 PROMISEnew Promise(function(resolve, reject) { async(function(error, response) { if (error) { reject(error); } else { resolve(response); } })});

Promise.all([])Promise.resolve()Promise.reject()

FETCH()bower install fetch

fetch('/users') .then(function(response) { return response.json(); }).then(function(json) { console.log('parsed json', json); }).catch(function(ex) { console.error('parsing failed', ex); })

fetch('/users', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'Bart', login: 'user' })})

ES7 DECORATORS@inject(Users)class List { constructor(Users) { this.Users = Users; } fetchUser(id) { return this.Users.fetch(id); }}

class Person { firstName = 'John'; lastName = 'Doe';

@computedFrom('firstName', 'lastName') get fullName() { return ̀${this.firstName} ${this.lastName}̀; }}

WEB COMPONENTS<hello-there name="everybody"></hello-there>

Abstraction and encapsulation

TemplatesHTML importsShadow DOMCustom elements

WEB COMPONENTS TODAYChrome's "built-in" components

dd/mm/yyyy --:--

1:10

Can I use?

<HELLO-THERE><hello-there name="everybody"></hello-there>

<template id="hello-there-tpl"> <style> p { color: orange; } </style> <p>Hello <span></span>!</p></template>

Hello everybody!

<HELLO-THERE> 2/2var HelloThere = document.registerElement('hello-there', { prototype: Object.create(HTMLElement.prototype, { createdCallback: { value: function() { this.name = this.getAttribute('name') || 'world'; var tmpl = document.querySelector('#hello-there-tpl'); var clone = document.importNode(tmpl.content, true); clone.querySelector('span').textContent = this.name; this.createShadowRoot().appendChild(clone); } }, alert: { value: function() { alert(this.name); } } })

PRESENT

polyfillssimplified API for web components

Polymer project

X-TagComponents kitchen

FUTUREAngular 2, Aurelia, Ember 2built on web components conceptsrouter, components, templates, DI, component's lifecycle

Aurelia Angular 2

Object.observe() zone.js

two way binding immutable data O(1)

convention overconfiguration

decorators

attr.bind, click.trigger templates using *, () & []

MOBILEweb viewAppcelerator, cordova + ionic (2)

(iOS) (all platforms)

React nativeNativeScript

LETS BUILD AN APPAureliaRouterFlickrChild routerLibrary mini appPolymer components

LETS START!git clone -b step-1 \ https://github.com/matjaz/webcomponents-workshop.git

cd webcomponents-workshopcd aurelianpm installnpm install -g gulp jspmjspm install -y

gulp watch

ADDING ROUTER...git checkout step-2

configureRouter.map()navigation@bindable, @computedFromtests

ADDING FLICKRgit checkout step-3

Dependency injectionScreen activation cycleTest stub

ADDING CHILD ROUTERgit checkout step-4

ADDING CHILD ROUTERgit checkout step-4

ADDING LIBRARYgit checkout step-5

cd servernpm inpm start

RESTCustom elementsrepeat, binding

ADDING POLYMER COMPONENTSbower install google-mapbower install pazguille/github-cardgit checkout step-6

Frameworks co-existanceCode re-use

QUESTIONS?

THANK YOU!github.com/matjaz/webcomponents-workshop

/ Matjaž Lipuš @MatjazL