Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
1 Web Components & Angular GDG Toulouse – 23/02/2017 Amadou Sall
2 Who am I ? Hybrid Mobile App Developer Web Application Developer ahasall ahasall ahasall www.ahasall.net
3 The problems of the today One solution Angular and Web Components Content Overview
4 4 problems 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...
6 No Native Templating System Problem 1 No Native Templating System Importing some JavaScript on a page is easy Importing ...
7 No Native Templating System Problem 1 No Native Templating System Importing some HTML is more difficult + Simple + Inert...
8 Undescriptive/Inextensible HTML Generic No semantic Problem 2 Undescriptive /Inextensible HTML Limited native elements N...
9 No CSS Scoping/Encapsulation There is no way to encapsulate CSS Naming Conflicts Inheritance conflicts Use of !important...
10 No Native Bundling System How to bundle some HTML, CSS and JS together ? Problem 4 No Native Bundling System <link href...
11 The solution: Web Components
12 How they solve the problems ? Web Components
13 Web Components : The Specifications HTML Template Custom Elements HTML Imports Shadow DOM
14 Templates <template id="template"> Put your markup here </template>
15 Template Nothing runs or renders until cloned Inert Easy to clone No XSS vulnerabilities DOM Element
16 4 problems DEMO: HTML Template
17 Custom Elements <my-custom-element> Put your markup here </my-custom-element>
18 Custom Elements Define the element JavaScript API Define Your Own HTML Element Native HTML element Other developers ele...
19 Custom Elements : Defining the content Hides away implementation details Shadow DOM Placeholder for structuring a custo...
20 Custom Elements : Lifecycle Callbacks When the element is created constructor When the element is inserted into the DOM...
21 Instanciating a Custom Element Markup <my-element></my-element>
22 Instanciating a Custom Element let e = document.createElement('my-element'); document.body.appendChild(e); createElement
23 Instanciating a Custom Element new let myElement = new MyElement(); document.body.appendChild(myElement);
24 4 problems DEMO: Custom Element
25 <my-custom-element> #shadow-root (user-agent) Content ends up there </my-custom-element> Shadow DOM
26 Shadow DOM document.querySelector() won't return nodes situed in the shadow DOM Isolated DOM Nothing leaks out Nothing ...
27 DOM vs Shadow DOM Two main differences • Creation • Behaviour 1. Create DOM nodes 2. AppendChild DOM 1. Create a scoped...
28 Creating a shadow DOM let host = document.querySelector('#host'); const shadowRoot = host.attachShadow({mode : 'open'})...
29 4 problems DEMO: Shadow DOM for a Custom Element
30 HTML Imports <link rel="import" href="my-component.html">
31 HTML Imports Link must sit in <head> HTML is inert CSS and JavaScript runs directly <link rel="import" href="import/loc...
32 Accessing the Import Content let content = document.querySelector('#import').import;
33 How to start building the web of the future ? Where Does Angular Fits in This Paradigm?
34 Web Components Today
35 Problem Solved by AngularJS Interpolation Data binding Template Simple way to define components Undescriptive Markup
36 Problem not Solved by AngularJS No DOM EncapsulationStyle Conflicts
37 1
38 Make the Most of Web Components Polymer
39 Angular Tried Polymer…
40 …not The Same Objectives Server-side rendering Native rendering engine for mobile Many more Angular Has Other Objective...
41 Angular Component The Logic A class HTML Markup Directives A template How to tie the class and the template together ? ...
42 Lifecycle Hooks attachedCallback ? ngOnInit attributeChangedCallback ? ngOnChanges disconnectedCallback ? ngDestroy
43 4 problems DEMO: View Encapsulation
44 View Encapsulation Angular adds the CSS to the global styles None Angular processes and rename the CSS code Emulated An...
45 2
46 Thanks You GDG Toulouse – 23/02/2017 Amadou Sall
47 Useful Resources • https://customelements.io/ • https://www.webcomponents.org/ • https://developers.google.com/web/fund...
Upcoming SlideShare
Loading in …5
×

Web components and Angular @ GDG - Toulouse (23/02/2017)

382 views

Published on

Les Web Components sont un ensemble de quatre spécifications (Templates, Shadow DOM, Custom Elements, HTML imports). Ils nous permettent de résoudre beaucoup de problèmes du web traditionnel notamment les conflits de styles CSS et le manque d'expressivité des balises HTML.

Cependant leurs utilisations de façon brute dans le web d'aujourd'hui est un peu compliqué et rend l'adoption des Web Components lente.
Heureusement des frameworks comme Angular sont là pour nous aider à prendre de l'avance en nous fournissant des mécanismes nous permettant de développer des applications web respectant les spécifications des Web Components.

Dans ce talk, nous allons tout d'abord voir les problèmes posés par le web traditionnel.
Nous allons ensuite parler des spécifications des Web Components et comment elles aident à résoudre ces problèmes.
Nous finirons par voir la place de Angular dans ce nouveau paradigme

Published in: Software
no profile picture user

  • Be the first to comment

  • Be the first to like this

