Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Polymer - Una bella historia de amor
Search
Israel Blancas
December 08, 2016
Technology
0
72
Polymer - Una bella historia de amor
Charla para el DevFest de Córdoba 2016 sobre Polymer
Israel Blancas
December 08, 2016
Tweet
Share
More Decks by Israel Blancas
See All by Israel Blancas
How are my microservices doing?
iblancasa
0
80
Docker: no todo es cloud
iblancasa
0
210
Cuando Dev conoció a Ops
iblancasa
0
72
De 0 a Polymer
iblancasa
0
38
GitHubś data is a life-changer
iblancasa
0
37
Progressive Web Apps - Porque nativo no es significa mejor
iblancasa
1
190
Polymer - El fin a tus problemas con el FrontEnd
iblancasa
0
42
TensorFlow - La IA detrás de Google
iblancasa
0
46
Jornada de asociaciones 2016
iblancasa
0
21
Other Decks in Technology
See All in Technology
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
540
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
180
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
740
なぜ私はいま、ここにいるのか? #もがく中堅デザイナー #プロダクトデザイナー
bengo4com
0
470
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
230
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
HiMoR: Monocular Deformable Gaussian Reconstruction with Hierarchical Motion Representation
spatial_ai_network
0
110
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
lycorptech_jp
PRO
0
130
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
GraphQLとの向き合い方2022年版
quramy
48
14k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Building Adaptive Systems
keathley
43
2.6k
Visualization
eitanlees
146
16k
Rails Girls Zürich Keynote
gr2m
94
14k
Speed Design
sergeychernyshev
32
1k
Transcript
Polymer Una bella historia de amor +Israel Blancas @iblancasa
Israel Blancas @iblancasa Software Engineer at Real-Time Innovations Google Developer
Group organizer
Mejor tarde que nunca
None
None
None
None
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
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)
Polymer is not a framework Sure?
Over 3M pages
None
None
None
None
None
None
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 happ Hey 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!
Elements Building blocks for a better web
There’s an element for that!
https://beta.webcomponents.org /collection/Polymer/elements
Applications Combining elements into something great
Create or reuse elements in any app
Production-ising Apps
Build process out of the box
None
GDG Granada
polymer-project.org
Muchas gracias ¿Preguntas? +Israel Blancas @iblancasa