De 0 a Polymer
85
De 0 a Polymer +Israel Blancas @iblancasa GDG Granada
-
Upload
israel-blancas -
Category
Software
-
view
120 -
download
0
Transcript of De 0 a Polymer
De 0 a Polymer
+Israel Blancas@iblancasa
GDG Granada
Israel Blancas
@iblancasa
Software Engineer at Real-Time InnovationsGoogle Developer Group organizer
GDG Granada
Modular programming
GDG Granada
AsepticConsistentFlexibleProduction
GDG Granada
Quality Speed
GDG Granada
Quality Speed
GDG Granada
GDG Granada
GDG Granada
GDG Granada
Web Components are low-level primitives that let you define your own HTML Elements.
GDG Granada
Template
Shadow DOM
Custom Elements
HTML Imports
native client-side templating
scoping, composition
define new HTML/DOM
loading web components
GDG Granada
Primitives are designed so we can build libraries on top of them.
GDG Granada
So what is Polymer?
GDG Granada
Polymer is nota framework
GDG Granada
Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
GDG Granada
Polymer is nota framework
Sure?GDG Granada
Over 3M pagesGDG Granada
GDG Granada
GDG Granada
GDG Granada
GDG Granada
GDG Granada
GDG Granada
Let’s buildan element!
Image by Gloria Viganò for the Noun Project
GDG Granada
Hey user! Something awesome happened!
GDG Granada
GDG Granada
Install the tools
GDG Granada
NodeJS and NPM
GDG Granada
bower and polymer-clinpm install -g <package>
xHey user! Something awesome happened!
<alert-banner>GDG Granada
polymer init
GDG Granada
Select “element - A blank element template”
GDG Granada
Element name: alert-banner
GDG Granada
Element name: alert-banner
Brief description of the element: Hacklab example
GDG Granada
bower_componentsdemotestalert-banner.htmlbower.jsonindex.htmlREADME.md
GDG Granada
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”>
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
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
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”>
GDG Granada
Shadow DOM
GDG Granada
Shadow DOM || “Shady DOM”
GDG Granada
Shadow DOM || “Shady DOM” == Local DOM
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”>
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!
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
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>
GDG Granada
<!doctype html> <html lang="es"> <head> <title>Hacklab</title> <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"> </script> <link rel="import" href="alert-banner.html"> </head> <body> <alert-banner></alert-banner> </body></html>
GDG Granada
Hey user! Something awesome happened!
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
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!
GDG Granada
Light DOM - The world outsideyour component’s Local DOM
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
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>
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>
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
GDG Granada
Success! Your first component!
GDG Granada
ElementsBuilding blocks for a better web
GDG Granada
There’s an element for that!
GDG Granada
https://beta.webcomponents.org/collection/Polymer/elements
GDG Granada
GDG Granada
ApplicationsCombining elements into something great
GDG Granada
Create or reuse elements in any app
GDG Granada
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
GDG Granada
Production-ising Apps
GDG Granada
Build process out of the box
GDG Granada
What are the Progressive Web Apps?
Progressive Web App uses modern web platform capabilities to deliver an app-like user experience
Instant loading
FastPush notifications
Add to home screen
Secure Responsive
Android App Mobile Web
$3.75
$0.07
Housing.com: User Acquisition Costs
https://pwa.rocks/
https://developers.google.com/web/progressive-web-apps/
Polymer Starter Kit
Web app scaffolding, via web components.
goo.gl/qy16Jk
GDG GranadaGDG Granada
GDG Granada
polymer-project.org
GDG Granada
Thank you :)Questions?
+Israel Blancas@iblancasa
GDG Granada
