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
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
ガチな登山用デバイスからこんにちは
halka
1
230
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.7k
エラーとアクセシビリティ
schktjm
1
1.2k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
680
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
210
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
300
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
700
研究開発と製品開発、両利きのロボティクス
youtalk
1
510
AWSで始める実践Dagster入門
kitagawaz
1
580
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Building Adaptive Systems
keathley
43
2.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rails Girls Zürich Keynote
gr2m
95
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Typedesign – Prime Four
hannesfritz
42
2.8k
Fireside Chat
paigeccino
39
3.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
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