Polymer - El fin a tus problemas con el FrontEnd

Presentación para el Google Developer Group DevFest 2016 de Granada sobre Polymer

Transcript

1. Polymer el fin a tus problemas con el front-end +Israel Blancas @iblancasa #DevFestGRX GDG Granada
2. #DevFestGRX GDG Granada
3. #DevFestGRX GDG Granada
4. #DevFestGRX GDG Granada
5. Web Components are low-level primitives that let you define your own HTML Elements. #DevFestGRX GDG Granada
6. Template Shadow DOM Custom Elements HTML Imports native client-side templating scoping, composition define new HTML/DOM loading web components #DevFestGRX GDG Granada
7. Primitives are designed so we can build libraries on top of them. #DevFestGRX GDG Granada
8. So what is Polymer? #DevFestGRX GDG Granada
9. Polymer is not a framework #DevFestGRX GDG Granada
10. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not) #DevFestGRX GDG Granada
11. Polymer is not a framework Sure? #DevFestGRX GDG Granada
12. Over 3M pages #DevFestGRX GDG Granada
13. #DevFestGRX GDG Granada
14. #DevFestGRX GDG Granada
15. #DevFestGRX GDG Granada
16. #DevFestGRX GDG Granada
17. #DevFestGRX GDG Granada
18. #DevFestGRX GDG Granada
19. Let’s build an element! Image by Gloria Viganò for the Noun Project #DevFestGRX GDG Granada
20. Hey user! Something awesome happened! #DevFestGRX GDG Granada
21. x Hey user! Something awesome happened! <alert-banner> #DevFestGRX GDG Granada
22. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> #DevFestGRX GDG Granada
23. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Import all of your dependencies #DevFestGRX GDG Granada
24. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> A container for your element definition #DevFestGRX GDG Granada
25. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> Local DOM is the DOM an elements is in charge of creating and managing <link rel=“import” href=“../polymer/polymer.html”> #DevFestGRX GDG Granada
26. Shadow DOM #DevFestGRX GDG Granada
27. Shadow DOM || “Shady DOM” #DevFestGRX GDG Granada
28. Shadow DOM || “Shady DOM” == Local DOM #DevFestGRX GDG Granada
29. alert-banner.html <dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> Local DOM is the DOM an elements is in charge of creating and managing <link rel=“import” href=“../polymer/polymer.html”> #DevFestGRX GDG Granada
30. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color: white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Hey user! Something awesome happ Hey user! Something awesome happ #DevFestGRX GDG Granada
31. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color: white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Define your prototype #DevFestGRX GDG Granada
32. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/> #DevFestGRX GDG Granada
33. Hey user! Something awesome happened! #DevFestGRX GDG Granada
34. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color: white; } </style> <div class=“alert”> Hey user! Something awesome happened! </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> Replace hard-coded data #DevFestGRX GDG Granada
35. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color: white; } </style> <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module> <link rel=“import” href=“../polymer/polymer.html”> With content elements! #DevFestGRX GDG Granada
36. Light DOM - The world outside your component’s Local DOM #DevFestGRX GDG Granada
37. alert-banner.html <dom-module id=“alert-banner"> <template> <style> .alert { background: blue; color: white; } </style> <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> <link rel=“import” href=“../polymer/polymer.html”> Select content with CSS selectors #DevFestGRX GDG Granada
38. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/> <p>Lorem ipsum dolor sit amet…</p> #DevFestGRX GDG Granada
39. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> #DevFestGRX GDG Granada
40. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> Matching class #DevFestGRX GDG Granada
41. Success! Your first component! #DevFestGRX GDG Granada
42. Elements Building blocks for a better web #DevFestGRX GDG Granada
43. There’s an element for that!
44. https://beta.webcomponents.org /collection/Polymer/elements #DevFestGRX GDG Granada
45. Applications Combining elements into something great #DevFestGRX GDG Granada
46. Create or reuse elements in any app #DevFestGRX GDG Granada
47. #DevFestGRX GDG Granada
48. App-wide Theming #303f9f CSS custom properties --dark-primary-color --light-primary-color --accent-color --primary-text-color #303f9f --dark-primary-color --light-primary-color --accent-color --primary-text-color #DevFestGRX GDG Granada
49. Production-ising Apps #DevFestGRX GDG Granada
50. Build process out of the box #DevFestGRX GDG Granada
51. #DevFestGRX GDG Granada
52. #DevFestGRX GDG Granada GDG Granada
53. polymer-project.org #DevFestGRX GDG Granada
54. Muchas gracias ¿Preguntas? +Israel Blancas @iblancasa #DevFestGRX GDG Granada