Components Approach to building Web Apps
-
Upload
vinci-rufus -
Category
Internet
-
view
75 -
download
0
Transcript of Components Approach to building Web Apps
3
Le
ve
l o
f F
rustr
atio
n
Frontend
Development
Backend
Development
Integrating
Frontend & Backend
Fixing
UI defects
6
Concept of Components isn’t new
Dojo Toolkit
jQueryPlugins
YUIView
Component
JSP
Custom
Tags
AngularJS
Directives
Web Components
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+
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
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
23
<core-ajax>
<core-icon icon="menu”>
<core-icon icon=”home”>
<paper-slider>
<core-toolbar>
<core-header-panel>
Atoms Molecules
24
Organisms Templates<core-drawer-panel>
<core-header-panel>
<paper-fab>
<product-details>
<product-listing>