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

35,793 views

Published on

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.

Published in: Engineering, Design, Technology
3 Comments
73 Likes
Statistics
Notes
No Downloads
Views
Total views
35,793
On SlideShare
0
From Embeds
0
Number of Embeds
187
Actions
Shares
0
Downloads
261
Comments
3
Likes
73
Embeds 0
No embeds

No notes for slide

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

×