Charla sobre Polymer para las Jornadas del Hacklab Almería 2016, celebradas en "El Ejido".
De 0 a Polymer+Israel Blancas@iblancasaGDG Granada
View Slide
Israel Blancas@iblancasaSoftware Engineer at Real-Time InnovationsGoogle Developer Group organizer
GDG Granada
ModularprogrammingGDG Granada
AsepticConsistentFlexibleProductionGDG Granada
Quality SpeedGDG Granada
Web Components are low-levelprimitives that let you defineyour own HTML Elements.GDG Granada
TemplateShadow DOMCustom ElementsHTML Importsnative client-side templatingscoping, compositiondefine new HTML/DOMloading web componentsGDG Granada
Primitives are designed so we canbuild libraries on top of them.GDG Granada
So what is Polymer?GDG Granada
Polymer is nota frameworkGDG Granada
Existing FrameworksApplicationsWeb PlatformWeb Components built with Polymer (or not)GDG Granada
Polymer is nota frameworkSure?GDG Granada
Over 3M pagesGDG Granada
Let’s buildan element!Image by Gloria Viganò for the Noun ProjectGDG Granada
Hey user! Something awesome happened!GDG Granada
GDG GranadaInstall the tools
GDG GranadaNodeJS and NPM
GDG Granadabower and polymer-clinpm install -g
xHey user! Something awesome happened!GDG Granada
polymer initGDG Granada
Select“element - A blank element template”GDG Granada
Element name: alert-bannerGDG Granada
Element name: alert-bannerBrief description of the element:Hacklab exampleGDG Granada
bower_componentsdemotestalert-banner.htmlbower.jsonindex.htmlREADME.mdGDG Granada
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>GDG Granada
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Import all of yourdependenciesGDG Granada
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>A container for yourelement definitionGDG Granada
alert-banner.html<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Local DOM is the DOMan elements is in charge ofcreating and managingGDG Granada
Shadow DOMGDG Granada
Shadow DOM || “Shady DOM”GDG Granada
Shadow DOM || “Shady DOM” == Local DOMGDG Granada
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 happGDG Granada
alert-banner.html<br/>.alert { background: blue; color: white; }<br/>Hey user! Something awesome happened!<br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Define yourprototypeGDG Granada
Polymer! GDG Granada
Hacklabsrc="bower_components/webcomponentsjs/webcomponents-lite.min.js">GDG Granada
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 dataGDG Granada
alert-banner.html<br/>.alert { background: blue; color: white; }<br/><br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>With content elements!GDG Granada
Light DOM - The world outsideyour component’s Local DOMGDG Granada
alert-banner.html<br/>.alert { background: blue; color: white; }<br/><br/>Polymer({<br/>is: ‘alert-banner'<br/>});<br/>Select content withCSS selectorsGDG Granada
Polymer!Lorem ipsum dolor sit amet…GDG Granada
Polymer!Success! Your first component!GDG Granada
Polymer!Success! Your first component!Matching classGDG Granada
Success! Your first component!GDG Granada
ElementsBuilding blocks for a better webGDG Granada
There’s an element for that!GDG Granada
https://beta.webcomponents.org/collection/Polymer/elementsGDG Granada
ApplicationsCombining elements into something greatGDG Granada
Create or reuse elements in any appGDG Granada
App-wide Theming#303f9fCSS custom properties--dark-primary-color--light-primary-color--accent-color--primary-text-color#303f9f--dark-primary-color--light-primary-color--accent-color--primary-text-colorGDG Granada
Production-ising AppsGDG Granada
Build process out of the boxGDG Granada
What are the Progressive Web Apps?
Progressive Web App uses modern webplatform capabilities to deliver an app-likeuser experience
Instant loadingFastPush notificationsAdd to home screenSecure Responsive
Android App Mobile Web$3.75$0.07Housing.com: User Acquisition Costs
https://pwa.rocks/
https://developers.google.com/web/progressive-web-apps/
Polymer Starter KitWeb app scaffolding, via webcomponents.goo.gl/qy16Jk
GDG GranadaGDG Granada
polymer-project.orgGDG Granada
Thank you :)Questions?+Israel Blancas@iblancasaGDG Granada
iblancasa
yusukeshimizu
miyatakoji
blue_goheimochi
orgachem
oracle4engineer
6onoda
mamohacy
tbaldauf
yururoi
shimashima35
tjmtrhs
myddelton
bryan
geeforr
shpigford
speakerdeck
swwweet
jlugia
soudai
sugarenia
yeseniaperezcruz
eileencodes
phodgson