SlideShare a Scribd company logo
Polytechnic 1.0 Granada
Israel Blancas
@iblancasa
9:00 - 11:00 Intro to a wonderful world:
Polymer
11:00 - 11:30 Coffee break
11:30 - 12:15 Codelab(s)
13:00 - 14:00 “Challenges”
Program
Rob Dodson
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Web Components are different.
They are not like web standards
that have come before.
Web Components are low-level
primitives that let you define
your own HTML Elements.
Template
Shadow DOM
Custom Elements
HTML Imports
native client-side templating
scoping, composition
define new HTML/DOM
loading web components
Full article: https://goo.gl/SFaZKS
“Web Components have
been in planning for over
three years, but we’re
optimistic the end is
near. All major vendors
are on board,
enthusiastic, and
investing significant
time to help resolve the
remaining issues.”
- Wilson Page, Mozilla
Full article: https://goo.gl/N5n4SM
“We are happy to
announce that we are
starting development to
add HTML Template
element support to
Microsoft Edge today!
This is just the beginning
of our Web Components
journey… the next goal
is to implement Shadow
DOM”
- Travis Leithead & Arron Eicholz,
Microsoft Edge
https://dev.modern.ie/platform/status/shadowdom/
“Lots of progress on
shadow DOM last week.”
- WebKit Twitter account
https://twitter.com/webkit/status/648546431771344896
Primitives are designed so we can
build libraries on top of them.
So what is Polymer?
Polymer is not
a framework
Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
Is it ready?
+1.3M pages
Full article: http://goo.gl/gJbdKu
“We no longer build
applications. We have,
and are enriching, a
module market sourced
from industry and the
ING global community.
Modules are assembled
into applications as the
business requires.”
- Ben Issa, ING Head of IT Strategy
300+ Google projects
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
READY FOR
PRODUCTION
Let’s build
an element!
Image by Gloria Viganò for the Noun Project
Hey user! Something awesome happened!
x
Hey user! Something awesome happened!
<alert-banner>
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”>
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
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
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”>
Shadow DOM
Shadow DOM || “Shady DOM”
Shadow DOM || “Shady DOM” == Local DOM
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”>
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
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
</ul>
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner></alert-banner>
<section>
<article class="top-story">
<img src="headline.jpg"/>
Hey user! Something awesome happened!
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
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!
Light DOM - The world outside
your component’s Local DOM
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
</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>
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>
Matching class
Success! Your first component!
<input type=“checkbox”>
<input type=“checkbox” checked>
<input type=“checkbox” checked>
// or in JavaScript
input.checked = true;
<dom-module id=“alert-banner">
<template>
…
<div class=“alert”>
<content select=“.message”></content>
</div>
</template>
<script>
Polymer({
is: ‘alert-banner'
});
</script>
</dom-module>
<dom-module id=“alert-banner">
<template>
…
<div class=“alert”>
<content select=“.message”></content>
</div>
</template>
<script>
Polymer({
is: ‘alert-banner’,
properties: {
shown: {
type: Boolean,
value: false,
notify: true
}
}
Properties make your
element configurable
<dom-module id=“alert-banner">
<template>
…
<div class=“alert” hidden="{{!shown}}">
<content select=“.message”></content>
</div>
</template>
<script>
Polymer({
is: ‘alert-banner’,
properties: {
shown: {
type: Boolean,
value: false,
notify: true
}
}
Bind attributes to the
state of a property
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner shown>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>
Elements
Building blocks for a better web
There’s an element for that!
core paper
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
<google-drive>
<google-calendar>
<google-hangout-button>
<google-cloud>
<google-castable-video>
<google-analytics>
<google-map>
<google-sheets>
<google-translate>
<google-youtube>
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
<platinum-sw>
<platinum-sw-fetch>
<platinum-sw-cache>
<platinum-sw-register>
<platinum-push-messaging>
…
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
Polytechnic 1.0 Granada
<gold-cc-input>
<gold-zip-input>
<gold-cc-expiration-input>
<gold-cc-cvc-input>
<gold-phone-input>
<gold-email-input>
…
Polytechnic 1.0 Granada
elements.polymer-project.org
There’s an element for that!
Applications
Combining elements into something great
Polymer Starter Kit
Polymer Starter Kit
Polymer Starter Kit
New version soon
Image: https://www.flickr.com/photos/wwarby/16600407462/
App templates
Navigation Cards Layout
Navigation List Detail
List Card Over
Image: goo.gl/QZlMwX
Responsive breakpoints
Material Design breakpoints
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
Web App install banner
Mobile Web defaults
Meta theme color
Icons
Offline-first (in your app)
Polytechnic 1.0 Granada
There’s an element for that!
<platinum-sw>
<platinum-sw-fetch>
<platinum-sw-cache>
<platinum-sw-register>
<platinum-push-messaging>
…
Service Worker caching
Take your app offline with ease
<link rel="import" href="platinum-sw-elements.html">
<platinum-sw>
<platinum-sw-cache default-cache-strategy="networkFirst"
precache='["image.jpg", "results.json", "page.html"]'>
</platinum-sw-cache>
</platinum-sw>
Production-ising Apps
image: http://gulpjs.com
Build process out of the box
Live-reload and cross-device development
Polymer is lean, and production ready
Create or reuse elements in any app
Starter Kit gets you up and running
Polytechnic 1.0 Granada
polymer-project.org
Thanks!
@iblancasa
@GDGgranada
More?
https://polymer.slack.com/
https://github.com/Polymer
https://twitter.com/rob_dodson

More Related Content

PPTX
New Elements & Features in HTML5
Jamshid Hashimi
 
PDF
An Introduction To HTML5
Robert Nyman
 
PDF
HTML5 - Introduction
Davy De Pauw
 
PDF
HTML5 and the web of tomorrow!
Christian Heilmann
 
PPTX
Introduction to html 5
Sayed Ahmed
 
PDF
Introduction to HTML5
Gil Fink
 
PDF
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
PDF
Web Components with Polymer (extra Polymer 2.0)
Dhyego Fernando
 
New Elements & Features in HTML5
Jamshid Hashimi
 
An Introduction To HTML5
Robert Nyman
 
HTML5 - Introduction
Davy De Pauw
 
HTML5 and the web of tomorrow!
Christian Heilmann
 
Introduction to html 5
Sayed Ahmed
 
Introduction to HTML5
Gil Fink
 
Taiwan Web Standards Talk 2011
Zi Bin Cheah
 
Web Components with Polymer (extra Polymer 2.0)
Dhyego Fernando
 

What's hot (20)

PDF
HTML5 workshop, part 1
Robert Nyman
 
PPTX
HTML5 Essential Training
Kaloyan Kosev
 
PPTX
Introduction to HTML5
Terry Ryan
 
PDF
Polymer - Una bella historia de amor
Israel Blancas
 
PDF
Building a Secure App with Google Polymer and Java / Spring
sdeeg
 
PPTX
Html5 Basics
Pankaj Bajaj
 
PPTX
Accelerated Mobile Pages (AMP) in Magento
Magecom UK Limited
 
PPTX
What is HTML 5?
Susan Winters
 
PPTX
How to build a web application with Polymer
Sami Suo-Heikki
 
PPTX
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
PDF
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
PPTX
Web Components: Web back to future.
GlobalLogic Ukraine
 
PPT
Html 5 introduction
Mahendra Kumar
 
PDF
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
KEY
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
PDF
Web Development for UX Designers
Ashlimarie
 
PDF
Building mobile applications with DrupalGap
Alex S
 
PDF
Polymer - Welcome to the Future @ PyGrunn 08/07/2014
Spyros Ioakeimidis
 
PPT
Developing Java Web Applications
hchen1
 
PDF
Mastering WordPress Vol.1
Wataru OKAMOTO
 
HTML5 workshop, part 1
Robert Nyman
 
HTML5 Essential Training
Kaloyan Kosev
 
Introduction to HTML5
Terry Ryan
 
Polymer - Una bella historia de amor
Israel Blancas
 
Building a Secure App with Google Polymer and Java / Spring
sdeeg
 
Html5 Basics
Pankaj Bajaj
 
Accelerated Mobile Pages (AMP) in Magento
Magecom UK Limited
 
What is HTML 5?
Susan Winters
 
How to build a web application with Polymer
Sami Suo-Heikki
 
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
Dreamweaver CS6, jQuery, PhoneGap, mobile design
Dee Sadler
 
Web Components: Web back to future.
GlobalLogic Ukraine
 
Html 5 introduction
Mahendra Kumar
 
Web Standards: Fueling Innovation [Web Design World Boston '08]
Aaron Gustafson
 
HTML5 Video Player - HTML5 Dev Conf 2012
steveheffernan
 
Web Development for UX Designers
Ashlimarie
 
Building mobile applications with DrupalGap
Alex S
 
Polymer - Welcome to the Future @ PyGrunn 08/07/2014
Spyros Ioakeimidis
 
Developing Java Web Applications
hchen1
 
Mastering WordPress Vol.1
Wataru OKAMOTO
 
Ad

Viewers also liked (10)

PPTX
CHIP poster Slater final
Kayla Slater
 
PPTX
Nostalgia research
Yuefeng?Benjamin? Pan
 
DOCX
Taller 5
Mariano Castillo
 
DOCX
Legislación
Duane Cooper
 
PPTX
Internet ¿Complemento de la vida o Ruptura de Familias?
Isabel Torres
 
PDF
Paasalo - Usando plataformas como servicio para publicar tu aplicación
Israel Blancas
 
PPTX
PathwayPartners Company Info - Nov 2016
Lisa Smith
 
PPTX
Evolucion Historicas De Las Computadoras
katylaunica
 
PDF
Schön, d. (1987) la formación de profesionales reflexivos
Karo Rc
 
PPTX
5.4 mathematical induction
math260
 
CHIP poster Slater final
Kayla Slater
 
Nostalgia research
Yuefeng?Benjamin? Pan
 
Taller 5
Mariano Castillo
 
Legislación
Duane Cooper
 
Internet ¿Complemento de la vida o Ruptura de Familias?
Isabel Torres
 
Paasalo - Usando plataformas como servicio para publicar tu aplicación
Israel Blancas
 
PathwayPartners Company Info - Nov 2016
Lisa Smith
 
Evolucion Historicas De Las Computadoras
katylaunica
 
Schön, d. (1987) la formación de profesionales reflexivos
Karo Rc
 
5.4 mathematical induction
math260
 
Ad

Similar to Polytechnic 1.0 Granada (20)

PDF
Introduction to web components
Marc Bächinger
 
PDF
Polymer - El fin a tus problemas con el FrontEnd
Israel Blancas
 
PPTX
Polymer
LearningTech
 
PDF
Polymer
jskvara
 
PDF
Polymer - Lego for the web!
Codemotion
 
PDF
Polymer Code Lab in Dart - DevFest Kraków 2014
jskvara
 
PPTX
Polymer-Powered Design Systems - DevFest Florida
John Riviello
 
PDF
The Structure of Web Code: A Case For Polymer, November 1, 2014
Tommie Gannert
 
PPTX
Polymer and web component
Imam Raza
 
PDF
De 0 a Polymer
Israel Blancas
 
PDF
Web components: A simpler and faster react
Chris Lorenzo
 
PDF
BreizhBeans - Web components
Horacio Gonzalez
 
PPTX
Up & Running with Polymer
Fiyaz Hasan
 
PDF
Web Components and Modular CSS
Andrew Rota
 
TXT
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
Coulawrence
 
PPTX
Web Components: back to the future
DA-14
 
PPTX
Orchard Harvest 2014 - The Future of Widgets?
Steve Taylor
 
PPTX
Web components
Noam Kfir
 
PDF
Web components - An Introduction
cherukumilli2
 
PDF
Polymer 1.0
Cyril Balit
 
Introduction to web components
Marc Bächinger
 
Polymer - El fin a tus problemas con el FrontEnd
Israel Blancas
 
Polymer
LearningTech
 
Polymer
jskvara
 
Polymer - Lego for the web!
Codemotion
 
Polymer Code Lab in Dart - DevFest Kraków 2014
jskvara
 
Polymer-Powered Design Systems - DevFest Florida
John Riviello
 
The Structure of Web Code: A Case For Polymer, November 1, 2014
Tommie Gannert
 
Polymer and web component
Imam Raza
 
De 0 a Polymer
Israel Blancas
 
Web components: A simpler and faster react
Chris Lorenzo
 
BreizhBeans - Web components
Horacio Gonzalez
 
Up & Running with Polymer
Fiyaz Hasan
 
Web Components and Modular CSS
Andrew Rota
 
TURN YOUR CELL PHONE FROM A LIABILITY INTO AN ASSET!
Coulawrence
 
Web Components: back to the future
DA-14
 
Orchard Harvest 2014 - The Future of Widgets?
Steve Taylor
 
Web components
Noam Kfir
 
Web components - An Introduction
cherukumilli2
 
Polymer 1.0
Cyril Balit
 

More from Israel Blancas (9)

PDF
What is happening with my microservices?
Israel Blancas
 
PDF
GitHubś data is a life-changer
Israel Blancas
 
PDF
Progressive Web Apps - Porque nativo no es significa mejor
Israel Blancas
 
PDF
TensorFlow - La IA detrás de Google
Israel Blancas
 
PPTX
Jornada de asociaciones ETSIIT 2016
Israel Blancas
 
PDF
GitHubCity: una biblioteca para conocer tu comunidad
Israel Blancas
 
PDF
NodIO: Marco de desarrollo de aplicaciones para computación evolutiva voluntaria
Israel Blancas
 
PDF
El valor de lo abierto de software libre y datos
Israel Blancas
 
PDF
Google Summer of Code
Israel Blancas
 
What is happening with my microservices?
Israel Blancas
 
GitHubś data is a life-changer
Israel Blancas
 
Progressive Web Apps - Porque nativo no es significa mejor
Israel Blancas
 
TensorFlow - La IA detrás de Google
Israel Blancas
 
Jornada de asociaciones ETSIIT 2016
Israel Blancas
 
GitHubCity: una biblioteca para conocer tu comunidad
Israel Blancas
 
NodIO: Marco de desarrollo de aplicaciones para computación evolutiva voluntaria
Israel Blancas
 
El valor de lo abierto de software libre y datos
Israel Blancas
 
Google Summer of Code
Israel Blancas
 

Recently uploaded (20)

PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PPTX
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
PPTX
The Future of AI & Machine Learning.pptx
pritsen4700
 
PDF
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
PPTX
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PPTX
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
PDF
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
PDF
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PPTX
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
PDF
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
PDF
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
PPTX
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
PPTX
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
PDF
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
AI and Robotics for Human Well-being.pptx
JAYMIN SUTHAR
 
The Future of AI & Machine Learning.pptx
pritsen4700
 
Automating ArcGIS Content Discovery with FME: A Real World Use Case
Safe Software
 
OA presentation.pptx OA presentation.pptx
pateldhruv002338
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
The-Ethical-Hackers-Imperative-Safeguarding-the-Digital-Frontier.pptx
sujalchauhan1305
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
NewMind AI Weekly Chronicles - July'25 - Week IV
NewMind AI
 
Google I/O Extended 2025 Baku - all ppts
HusseinMalikMammadli
 
Accelerating Oracle Database 23ai Troubleshooting with Oracle AHF Fleet Insig...
Sandesh Rao
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
Introduction to Flutter by Ayush Desai.pptx
ayushdesai204
 
Oracle AI Vector Search- Getting Started and what's new in 2025- AIOUG Yatra ...
Sandesh Rao
 
Security features in Dell, HP, and Lenovo PC systems: A research-based compar...
Principled Technologies
 
cloud computing vai.pptx for the project
vaibhavdobariyal79
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
AI in Daily Life: How Artificial Intelligence Helps Us Every Day
vanshrpatil7
 
Get More from Fiori Automation - What’s New, What Works, and What’s Next.pdf
Precisely
 

Polytechnic 1.0 Granada