Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Polymer - Una bella historia de amor
Israel Blancas
December 08, 2016
Technology
0
59
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
32
Docker: no todo es cloud
iblancasa
0
120
Cuando Dev conoció a Ops
iblancasa
0
55
De 0 a Polymer
iblancasa
0
30
GitHubś data is a life-changer
iblancasa
0
19
Progressive Web Apps - Porque nativo no es significa mejor
iblancasa
1
110
Polymer - El fin a tus problemas con el FrontEnd
iblancasa
0
23
TensorFlow - La IA detrás de Google
iblancasa
0
35
Jornada de asociaciones 2016
iblancasa
0
11
Other Decks in Technology
See All in Technology
次期LTSに備えよ!AOS 6.1 HCI Core 編
smzksts
0
170
How We Foster Reliability in Diversity
nari_ex
PRO
8
2.3k
Adopting Kafka for the #1 job site in the world
ymyzk
1
280
組織でPower Virtual Agentsを導入するために知っておきたいこと
miyakemito
0
1.6k
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
620
1年間のポストモーテム運用とそこから生まれたツール sre-advisor / SRE NEXT 2022
fujiwara3
6
3k
TypeScript 4.7と型レベルプログラミング
uhyo
5
3.2k
Power BI Report Ops
hanaseleb
0
160
読者のことを考えて書いてみよう / Write with your reader in mind
line_developers
PRO
3
320
Babylon.js で簡単 WebXR
yuhara0928
2
980
Research Paper Introduction #98 "NSDI 2022 recap"
cafenero_777
0
200
mROS 2のススメ
takasehideki
0
290
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Why You Should Never Use an ORM
jnunemaker
PRO
47
5.5k
Web development in the modern age
philhawksworth
197
9.3k
A Tale of Four Properties
chriscoyier
149
20k
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Three Pipe Problems
jasonvnalue
89
8.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
The Cult of Friendly URLs
andyhume
68
4.7k
Thoughts on Productivity
jonyablonski
43
2.2k
Writing Fast Ruby
sferik
612
57k
The Invisible Side of Design
smashingmag
289
48k
Building Adaptive Systems
keathley
25
1.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