web components and angular @ gdg - toulouse (23/02/2017)
Post on 14-Apr-2017
90 Views
Preview:
TRANSCRIPT
1
Web Components & AngularGDG Toulouse – 23/02/2017
Amadou Sall
2Who am I ?
Hybrid Mobile App DeveloperWeb Application Developer
ahasall
ahasall
ahasall
www.ahasall.net
3
The problems of the today One solution Angular and Web Components
Content Overview
4
4 pro b l e ms
The Problems of The Web of Today
5
Problem
3
No CSS Scoping/Encapsulation
Problem
4
No Native Bundling System
Problem
1
No Native Templating System
Problem
2
Undescriptive /Inextensible HTML
The Problems of The Web of Today
6No Native Templating System
Problem
1
No Native Templating System
Importing some JavaScript on a page is easy
Importing some CSS on a page is easy
<style><script>
7No Native Templating System
Problem
1
No Native Templating System
Importing some HTML is more difficult
+ Simple+ Inert- Content not parsed (XSS vulnerabilities)
+ Easy to clone- Not inert
HTML as a script tag Hidden DOM element
8Undescriptive/Inextensible HTML
GenericNo semantic
Problem
2
Undescriptive /Inextensible HTML
Limited native elementsNo way to extends themNo way to create ours
Undescriptive Markup Inextensible HTML
9No CSS Scoping/Encapsulation
There is no way to encapsulate CSS
Naming ConflictsInheritance conflicts
Use of !important to force styles
Problem
3
No CSS Scoping/Encapsulation
CSS Selectors are Global CSS Specificity
10No Native Bundling System
How to bundle some HTML, CSS and JS together ?
Problem
4
No Native Bundling System
<link href="bootstrap.min.css" rel="stylesheet"><script src="jquery.min.js"></script><script src="bootstrap.min.js"></script>
11The solution: Web Components
12
Ho w t h e y so l v e t h e p ro b l e ms ?
Web Components
13Web Components : The Specifications
HTMLTemplate
Custom Elements
HTMLImports
ShadowDOM
14
Templates
<template id="template">Put your markup here
</template>
15Template
Nothing runs or rendersuntil cloned
Inert
Easy to cloneNo XSS vulnerabilities
DOM Element
16
4 pro b l e ms
DEMO:HTML Template
17
Custom Elements
<my-custom-element>Put your markup here
</my-custom-element>
18Custom Elements
Define the element JavaScript API
Define Your Own HTML Element
Native HTML elementOther developers elements
Extend Existing Elements
19Custom Elements : Defining the content
Hides away implementation details
Shadow DOM
Placeholder for structuring a custom element
Template
20Custom Elements : Lifecycle Callbacks
When the element iscreated
constructor
When the element isinserted into the DOM
connectedCallback
The element is removedfrom the DOM
disconnectedCallback
When the element ismoved into another
document
adoptedCallback
When an observedattribute is changed
attributeChangedCallback
21Instanciating a Custom Element
Markup
<my-element></my-element>
22Instanciating a Custom Element
let e = document.createElement('my-element');document.body.appendChild(e);
createElement
23Instanciating a Custom Element
new
let myElement = new MyElement();document.body.appendChild(myElement);
24
4 pro b l e ms
DEMO:Custom Element
25
<my-custom-element>#shadow-root (user-agent)Content ends up there
</my-custom-element>
Shadow DOM
26Shadow DOM
document.querySelector() won't return nodes situed in the shadow
DOM
Isolated DOM
Nothing leaks outNothing bleeds in
Scoped CSS
27DOM vs Shadow DOM
Two main differences• Creation
• Behaviour
1. Create DOM nodes2. AppendChild
DOM
1. Create a scoped DOM tree2. Attach it to an element
Shadow DOM
Shadow host Shadow tree
28Creating a shadow DOM
let host = document.querySelector('#host');const shadowRoot = host.attachShadow({mode : 'open'});shadowRoot.innerHTML = `<h1>I am in the shadows</h1>`;
29
4 pro b l e ms
DEMO:Shadow DOM for a Custom Element
30
HTML Imports
<link rel="import" href="my-component.html">
31HTML Imports
Link must sit in <head>
HTML is inert
CSS and JavaScript runs directly
<link rel="import" href="import/location.html">
32Accessing the Import Content
let content = document.querySelector('#import').import;
33
Ho w t o s t a r t bu i l d in g t h e w e b o f t h e fu t u re ?
Where Does Angular Fits in This Paradigm?
34Web Components Today
35Problem Solved by AngularJS
InterpolationData binding
Template
Simple way to define components
Undescriptive Markup
36Problem not Solved by AngularJS
No DOM EncapsulationStyle Conflicts
37
1
38Make the Most of Web Components
Polymer
39Angular Tried Polymer…
40…not The Same Objectives
Server-side renderingNative rendering engine for mobile
Many more
Angular Has Other Objectives
Ads vs Google Chrome
Applications vs Components
41Angular Component
The Logic
A class
HTML MarkupDirectives
A template
How to tie the class and the template together ?
Metadata
42Lifecycle Hooks
attachedCallback ?
ngOnInit
attributeChangedCallback ?
ngOnChanges
disconnectedCallback ?
ngDestroy
43
4 pro b l e ms
DEMO:View Encapsulation
44View Encapsulation
Angular adds the CSS to the global styles
None
Angular processes and rename the CSS code
Emulated
Angular uses the browser's native shadow DOM
implementation
Native
45
2
46
Thanks YouGDG Toulouse – 23/02/2017
Amadou Sall
47Useful Resources
• https://customelements.io/
• https://www.webcomponents.org/
• https://developers.google.com/web/fundamentals/getting-started/primers/customelements
• https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom
• https://app.pluralsight.com/library/courses/web-components-shadow-dom/table-of-contents
top related