your future html: the evolution of site design with web components

<your-future-html>The Evolution of Site Design

with Web Components

Ken Tabor, @KenTabor

Ken Tabor, @KenTabor

bit.ly/KenBigDesign2015

What’s a Web Component?

Presentation + Behavior

Not One Off

Drop In

Code Solutions are investments in your

business

Encapsulation High Cohesion Loose Coupling

Single Responsibility Interface API Composition #coderlife

In other words

You get to make your own HTML tags

Polymer helps make web components now

Google Built

Not a framework, but a library

Interoperates (plays nicely with others)

v0.5 “R&D” v0.8 “Alpha” v1.0 “Prod” v1.1 “Prod”

Ken Discovers PolymerJul 2014 March 2015 May 2015 August 2015

Polymer is a polyfill emulating Web

Components on all modern browsers

It’s also a “sweetened” opinion on top …

aka Syntactic Sugar

Kinda like jQuery sits on top of plain JavaScript

DOM access

$('#btn-accept'); vs

document.querySelector( '#btn-accept');

Syntactic Sugar is developer friendly …

Automatic node finding Component lifecycle

Two-way data binding Utility functions

… but we can’t really know what’s going on under the

hood with sugar

It’s Demo Time {{cool-button R&D}}

github.com/KDawg/YourFutureHTML

<cool-button id=“btn-accept" size="large" bodyColor="alazarian" quantity="42" product="Life, the Universe, and Everything" label="Press Me!"> </cool-button>

What’s a Web Component?

W3C Standard

“Almost”

What’s a Web Component?

It’s an emerging standard consisting of 4 standards

Custom Elements

Custom Elements HTML Imports

Custom Elements HTML Imports Shadow DOM

Custom Elements HTML Imports Shadow DOM

Templates

Custom Elements HTML Imports Shadow DOM

Templates

Web Component

We need something like this for our sanity

DOM => Document Object Model

HTML => HyperText Markup Language

CSS => Cascading Style Sheet

What is this describing?

An Essay? 😰

Yet, we’re building highly interactive, continuously

delivered apps, across multiple operating systems,

and hardware platforms

BLARG! 😱

This isn’t getting any easier

Around 2011 we started using HTML5 tags

www.google.com/trends/explore#q=html5

Oct 28, 2014 the proposal was recommended (done)

en.wikipedia.org/wiki/HTML5

<nav> <footer> <video> <canvas> <section>

<div class=“wtf” id=“hth”/>

Is HTML done?

Am I done with HTML?

Will we finally rid ourselves of the noisy multitude of

JavaScript MVC frameworks that plague our

decision making?

Prototype Dojo Toolkit

YUI Ext

Angular Knockout Backbone

Ember React

2005 2005 2006 2007 2009 2010 2010 2011 2013

Source: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

Will we finally rid ourselves of the noisy multitude of

JavaScript MVC frameworks that plague our decision making??

Maybe

I choose to believe in the future of Web Components

It’s Demo Time {{tv-listing R&D}}

github.com/KDawg/YourFutureHTML

<tv-listing id="the-list"></tv-listing>

What’s up with this guy? Who is Ken Tabor?

I’m a product engineer at Sabre building TripCase

What’s a Web Component?

It’s an entry into your world

APIs

Design Aesthetic

Datasets

Why jQuery?

jQuery because? DOM element selection

$('thing') $('#thing') $('.thing')

But JavaScript! getElementsByTagName()

getElementById() getElementsByClassName()

querySelector()

jQuery because? It makes AJAX easy

$.ajax()

But JavaScript! XMLHttpRequest()

jQuery Because? Widget plugin standard

But Web Components!

Why jQuery? YouMightNotNeedJQuery.com!

Considerations

jQuery

It’s feeling obsolete, does it help your future?

ReactJS

Overlapping goals with Web Components, but it’s

not a standard

IE7/IE8/IE9

Ancient tech and doesn’t support Polymer or Web

Components (or anything good in life)

Polymer

It delivers Web Components, but it’s also

an opinionated layer

@polymer @rob_dodson

@ebidel

polymer-project.org webcomponents.org

x-tags.org customelements.io

Learn More

@addyosmani @wilsonpage

@Web_Components

Browser Platform Updates chromestatus.com/features

status.modern.ie webkit.org/status.html

Web Components enable the reality of a common visual design language

that’s alive

Drop In UI

Share your answers: with yourself, your team, your

company, your community

Establish an internal open source project collecting all

of your UI widgets

Crowd-source your way to the awesome

Features Bug fixes

Optimizations

You don’t need Web Components to do this -

have success now

Build the UI so you can get to the UX

Learn Solve Interesting Problems

Share

#innovation #JFDI

It’s Your Turn to Respond

Look for my book

bit.ly/KenBigDesign2015

@KenTaborblog.katworksgames.com