As I Walk Through The Valley Of The Shadow Of DOM

Talk given at The 2014 jQuery Conference in Chicago, IL

Transcript

1. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
2. As I Walk Through The Valley Of The Shadow Of DOM @davearel @davearel
3. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS CHICAGO
4. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
5. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
6. As I Walk Through The Valley Of The Shadow Of DOM @davearel
7. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
8. As I Walk Through The Valley Of The Shadow Of DOM @davearel
10. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
11. As I Walk Through The Valley Of The Shadow Of DOM @davearel
12. As I Walk Through The Valley Of The Shadow Of DOM @davearel
13. What this talk is: • An overview of Web Components! • A look into the future! • An argument for its usefulness!
14. What this talk isn’t: • A tutorial! • An argument for whether Web Components is ready for production
15. A history of the componentized web
21. As I Walk Through The Valley Of The Shadow Of DOM @davearel
22. As I Walk Through The Valley Of The Shadow Of DOM @davearel
23. As I Walk Through The Valley Of The Shadow Of DOM @davearel
24. As I Walk Through The Valley Of The Shadow Of DOM @davearel
25. Dave Arel! ! bellycard.com AS I WALK THROUGH THE VALLEY OF THE SHADOW OF DOM: @davearel WEB COMPONENTS
26. As I Walk Through The Valley Of The Shadow Of DOM @davearel
27. http://www.w3.org/TR/NOTE-HTMLComponents
28. As I Walk Through The Valley Of The Shadow Of DOM @davearel .htc
29. As I Walk Through The Valley Of The Shadow Of DOM @davearel The Abstract ! The growth of HTML with scripting as an application platform has exploded recently. One limiting factor of this growth is that there is no way to formalize the services that an HTML application can provide, or to allow them to be reused as components in another HTML page or application. HTML Components address this shortcoming; an HTML Component (HTC for short) provides a mechanism for reusable encapsulation of a component implemented in HTML, stylesheets and script.
30. As I Walk Through The Valley Of The Shadow Of DOM @davearel Componentization is a powerful paradigm that allows component users to build applications using 'building blocks' of functionality without having to implement those building blocks themselves, or necessarily understand how the building works in fine detail. This method makes building complex applications easier by breaking them down into more manageable chunks and allowing the building blocks to be reused in other applications. HTML Components brings this powerful development method to Web applications.
31. As I Walk Through The Valley Of The Shadow Of DOM @davearel 59% Of Adults Did Not Use The Internet
34. jQuery Plugins
35. As I Walk Through The Valley Of The Shadow Of DOM @davearel
36. As I Walk Through The Valley Of The Shadow Of DOM @davearel
37. As I Walk Through The Valley Of The Shadow Of DOM @davearel
38. As I Walk Through The Valley Of The Shadow Of DOM @davearel con CAT enated
39. As I Walk Through The Valley Of The Shadow Of DOM @davearel
40. As I Walk Through The Valley Of The Shadow Of DOM @davearel Components should live in our apps harmoniously Composed of markup, styles, scripts
47. Web Components • Semantics! • Custom API! • Encapsulation / Composition
48. Decoupled Mini Applications
52. Testing / Debugging
55. “Tools, libraries, and frameworks should improve upon the core language at hand. It should not supplement it. The language should be held responsible.” Dave Arel, September 12th 2014
56. Web Components • Custom Elements! • HTML Templates! • Shadow DOM! • HTML Imports
57. Custom Elements Create new or extend existing DOM elements
58. As I Walk Through The Valley Of The Shadow Of DOM @davearel
59. As I Walk Through The Valley Of The Shadow Of DOM @davearel
60. As I Walk Through The Valley Of The Shadow Of DOM @davearel
61. HTML Templates Define reusable html for a component
62. As I Walk Through The Valley Of The Shadow Of DOM @davearel
63. As I Walk Through The Valley Of The Shadow Of DOM @davearel
64. As I Walk Through The Valley Of The Shadow Of DOM @davearel
65. As I Walk Through The Valley Of The Shadow Of DOM @davearel
66. HTML Imports Include reusable HTML (and CSS, JavaScript)
67. As I Walk Through The Valley Of The Shadow Of DOM @davearel
68. Shadow DOM DOM and Style encapsulation
69. As I Walk Through The Valley Of The Shadow Of DOM @davearel
70. As I Walk Through The Valley Of The Shadow Of DOM @davearel
71. As I Walk Through The Valley Of The Shadow Of DOM @davearel
72. As I Walk Through The Valley Of The Shadow Of DOM @davearel
73. As I Walk Through The Valley Of The Shadow Of DOM @davearel
74. As I Walk Through The Valley Of The Shadow Of DOM @davearel
75. Issues
76. As I Walk Through The Valley Of The Shadow Of DOM @davearel http://jonrimmer.github.io/are-we-componentized-yet/
77. Tomorrow! Rob Dodson, “Multi-device apps with Web Components”
78. As I Walk Through The Valley Of The Shadow Of DOM @davearel Go Build Web Components! @davearel