Polymer - Una bella historia de amor

Charla para el DevFest de Córdoba 2016 sobre Polymer

Transcript

1. Polymer Una bella historia de amor +Israel Blancas @iblancasa
2. Israel Blancas @iblancasa Software Engineer at Real-Time Innovations Google Developer Group organizer
3. Mejor tarde que nunca
8. Web Components are low-level primitives that let you define your own HTML Elements.
9. Template Shadow DOM Custom Elements HTML Imports native client-side templating scoping, composition define new HTML/DOM loading web components
10. Primitives are designed so we can build libraries on top of them.
11. So what is Polymer?
12. Polymer is not a framework
13. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
14. Polymer is not a framework Sure?
15. Over 3M pages
22. Let’s build an element! Image by Gloria Viganò for the Noun Project
23. Hey user! Something awesome happened!
24. x Hey user! Something awesome happened! <alert-banner>
25. 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”>
26. 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
27. 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
28. 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”>
29. Shadow DOM
30. Shadow DOM || “Shady DOM”
31. Shadow DOM || “Shady DOM” == Local DOM
32. 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”>
33. 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
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”> Define your prototype
35. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/>
36. Hey user! Something awesome happened!
37. 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
38. 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!
39. Light DOM - The world outside your component’s Local DOM
40. 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
41. </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>
42. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner>
43. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> Matching class
44. Success! Your first component!
45. Elements Building blocks for a better web
46. There’s an element for that!
47. https://beta.webcomponents.org /collection/Polymer/elements
48. Applications Combining elements into something great
49. Create or reuse elements in any app
50. Production-ising Apps
51. Build process out of the box
53. GDG Granada
54. polymer-project.org
55. Muchas gracias ¿Preguntas? +Israel Blancas @iblancasa