polymer - el fin a tus problemas con el frontend
TRANSCRIPT
Polymerel fin a tus problemas con el front-end
+Israel Blancas@iblancasa
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
Web Components are low-level primitives that let you define your own HTML Elements.
#DevFestGRX
GDG Granada
Template
Shadow DOM
Custom Elements
HTML Imports
native client-side templating
scoping, composition
define new HTML/DOM
loading web components
#DevFestGRX
GDG Granada
Primitives are designed so we can build libraries on top of them.
#DevFestGRX
GDG Granada
So what is Polymer?
#DevFestGRX
GDG Granada
Polymer is nota framework
#DevFestGRX
GDG Granada
Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
#DevFestGRX
GDG Granada
Polymer is nota framework
Sure?
#DevFestGRX
GDG Granada
Over 3M pages
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
Let’s buildan element!
Image by Gloria Viganò for the Noun Project
#DevFestGRX
GDG Granada
Hey user! Something awesome happened!
#DevFestGRX
GDG Granada
xHey user! Something awesome happened!
<alert-banner>
#DevFestGRX
GDG Granada
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
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 yourdependencies
#DevFestGRX
GDG Granada
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 yourelement definition
#DevFestGRX
GDG Granada
alert-banner.html
<dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script></dom-module>
Local DOM is the DOMan elements is in charge of creating and managing
<link rel=“import” href=“../polymer/polymer.html”>
#DevFestGRX
GDG Granada
Shadow DOM
#DevFestGRX
GDG Granada
Shadow DOM || “Shady DOM”
#DevFestGRX
GDG Granada
Shadow DOM || “Shady DOM” == Local DOM
#DevFestGRX
GDG Granada
alert-banner.html
<dom-module id=“alert-banner"> <template> </template> <script> Polymer({ is: ‘alert-banner' }); </script></dom-module>
Local DOM is the DOMan elements is in charge of creating and managing
<link rel=“import” href=“../polymer/polymer.html”>
#DevFestGRX
GDG Granada
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 happened! xHey user! Something awesome happened!
#DevFestGRX
GDG Granada
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 yourprototype
#DevFestGRX
GDG Granada
<body unresolved> <nav> <header> <ul> <li><a href="#">About us</a></li> <li><a href="#">Make a reservation</a></li> <li><a href="#">Contact</a></li> </ul> </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> </article> <article class="breaking-news"> <img src="breaking.jpg" alt="Important new images" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </article> </section> </main></body>
#DevFestGRX
GDG Granada
Hey user! Something awesome happened!
#DevFestGRX
GDG Granada
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
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
Light DOM - The world outsideyour component’s Local DOM
#DevFestGRX
GDG Granada
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”>
Select content withCSS selectors
#DevFestGRX
GDG Granada
<body unresolved> <nav> <header> <ul> <li><a href="#">About us</a></li> <li><a href="#">Make a reservation</a></li> <li><a href="#">Contact</a></li> </ul> </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> </article> <article class="breaking-news"> <img src="breaking.jpg" alt="Important new images" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </article> </section> </main></body>
#DevFestGRX
GDG Granada
<body unresolved> <nav> <header> <ul> <li><a href="#">About us</a></li> <li><a href="#">Make a reservation</a></li> <li><a href="#">Contact</a></li> </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/> <p>Lorem ipsum dolor sit amet…</p> </article> <article class="breaking-news"> <img src="breaking.jpg" alt="Important new images" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </article> </section> </main></body>
#DevFestGRX
GDG Granada
<body unresolved> <nav> <header> <ul> <li><a href="#">About us</a></li> <li><a href="#">Make a reservation</a></li> <li><a href="#">Contact</a></li> </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/> <p>Lorem ipsum dolor sit amet…</p> </article> <article class="breaking-news"> <img src="breaking.jpg" alt="Important new images" /> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> </article> </section> </main></body>
Matching class
#DevFestGRX
GDG Granada
Success! Your first component!
#DevFestGRX
GDG Granada
ElementsBuilding blocks for a better web
#DevFestGRX
GDG Granada
There’s an element for that!
https://beta.webcomponents.org/collection/Polymer/elements
#DevFestGRX
GDG Granada
ApplicationsCombining elements into something great
#DevFestGRX
GDG Granada
Create or reuse elements in any app
#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
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
Production-ising Apps
#DevFestGRX
GDG Granada
Build process out of the box#DevFestGRX
GDG Granada
#DevFestGRX
GDG Granada
#DevFestGRX
GDG GranadaGDG Granada
polymer-project.org
#DevFestGRX
GDG Granada
Muchas gracias¿Preguntas?
+Israel Blancas@iblancasa
#DevFestGRX
GDG Granada