Polymer - Una bella historia de amor

Polymer
Una bella historia de amor
+Israel Blancas
@iblancasa

Israel Blancas
@iblancasa
Software Engineer at Real-Time Innovations
Google Developer Group organizer

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.

Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)

Polymer is not
a framework
Sure?

Let’s build
an element!
Image by Gloria Viganò for the Noun Project

Hey user! Something awesome happened!

x
<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
<template>
</template>
<script>
Polymer({
});
</script>
</dom-module>
Import all of your
dependencies

alert-banner.html
<template>
</template>
<script>
Polymer({
});
</script>
</dom-module>
A container for your
element definition

alert-banner.html
<template>
</template>
<script>
Polymer({
});
</script>
</dom-module>
Local DOM is the DOM
an elements is in charge of
creating and managing

Shadow DOM || “Shady DOM” == Local DOM

alert-banner.html
<template>
<style>
.alert { background: blue; color: white; }
</style>
<div class=“alert”>
</div>
</template>
<script>
Polymer({
});
</script>
</dom-module>
Hey user! Something awesome happHey user! Something awesome happ

alert-banner.html
<template>
<style>
</style>
</div>
</template>
<script>
Polymer({
});
</script>
</dom-module>
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"/>

alert-banner.html
<template>
<style>
</style>
</div>
</template>
<script>
Polymer({
});
</script>
</dom-module>
Replace hard-coded data

alert-banner.html
<template>
<style>
</style>
<content select=“.message”></content>
</div>
</template>
<script>
Polymer({
});
</script>
</dom-module>
With content elements!

Light DOM - The world outside
your component’s Local DOM

alert-banner.html
<template>
<style>
</style>
<content select=“.message”></content>
</div>
</template>
<script>
Polymer({
});
</script>
Select content with
CSS selectors

</header>
</nav>
<main>
<alert-banner></alert-banner>
<section>
<article class="top-story">
<img src="headline.jpg"/>
<p>Lorem ipsum dolor sit amet…</p>

</header>
</nav>
<main>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>

</header>
</nav>
<main>
<alert-banner>
<span class=“message”>
</span>
</alert-banner>
Matching class

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

Muchas gracias
¿Preguntas?
+Israel Blancas
@iblancasa

Polymer - Una bella historia de amor

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Polymer - Una bella historia de amor

Ähnlich wie Polymer - Una bella historia de amor (20)

Mehr von Israel Blancas

Mehr von Israel Blancas (10)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Polymer - Una bella historia de amor