1. Web Components Polymer

2. Agenda

3. I want bootstrap : 3 Today

4. 4 We want components !

5. widgets frameworks pluggins Reusable Encapsulatable Etendable Composable We want Blackboxes !  Web components 5 Why components ?

6. 4 specifications Import html Shadow Dom template Custom Element The four parts of Web Components are designed to work together, but you can also pick and choose which parts of Web Components to use. 6 What is it ?

7. include HTML documents in other HTML documents You're not limited to markup either. An import can also include CSS, JavaScript, or anything else an.html file can contain. In other words, this makes imports a fantastic tool for loading related HTML/CSS/JS. 7 HTML IMPORT

8. How ? To load content from another domain, the import location needs to be CORS-enabled The browser's network stack automatically de-dupes all requests from the same URL. This means that imports that reference the same URL are only retrieved once Do not block the parsing of the page 8 HTML IMPORT

9. Jump to content HTML and CSS elements are loaded but not inserted (available). It is accessed via the import property 9 HTML IMPORT

10. Javascript Executed in the context of the page Access to the DOM...... And that of the page 10 HTML IMPORT

11. 11 SUPPORT : HTML IMPORT

12. Shadow DOM addresses the DOM tree encapsulation problem. ENCAPSULATION –insulated container –New node type –shadow root –shadow host 12 SHADOW DOM

13. Javascript –createShadowRoot –element.shadowRoot Instead of Your page looks like 13 SHADOW DOM

14. SHADOW DOM VS LIGHT DOM –visible subtree (childNodes, children, innerHTML...) –internal node –Composed DOM: what the browser sees and makes 14 SHADOW DOM

15. INSERTS POINTS : the content ! –Define zones in the shadow render Dom –No logical connection 15 SHADOW DOM

16. 16 SHADOW DOM : SUPPORT

17. What is it ? DOM Models reusable 17 TEMPLATE

18. NOT IN DOCUMENT ! No side effect: DOM not returned uninterpreted script not loaded image Templates allow you to declare fragments of markup which are parsed as HTML, go unused at page load, but can be instantiated later on at runtime. 18 TEMPLATE

19. Usage –Recovery selector –Access to content: content –clone: becomes alive –insertion of clone 19 TEMPLATE

20. 20 TEMPLATE SUPPORT

21. There's nothing modern about soup. Help us custom elements. You're our only hope! Define new types of HTML element ! Extend existing elements One functionality within a "tag“ Extend the API of existing DOM elements 21 CUSTOM ELEMENT

22. How ? –registerElement –name (with -) –proto (HTMLElement default) 22 CUSTOM ELEMENT

23. EXTEND EXISTING ELEMENT 23 CUSTOM ELEMENT

24. 24 CUSTOM ELEMENT SUPPORT ….

25. SUPPORT too weak ……. Solutions : 25 It looks great BUT..

26. polyfills (platform.js) components (core-elements, paper-elements) sugaring (polymer.js) 26 POLYMER

27. Web Components Polyfills (custom element et HTMLImports) X-Tag Custom Elements X-Tag Core Library 27 X-TAG

28. 28 Demo

29. Ressources Import Shadow Dom Styling Shadow Dom Template Custom Elements The Web Component Ecosystem Polymer X-Tag Material Design Meetup Webcomponents @ParisMeetup Webcomponents Credits: Eric Bidelman,Rob Dodson, Dominic Cooney, Cyril Balit 29

30. After credits scene !! 30 http://www.binpress.com/blog/2014/06/26/polymer-vs-angular/