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
73
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
81
Docker: no todo es cloud
iblancasa
0
210
Cuando Dev conoció a Ops
iblancasa
0
74
De 0 a Polymer
iblancasa
0
39
GitHubś data is a life-changer
iblancasa
0
39
Progressive Web Apps - Porque nativo no es significa mejor
iblancasa
1
190
Polymer - El fin a tus problemas con el FrontEnd
iblancasa
0
43
TensorFlow - La IA detrás de Google
iblancasa
0
49
Jornada de asociaciones 2016
iblancasa
0
23
Other Decks in Technology
See All in Technology
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
910
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
メルカリIBISの紹介
0gm
0
120
Claude Code でアプリ開発をオートパイロットにするためのTips集 Zennの場合 / Claude Code Tips in Zenn
wadayusuke
5
1k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
KotlinConf 2025_イベントレポート
sony
1
140
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
340
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Music & Morning Musume
bryan
46
6.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
The Cult of Friendly URLs
andyhume
79
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GitHub's CSS Performance
jonrohan
1032
460k
A designer walks into a library…
pauljervisheath
207
24k
A better future with KSS
kneath
239
17k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
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