Web components and Angular @ GDG - Toulouse (23/02/2017)

  1. 1. 1 Web Components & Angular GDG Toulouse – 23/02/2017 Amadou Sall
  2. 2. 2 Who am I ? Hybrid Mobile App Developer Web Application Developer ahasall ahasall ahasall www.ahasall.net
  3. 3. 3 The problems of the today One solution Angular and Web Components Content Overview
  4. 4. 4 4 problems The Problems of The Web of Today
  5. 5. 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
  6. 6. 6 No 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>
  7. 7. 7 No 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
  8. 8. 8 Undescriptive/Inextensible HTML Generic No semantic Problem 2 Undescriptive /Inextensible HTML Limited native elements No way to extends them No way to create ours Undescriptive Markup Inextensible HTML
  9. 9. 9 No CSS Scoping/Encapsulation There is no way to encapsulate CSS Naming Conflicts Inheritance conflicts Use of !important to force styles Problem 3 No CSS Scoping/Encapsulation CSS Selectors are Global CSS Specificity
  10. 10. 10 No 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>
  11. 11. 11 The solution: Web Components
  12. 12. 12 How they solve the problems ? Web Components
  13. 13. 13 Web Components : The Specifications HTML Template Custom Elements HTML Imports Shadow DOM
  14. 14. 14 Templates <template id="template"> Put your markup here </template>
  15. 15. 15 Template Nothing runs or renders until cloned Inert Easy to clone No XSS vulnerabilities DOM Element
  16. 16. 16 4 problems DEMO: HTML Template
  17. 17. 17 Custom Elements <my-custom-element> Put your markup here </my-custom-element>
  18. 18. 18 Custom Elements Define the element JavaScript API Define Your Own HTML Element Native HTML element Other developers elements Extend Existing Elements
  19. 19. 19 Custom Elements : Defining the content Hides away implementation details Shadow DOM Placeholder for structuring a custom element Template
  20. 20. 20 Custom Elements : Lifecycle Callbacks When the element is created constructor When the element is inserted into the DOM connectedCallback The element is removed from the DOM disconnectedCallback When the element is moved into another document adoptedCallback When an observed attribute is changed attributeChangedCallback
  21. 21. 21 Instanciating a Custom Element Markup <my-element></my-element>
  22. 22. 22 Instanciating a Custom Element let e = document.createElement('my-element'); document.body.appendChild(e); createElement
  23. 23. 23 Instanciating a Custom Element new let myElement = new MyElement(); document.body.appendChild(myElement);
  24. 24. 24 4 problems DEMO: Custom Element
  25. 25. 25 <my-custom-element> #shadow-root (user-agent) Content ends up there </my-custom-element> Shadow DOM
  26. 26. 26 Shadow DOM document.querySelector() won't return nodes situed in the shadow DOM Isolated DOM Nothing leaks out Nothing bleeds in Scoped CSS
  27. 27. 27 DOM vs Shadow DOM Two main differences • Creation • Behaviour 1. Create DOM nodes 2. AppendChild DOM 1. Create a scoped DOM tree 2. Attach it to an element Shadow DOM Shadow host Shadow tree
  28. 28. 28 Creating a shadow DOM let host = document.querySelector('#host'); const shadowRoot = host.attachShadow({mode : 'open'}); shadowRoot.innerHTML = `<h1>I am in the shadows</h1>`;
  29. 29. 29 4 problems DEMO: Shadow DOM for a Custom Element
  30. 30. 30 HTML Imports <link rel="import" href="my-component.html">
  31. 31. 31 HTML Imports Link must sit in <head> HTML is inert CSS and JavaScript runs directly <link rel="import" href="import/location.html">
  32. 32. 32 Accessing the Import Content let content = document.querySelector('#import').import;
  33. 33. 33 How to start building the web of the future ? Where Does Angular Fits in This Paradigm?
  34. 34. 34 Web Components Today
  35. 35. 35 Problem Solved by AngularJS Interpolation Data binding Template Simple way to define components Undescriptive Markup
  36. 36. 36 Problem not Solved by AngularJS No DOM EncapsulationStyle Conflicts
  37. 37. 37 1
  38. 38. 38 Make the Most of Web Components Polymer
  39. 39. 39 Angular Tried Polymer…
  40. 40. 40 …not The Same Objectives Server-side rendering Native rendering engine for mobile Many more Angular Has Other Objectives Ads vs Google Chrome Applications vs Components
  41. 41. 41 Angular Component The Logic A class HTML Markup Directives A template How to tie the class and the template together ? Metadata
  42. 42. 42 Lifecycle Hooks attachedCallback ? ngOnInit attributeChangedCallback ? ngOnChanges disconnectedCallback ? ngDestroy
  43. 43. 43 4 problems DEMO: View Encapsulation
  44. 44. 44 View 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. 45. 45 2
  46. 46. 46 Thanks You GDG Toulouse – 23/02/2017 Amadou Sall
  47. 47. 47 Useful 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

×