Your Future HTML: The Evolution of Site Design with Web Components

If you like this presentation – show it...

Slide 0

<your-future-html> The Evolution of Site Design with Web Components Ken Tabor, @KenTabor

Slide 1

bit.ly/KenBigDesign2015 Ken Tabor, @KenTabor

Slide 2

What’s a Web Component?

Slide 3

Presentation + Behavior

Slide 4

Not One Off

Slide 5

Drop In

Slide 6

Code Solutions are investments in your business

Slide 7

Encapsulation High Cohesion Loose Coupling Single Responsibility Interface API Composition #coderlife

Slide 8

In other words

Slide 9

You get to make your own HTML tags

Slide 10

Polymer helps make web components now

Slide 11

Google Built

Slide 12

Not a framework, but a library

Slide 13

Interoperates (plays nicely with others)

Slide 14

Slide 15

Ken Discovers Polymer v0.5 “R&D” v0.8 “Alpha” v1.0 “Prod” v1.1 “Prod” Jul 2014 March 2015 May 2015 August 2015

Slide 16

Polymer is a polyfill emulating Web Components on all modern browsers

Slide 17

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

Slide 18

Kinda like jQuery sits on top of plain JavaScript DOM access

Slide 19

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

Slide 20

Syntactic Sugar is developer friendly …

Slide 21

Automatic node finding Component lifecycle Two-way data binding Utility functions

Slide 22

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

Slide 23

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

Slide 24

github.com/KDawg/ YourFutureHTML

Slide 25

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

Slide 26

Slide 27

What’s a Web Component?

Slide 28

W3C Standard

Slide 29


Slide 30

Slide 31

What’s a Web Component?

Slide 32

It’s an emerging standard consisting of 4 standards

Slide 33

Custom Elements

Slide 34

Custom Elements HTML Imports

Slide 35

Custom Elements HTML Imports Shadow DOM

Slide 36

Custom Elements HTML Imports Shadow DOM Templates

Slide 37

Custom Elements HTML Imports Shadow DOM Templates Web Component

Slide 38

We need something like this for our sanity

Slide 39

DOM => Document Object Model

Slide 40

HTML => HyperText Markup Language

Slide 41

CSS => Cascading Style Sheet

Slide 42

What is this describing?

Slide 43

An Essay?

Slide 44

Yet, we’re building highly interactive, continuously delivered apps, across multiple operating systems, and hardware platforms

Slide 45


Slide 46

This isn’t getting any easier

Slide 47

Around 2011 we started using HTML5 tags www.google.com/trends/explore#q=html5

Slide 48

Oct 28, 2014 the proposal was recommended (done) en.wikipedia.org/wiki/HTML5

Slide 49

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

Slide 50

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

Slide 51

Is HTML done?

Slide 52

Am I done with HTML?

Slide 53

Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making?

Slide 54

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

Slide 55

Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making??

Slide 56


Slide 57

I choose to believe in the future of Web Components

Slide 58

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

Slide 59

github.com/KDawg/ YourFutureHTML

Slide 60

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

Slide 61

Slide 62

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

Slide 63

I’m a product engineer at Sabre building TripCase

Slide 64

Slide 65

What’s a Web Component?

Slide 66

It’s an entry into your world

Slide 67


Slide 68

Design Aesthetic

Slide 69


Slide 70

Why jQuery?

Slide 71

jQuery because? DOM element selection $('thing') $('#thing') $('.thing')

Slide 72

But JavaScript! getElementsByTagName() getElementById() getElementsByClassName() querySelector()

Slide 73

jQuery because? It makes AJAX easy $.ajax()

Slide 74

But JavaScript! XMLHttpRequest()

Slide 75

jQuery Because? Widget plugin standard

Slide 76

But Web Components!

Slide 77

Why jQuery? YouMightNotNeedJQuery.com!

Slide 78


Slide 79

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

Slide 80

ReactJS Overlapping goals with Web Components, but it’s not a standard

Slide 81

IE7/IE8/IE9 Ancient tech and doesn’t support Polymer or Web Components (or anything good in life)

Slide 82

Polymer It delivers Web Components, but it’s also an opinionated layer

Slide 83

Learn More @polymer @rob_dodson @ebidel @addyosmani @wilsonpage @Web_Components polymer-project.org webcomponents.org x-tags.org customelements.io

Slide 84

Browser Platform Updates chromestatus.com/features status.modern.ie webkit.org/status.html

Slide 85

Web Components enable the reality of a common visual design language that’s alive

Slide 86

Drop In UI

Slide 87

Share your answers: with yourself, your team, your company, your community

Slide 88

Establish an internal open source project collecting all of your UI widgets

Slide 89

Crowd-source your way to the awesome

Slide 90

Features Bug fixes Optimizations

Slide 91

You don’t need Web Components to do this have success now

Slide 92

Build the UI so you can get to the UX

Slide 93

Learn Solve Interesting Problems Share #innovation #JFDI

Slide 94

It’s Your Turn to Respond

Slide 95

bit.ly/KenBigDesign2015 @KenTabor blog.katworksgames.com Look for my book

Slide 96