Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
<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 Polymer
Jul 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...
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 platf...
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: ...
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
@wi...
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
@KenTabor
blog.katworksgames.com
Your Future HTML: The Evolution of Site Design with Web Components
Your Future HTML: The Evolution of Site Design with Web Components
Your Future HTML: The Evolution of Site Design with Web Components
Your Future HTML: The Evolution of Site Design with Web Components
Your Future HTML: The Evolution of Site Design with Web Components
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
The Programmer
Next
Download to read offline and view in fullscreen.

86

Share

Download to read offline

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

Download to read offline

This talk is dedicated to helping you understand how you can easily build reusable pieces of user interface while assembling your overall experience. Specifically the emerging technology of web components is introduced as the way you can package your HTML, CSS, and JavaScript to produce drop-in solutions. It’s like building UI elements and widget controls for the web.

By using this tactic to architect your sites you’ll reduce time, and increase quality, of the work your development team produces. See how designers and developers will use the deep functionality web components offer. Make custom HTML tags backed by the necessary markup, style, and code. This unique bundle mixes presentation with behavior creating rich and flexible micro-interactions.

I’ll review how the popular browser makers are implementing this emerging technology on desktop and mobile. I’ll introduce Google’s Polymer library as a way you can use web components now while platform owners are in the process of supporting the proposed standard.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. <your-future-html> The Evolution of Site Design with Web Components Ken Tabor, @KenTabor
  2. Ken Tabor, @KenTabor bit.ly/KenBigDesign2015
  3. What’s a Web Component?
  4. Presentation + Behavior
  5. Not One Off
  6. Drop In
  7. Code Solutions are investments in your business
  8. Encapsulation High Cohesion Loose Coupling Single Responsibility Interface API Composition #coderlife
  9. In other words
  10. You get to make your own HTML tags
  11. Polymer helps make web components now
  12. Google Built
  13. Not a framework, but a library
  14. Interoperates (plays nicely with others)
  15. v0.5 “R&D” v0.8 “Alpha” v1.0 “Prod” v1.1 “Prod” Ken Discovers Polymer 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. What’s a Web Component?
  27. W3C Standard
  28. “Almost”
  29. What’s a Web Component?
  30. It’s an emerging standard consisting of 4 standards
  31. Custom Elements
  32. Custom Elements HTML Imports
  33. Custom Elements HTML Imports Shadow DOM
  34. Custom Elements HTML Imports Shadow DOM Templates
  35. Custom Elements HTML Imports Shadow DOM Templates Web Component
  36. We need something like this for our sanity
  37. DOM => Document Object Model
  38. HTML => HyperText Markup Language
  39. CSS => Cascading Style Sheet
  40. What is this describing?
  41. An Essay? 😰
  42. Yet, we’re building highly interactive, continuously delivered apps, across multiple operating systems, and hardware platforms
  43. BLARG! 😱
  44. This isn’t getting any easier
  45. Around 2011 we started using HTML5 tags www.google.com/trends/explore#q=html5
  46. Oct 28, 2014 the proposal was recommended (done) en.wikipedia.org/wiki/HTML5
  47. <nav> <footer> <video> <canvas> <section>
  48. <div class=“wtf” id=“hth”/>
  49. Is HTML done?
  50. Am I done with HTML?
  51. Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making?
  52. 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
  53. Will we finally rid ourselves of the noisy multitude of JavaScript MVC frameworks that plague our decision making??
  54. Maybe
  55. I choose to believe in the future of Web Components
  56. It’s Demo Time {{tv-listing R&D}}
  57. github.com/KDawg/ YourFutureHTML
  58. <tv-listing id="the-list"></tv-listing>
  59. What’s up with this guy? Who is Ken Tabor?
  60. I’m a product engineer at Sabre building TripCase
  61. What’s a Web Component?
  62. It’s an entry into your world
  63. APIs
  64. Design Aesthetic
  65. Datasets
  66. Why jQuery?
  67. jQuery because? DOM element selection $('thing') $('#thing') $('.thing')
  68. But JavaScript! getElementsByTagName() getElementById() getElementsByClassName() querySelector()
  69. jQuery because? It makes AJAX easy $.ajax()
  70. But JavaScript! XMLHttpRequest()
  71. jQuery Because? Widget plugin standard
  72. But Web Components!
  73. Why jQuery? YouMightNotNeedJQuery.com!
  74. Considerations
  75. jQuery It’s feeling obsolete, does it help your future?
  76. ReactJS Overlapping goals with Web Components, but it’s not a standard
  77. IE7/IE8/IE9 Ancient tech and doesn’t support Polymer or Web Components (or anything good in life)
  78. Polymer It delivers Web Components, but it’s also an opinionated layer
  79. @polymer @rob_dodson @ebidel polymer-project.org webcomponents.org x-tags.org customelements.io Learn More @addyosmani @wilsonpage @Web_Components
  80. Browser Platform Updates chromestatus.com/features status.modern.ie webkit.org/status.html
  81. Web Components enable the reality of a common visual design language that’s alive
  82. Drop In UI
  83. Share your answers: with yourself, your team, your company, your community
  84. Establish an internal open source project collecting all of your UI widgets
  85. Crowd-source your way to the awesome
  86. Features Bug fixes Optimizations
  87. You don’t need Web Components to do this - have success now
  88. Build the UI so you can get to the UX
  89. Learn Solve Interesting Problems Share #innovation #JFDI
  90. It’s Your Turn to Respond
  91. Look for my book bit.ly/KenBigDesign2015 @KenTabor blog.katworksgames.com
  • SnehalJapkar

    Sep. 4, 2021
  • AnkitManda

    Nov. 22, 2020
  • Mehedihasan1185

    Sep. 9, 2020
  • davye

    Apr. 29, 2020
  • IsraelSantos66

    Mar. 31, 2020
  • NileshSharma136

    Oct. 15, 2019
  • AlexisCato1

    May. 2, 2019
  • AurelieBoderiou

    Feb. 12, 2018
  • geerthikvarun

    Sep. 12, 2017
  • PedroCristianBenitez

    Aug. 2, 2017
  • shalinispissay

    Jul. 17, 2017
  • LydiaCrestani1

    Jul. 9, 2017
  • ninijaafar

    Mar. 6, 2017
  • ssuserb41444

    Jan. 5, 2017
  • MsherifaBenyakoub

    Nov. 29, 2016
  • TheRealAkansha

    Oct. 13, 2016
  • pauthawnkhai

    Jul. 29, 2016
  • AmukelaniEdwin

    May. 3, 2016
  • mopinfish

    May. 3, 2016
  • YassinMohamed7

    Apr. 30, 2016

This talk is dedicated to helping you understand how you can easily build reusable pieces of user interface while assembling your overall experience. Specifically the emerging technology of web components is introduced as the way you can package your HTML, CSS, and JavaScript to produce drop-in solutions. It’s like building UI elements and widget controls for the web. By using this tactic to architect your sites you’ll reduce time, and increase quality, of the work your development team produces. See how designers and developers will use the deep functionality web components offer. Make custom HTML tags backed by the necessary markup, style, and code. This unique bundle mixes presentation with behavior creating rich and flexible micro-interactions. I’ll review how the popular browser makers are implementing this emerging technology on desktop and mobile. I’ll introduce Google’s Polymer library as a way you can use web components now while platform owners are in the process of supporting the proposed standard.

Views

Total views

85,486

On Slideshare

0

From embeds

0

Number of embeds

208

Actions

Downloads

307

Shares

0

Comments

0

Likes

86

×