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
37
GitHubś data is a life-changer
iblancasa
0
36
Progressive Web Apps - Porque nativo no es significa mejor
iblancasa
1
190
Polymer - El fin a tus problemas con el FrontEnd
iblancasa
0
41
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
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
320
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
30分でわかる『アジャイルデータモデリング』
hanon52_
9
2.2k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
Fintech SREの挑戦 PCI DSS対応をスマートにこなすインフラ戦略/Fintech SRE’s Challenge: Smart Infrastructure Strategies for PCI DSS Compliance
maaaato
0
450
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
A designer walks into a library…
pauljervisheath
205
24k
Why Our Code Smells
bkeepers
PRO
335
57k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Automating Front-end Workflow
addyosmani
1367
200k
Building Applications with DynamoDB
mza
93
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
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