The document discusses building web applications using a components approach. It introduces web components as a way to build reusable UI elements with encapsulated styles and behavior. The key technologies that make up web components are custom elements, templates, shadow DOM, and HTML imports. Popular libraries like Polymer, X-Tag, and Bosonic use these technologies to build reusable web components. The document also discusses organizing components using atomic design principles and strategies for conditionally loading templates and bundling components.

1. Components Approach to
Building Web Apps
Vinci Rufus
@areai51

2. 2
Our Approach to
Web App Development
is
‘Broken’

3. 3
LevelofFrustration
Frontend
Development
Backend
Development
Integrating
Frontend & Backend
Fixing
UI defects

4. 4
Apps
are
A Collection of Components.
(many of which are re-useable)

5. 5

6. 6
Concept of Components isn’t new
Dojo Toolkit
jQuery
Plugins
YUI
View
Component
JSP
Custom
Tags
AngularJS
Directives
Web
Components

7. 7

8. 8
Index.html name-tag.html

9. 9
The 4 Technologies that make up Web Components
Custom Elements
Templates Shadow DOM
HTML Imports

10. 10
Popular Libraries
Polymer X-Tag Bosonic
- uses all 4 technologies
- opinionated
- declarative
- adds thin layer of
features
- from Mozilla
- only Custom Elements
- supports IE9+
- transpiler
- converts to JS & CSS
- supports IE9+

11. 11
HTML
Import
Custom
Element
Template
Shadow DOM

12. 14

13. 15
Shadow DOM
CSS
• Style Encapsulation!!!
• Use :: shadow pseudo element or /deep/ combinator to style
shadowDOM elements from outside.
JavaScript
• JavaScript continues to be scoped globally
• Events from within ShadowDOM are retargetted internally

14. 16
The questions everybody is dying
to ask??

15. 17
Browser Support??
Thou must use Polyfills
#webcomponents.js
#NotVeryGreat
OPERA

16. 18
Browser Support with Polyfills (as advertised)

17. 19
Polyfills
is not a magic wand

18. 20
Polyfill woes
• Polyfills are heavy at about 100+ KB minified.
• Not Everything is supported easily and efficiently supported.
Shadow DOM => 85% of the webcomponnets.js code
• webcomponents-lite.js (Custom Elements & HTML Imports)
• Conditionally Load polyfills

19. 21
Staying sane

20. 22
Atomic Design Systems
– Brad Frost

21. 23
<core-ajax>
<core-icon icon="menu”>
<core-icon icon=”home”>
<paper-slider>
<core-toolbar>
<core-header-panel>
Atoms Molecules

22. 24
Organisms Templates
<core-drawer-panel>
<core-header-panel>
<paper-fab>
<product-details>
<product-listing>

23. 25
Using Web Components
in an app

24. 26
ShadowDOM is a double edged sword.

25. 27
Using a Master file and extending it master.html
product-listing.html

26. 28
Conditionally loading templates

27. 29
HTTP requests OMG!!!!
Vulcanize
npm install -g vulcanize
vulcanize my-elements.html > build.html

28. 30
The real power is in creating,
sharing and building your own
custom Web Components Library

29. 31
How do you Introduce Web
Components into your Project?
Component by Component!!
@areai51