'

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

“Almost”


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

BLARG!


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

Maybe


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

APIs


Слайд 68

Design Aesthetic


Слайд 69

Datasets


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

Considerations


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


×

HTML:





Ссылка: