your future html: the evolution of site design with web components
TRANSCRIPT
<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