Polymer - El fin a tus problemas con el FrontEnd
•
0 gefällt mir•161 views
This document discusses Polymer and web components. It explains that Polymer uses web components to allow defining custom HTML elements. It provides an example of creating a simple custom alert banner element with Polymer that can be reused. The document also discusses how elements can be combined into applications and some features of Polymer like app-wide theming and its build process.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Polymer - El fin a tus problemas con el FrontEnd
Ähnlich wie Polymer - El fin a tus problemas con el FrontEnd (20)
Mehr von Israel Blancas
Mehr von Israel Blancas (10)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Polymer - El fin a tus problemas con el FrontEnd
- 1. Polymer el fin a tus problemas con el front-end +Israel Blancas @iblancasa #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
- 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
- 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 happHey 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!
- 45. Applications Combining elements into something great #DevFestGRX GDG Granada
- 46. Create or reuse elements in any app #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
- 50. Build process out of the box #DevFestGRX GDG Granada