Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 30 day trial from Scribd
Web components and Angular @ GDG - Toulouse (23/02/2017)
- 1. 1 Web Components & Angular GDG Toulouse – 23/02/2017 Amadou Sall
- 2. 2 Who am I ? Hybrid Mobile App Developer Web Application Developer ahasall ahasall ahasall www.ahasall.net
- 3. 3 The problems of the today One solution Angular and Web Components Content Overview
- 4. 4 4 problems The Problems of The Web of Today
- 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 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 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 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 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 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 The solution: Web Components
- 12. 12 How they solve the problems ? Web Components
- 13. 13 Web Components : The Specifications HTML Template Custom Elements HTML Imports Shadow DOM
- 14. 14 Templates <template id="template"> Put your markup here </template>
- 15. 15 Template Nothing runs or renders until cloned Inert Easy to clone No XSS vulnerabilities DOM Element
- 16. 16 4 problems DEMO: HTML Template
- 17. 17 Custom Elements <my-custom-element> Put your markup here </my-custom-element>
- 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 Custom Elements : Defining the content Hides away implementation details Shadow DOM Placeholder for structuring a custom element Template
- 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 Instanciating a Custom Element Markup <my-element></my-element>
- 22. 22 Instanciating a Custom Element let e = document.createElement('my-element'); document.body.appendChild(e); createElement
- 23. 23 Instanciating a Custom Element new let myElement = new MyElement(); document.body.appendChild(myElement);
- 24. 24 4 problems DEMO: Custom Element
- 25. 25 <my-custom-element> #shadow-root (user-agent) Content ends up there </my-custom-element> Shadow DOM
- 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 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 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 4 problems DEMO: Shadow DOM for a Custom Element
- 30. 30 HTML Imports <link rel="import" href="my-component.html">
- 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 Accessing the Import Content let content = document.querySelector('#import').import;
- 33. 33 How to start building the web of the future ? Where Does Angular Fits in This Paradigm?
- 34. 34 Web Components Today
- 35. 35 Problem Solved by AngularJS Interpolation Data binding Template Simple way to define components Undescriptive Markup
- 36. 36 Problem not Solved by AngularJS No DOM EncapsulationStyle Conflicts
- 37. 37 1
- 38. 38 Make the Most of Web Components Polymer
- 39. 39 Angular Tried Polymer…
- 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 Angular Component The Logic A class HTML Markup Directives A template How to tie the class and the template together ? Metadata
- 42. 42 Lifecycle Hooks attachedCallback ? ngOnInit attributeChangedCallback ? ngOnChanges disconnectedCallback ? ngDestroy
- 43. 43 4 problems DEMO: View Encapsulation
- 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 2
- 46. 46 Thanks You GDG Toulouse – 23/02/2017 Amadou Sall
- 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