Web components and Angular @ GDG - Toulouse (23/02/2017)
-
Upload
amadou-sall -
Category
Software
-
view
90 -
download
0
Transcript of Web components and Angular @ GDG - Toulouse (23/02/2017)
![Page 1: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/1.jpg)
1
Web Components & AngularGDG Toulouse – 23/02/2017
Amadou Sall
![Page 2: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/2.jpg)
2Who am I ?
Hybrid Mobile App DeveloperWeb Application Developer
ahasall
ahasall
ahasall
www.ahasall.net
![Page 3: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/3.jpg)
3
The problems of the today One solution Angular and Web Components
Content Overview
![Page 4: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/4.jpg)
4
4 pro b l e ms
The Problems of The Web of Today
![Page 5: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/5.jpg)
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
![Page 6: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/6.jpg)
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>
![Page 7: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/7.jpg)
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
![Page 8: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/8.jpg)
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
![Page 9: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/9.jpg)
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
![Page 10: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/10.jpg)
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>
![Page 11: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/11.jpg)
11The solution: Web Components
![Page 12: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/12.jpg)
12
Ho w t h e y so l v e t h e p ro b l e ms ?
Web Components
![Page 13: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/13.jpg)
13Web Components : The Specifications
HTMLTemplate
Custom Elements
HTMLImports
ShadowDOM
![Page 14: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/14.jpg)
14
Templates
<template id="template">Put your markup here
</template>
![Page 15: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/15.jpg)
15Template
Nothing runs or rendersuntil cloned
Inert
Easy to cloneNo XSS vulnerabilities
DOM Element
![Page 16: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/16.jpg)
16
4 pro b l e ms
DEMO:HTML Template
![Page 17: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/17.jpg)
17
Custom Elements
<my-custom-element>Put your markup here
</my-custom-element>
![Page 18: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/18.jpg)
18Custom Elements
Define the element JavaScript API
Define Your Own HTML Element
Native HTML elementOther developers elements
Extend Existing Elements
![Page 19: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/19.jpg)
19Custom Elements : Defining the content
Hides away implementation details
Shadow DOM
Placeholder for structuring a custom element
Template
![Page 20: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/20.jpg)
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
![Page 21: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/21.jpg)
21Instanciating a Custom Element
Markup
<my-element></my-element>
![Page 22: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/22.jpg)
22Instanciating a Custom Element
let e = document.createElement('my-element');document.body.appendChild(e);
createElement
![Page 23: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/23.jpg)
23Instanciating a Custom Element
new
let myElement = new MyElement();document.body.appendChild(myElement);
![Page 24: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/24.jpg)
24
4 pro b l e ms
DEMO:Custom Element
![Page 25: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/25.jpg)
25
<my-custom-element>#shadow-root (user-agent)Content ends up there
</my-custom-element>
Shadow DOM
![Page 26: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/26.jpg)
26Shadow DOM
document.querySelector() won't return nodes situed in the shadow
DOM
Isolated DOM
Nothing leaks outNothing bleeds in
Scoped CSS
![Page 27: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/27.jpg)
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
![Page 28: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/28.jpg)
28Creating a shadow DOM
let host = document.querySelector('#host');const shadowRoot = host.attachShadow({mode : 'open'});shadowRoot.innerHTML = `<h1>I am in the shadows</h1>`;
![Page 29: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/29.jpg)
29
4 pro b l e ms
DEMO:Shadow DOM for a Custom Element
![Page 30: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/30.jpg)
30
HTML Imports
<link rel="import" href="my-component.html">
![Page 31: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/31.jpg)
31HTML Imports
Link must sit in <head>
HTML is inert
CSS and JavaScript runs directly
<link rel="import" href="import/location.html">
![Page 32: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/32.jpg)
32Accessing the Import Content
let content = document.querySelector('#import').import;
![Page 33: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/33.jpg)
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?
![Page 34: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/34.jpg)
34Web Components Today
![Page 35: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/35.jpg)
35Problem Solved by AngularJS
InterpolationData binding
Template
Simple way to define components
Undescriptive Markup
![Page 36: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/36.jpg)
36Problem not Solved by AngularJS
No DOM EncapsulationStyle Conflicts
![Page 37: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/37.jpg)
37
1
![Page 38: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/38.jpg)
38Make the Most of Web Components
Polymer
![Page 39: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/39.jpg)
39Angular Tried Polymer…
![Page 40: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/40.jpg)
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
![Page 41: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/41.jpg)
41Angular Component
The Logic
A class
HTML MarkupDirectives
A template
How to tie the class and the template together ?
Metadata
![Page 42: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/42.jpg)
42Lifecycle Hooks
attachedCallback ?
ngOnInit
attributeChangedCallback ?
ngOnChanges
disconnectedCallback ?
ngDestroy
![Page 43: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/43.jpg)
43
4 pro b l e ms
DEMO:View Encapsulation
![Page 44: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/44.jpg)
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
![Page 45: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/45.jpg)
45
2
![Page 46: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/46.jpg)
46
Thanks YouGDG Toulouse – 23/02/2017
Amadou Sall
![Page 47: Web components and Angular @ GDG - Toulouse (23/02/2017)](https://reader034.fdocuments.in/reader034/viewer/2022052706/58f057031a28ab10078b45fd/html5/thumbnails/47.jpg)
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