The document discusses web components as a key evolution in site design, emphasizing their benefits such as encapsulation and interoperability. It highlights Polymer as a library aiding web component development and compares it with traditional JavaScript tools like jQuery. The author, Ken Tabor, advocates for the adoption of web components to streamline the creation of interactive web applications and encourages innovation through crowd-sourced UI development.

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)

16. v0.5 “R&D”
v0.8 “Alpha”
v1.0 “Prod”
v1.1 “Prod”
Ken Discovers Polymer
Jul 2014
March 2015
May 2015
August 2015

17. Polymer is a polyfill
emulating Web
Components on all modern
browsers

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

19. Kinda like jQuery sits on
top of plain JavaScript
DOM access

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

21. Syntactic Sugar is
developer friendly …

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

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

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

25. github.com/KDawg/
YourFutureHTML

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

28. What’s a Web Component?

29. W3C Standard

30. “Almost”

32. What’s a Web Component?

33. It’s an emerging standard
consisting of 4 standards

34. Custom Elements

35. Custom Elements
HTML Imports

36. Custom Elements
HTML Imports
Shadow DOM

37. Custom Elements
HTML Imports
Shadow DOM
Templates

38. Custom Elements
HTML Imports
Shadow DOM
Templates
Web Component

39. We need something like
this for our sanity

40. DOM => Document
Object Model

41. HTML => HyperText
Markup Language

42. CSS => Cascading
Style Sheet

43. What is this describing?

44. An Essay? 😰

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

46. BLARG! 😱

47. This isn’t getting any easier

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

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

50. <nav> <footer> <video>
<canvas> <section>

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

52. Is HTML done?

53. Am I done with HTML?

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

55. 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

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

57. Maybe

58. I choose to believe in the
future of Web Components

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

60. github.com/KDawg/
YourFutureHTML

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

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

64. I’m a product engineer at
Sabre building TripCase

66. What’s a Web Component?

67. It’s an entry into your world

68. APIs

69. Design Aesthetic

70. Datasets

71. Why jQuery?

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

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

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

75. But JavaScript!
XMLHttpRequest()

76. jQuery Because?
Widget plugin standard

77. But Web Components!

78. Why jQuery?
YouMightNotNeedJQuery.com!

79. Considerations

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

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

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

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

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

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

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

87. Drop In UI

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

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

90. Crowd-source your way to
the awesome

91. Features
Bug fixes
Optimizations

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

93. Build the UI so you can get
to the UX

94. Learn
Solve Interesting Problems
Share
#innovation #JFDI

95. It’s Your Turn to Respond

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