Charla para el DevFest de Córdoba 2016 sobre Polymer
PolymerUna bella historia de amor+Israel Blancas@iblancasa
View Slide
Israel Blancas@iblancasaSoftware Engineer at Real-Time InnovationsGoogle Developer Group organizer
Mejor tarde que nunca
Web Components are low-levelprimitives that let you defineyour own HTML Elements.
TemplateShadow DOMCustom ElementsHTML Importsnative client-side templatingscoping, compositiondefine new HTML/DOMloading web components
Primitives are designed so we canbuild libraries on top of them.
So what is Polymer?
Polymer is nota framework
Existing FrameworksApplicationsWeb PlatformWeb Components built with Polymer (or not)
Polymer is nota frameworkSure?
Over 3M pages
Let’s buildan element!Image by Gloria Viganò for the Noun Project
Hey user! Something awesome happened!
xHey user! Something awesome happened!
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Import all of yourdependencies
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>A container for yourelement definition
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Local DOM is the DOMan elements is in charge ofcreating and managing
Shadow DOM
Shadow DOM || “Shady DOM”
Shadow DOM || “Shady DOM” == Local DOM
alert-banner.html<br/>.alert { background: blue; color: white; }<br/>Hey user! Something awesome happened!<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Hey user! Something awesome happHey user! Something awesome happ
alert-banner.html<br/>.alert { background: blue; color: white; }<br/>Hey user! Something awesome happened!<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Define yourprototype
Polymer!
alert-banner.html<br/>.alert { background: blue; color: white; }<br/>Hey user! Something awesome happened!<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Replace hard-coded data
alert-banner.html<br/>.alert { background: blue; color: white; }<br/><br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>With content elements!
Light DOM - The world outsideyour component’s Local DOM
alert-banner.html<br/>.alert { background: blue; color: white; }<br/><br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Select content withCSS selectors
Polymer!Lorem ipsum dolor sit amet…
Polymer!Success! Your first component!
Polymer!Success! Your first component!Matching class
Success! Your first component!
ElementsBuilding blocks for a better web
There’s an element for that!
https://beta.webcomponents.org/collection/Polymer/elements
ApplicationsCombining elements into something great
Create or reuse elements in any app
Production-ising Apps
Build process out of the box
GDG Granada
polymer-project.org
Muchas gracias¿Preguntas?+Israel Blancas@iblancasa