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

Engineering

ken-tabor
  • 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
  • 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
  • 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
  • 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 @KenTabor blog.katworksgames.com
Please download to view
96
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Description
Text
  • 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
  • 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
  • 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
  • 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 @KenTabor blog.katworksgames.com
Comments
Top