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

Понравилась презентация – покажи это...

Слайд 0

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

Слайд 1

bit.ly/KenBigDesign2015 Ken Tabor, @KenTabor

Слайд 2

What’s a Web Component?

Слайд 3

Presentation + Behavior

Слайд 4

Not One Off

Слайд 5

Drop In

Слайд 6

Code Solutions are investments in your business

Слайд 7

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

Слайд 8

In other words

Слайд 9

You get to make your own HTML tags

Слайд 10

Polymer helps make web components now

Слайд 11

Google Built

Слайд 12

Not a framework, but a library

Слайд 13

Interoperates (plays nicely with others)

Слайд 14

Слайд 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

Слайд 16

Polymer is a polyfill emulating Web Components on all modern browsers

Слайд 17

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

Слайд 18

Kinda like jQuery sits on top of plain JavaScript DOM access

Слайд 19

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

Слайд 20

Syntactic Sugar is developer friendly …

Слайд 21

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

Слайд 22

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

Слайд 23

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

Слайд 24

github.com/KDawg/ YourFutureHTML

Слайд 25

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

Слайд 26

Слайд 27

What’s a Web Component?

Слайд 28

W3C Standard

Слайд 29


Слайд 30

Слайд 31

What’s a Web Component?

Слайд 32

It’s an emerging standard consisting of 4 standards

Слайд 33

Custom Elements

Слайд 34

Custom Elements HTML Imports

Слайд 35

Custom Elements HTML Imports Shadow DOM

Слайд 36

Custom Elements HTML Imports Shadow DOM Templates

Слайд 37

Custom Elements HTML Imports Shadow DOM Templates Web Component

Слайд 38

We need something like this for our sanity

Слайд 39

DOM => Document Object Model

Слайд 40

HTML => HyperText Markup Language

Слайд 41

CSS => Cascading Style Sheet

Слайд 42

What is this describing?

Слайд 43

An Essay?

Слайд 44

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

Слайд 45


Слайд 46

This isn’t getting any easier

Слайд 47

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

Слайд 48

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

Слайд 49

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

Слайд 50

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

Слайд 51

Is HTML done?

Слайд 52

Am I done with HTML?

Слайд 53

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

Слайд 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

Слайд 55

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

Слайд 56


Слайд 57

I choose to believe in the future of Web Components

Слайд 58

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

Слайд 59

github.com/KDawg/ YourFutureHTML

Слайд 60

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

Слайд 61

Слайд 62

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

Слайд 63

I’m a product engineer at Sabre building TripCase

Слайд 64

Слайд 65

What’s a Web Component?

Слайд 66

It’s an entry into your world

Слайд 67


Слайд 68

Design Aesthetic

Слайд 69


Слайд 70

Why jQuery?

Слайд 71

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

Слайд 72

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

Слайд 73

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

Слайд 74

But JavaScript! XMLHttpRequest()

Слайд 75

jQuery Because? Widget plugin standard

Слайд 76

But Web Components!

Слайд 77

Why jQuery? YouMightNotNeedJQuery.com!

Слайд 78


Слайд 79

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

Слайд 80

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

Слайд 81

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

Слайд 82

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

Слайд 83

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

Слайд 84

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

Слайд 85

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

Слайд 86

Drop In UI

Слайд 87

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

Слайд 88

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

Слайд 89

Crowd-source your way to the awesome

Слайд 90

Features Bug fixes Optimizations

Слайд 91

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

Слайд 92

Build the UI so you can get to the UX

Слайд 93

Learn Solve Interesting Problems Share #innovation #JFDI

Слайд 94

It’s Your Turn to Respond

Слайд 95

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

Слайд 96