The document discusses how Polymer can be used to build web components. It explains that Polymer provides primitives like templates, shadow DOM, and custom elements to define your own HTML elements. It then demonstrates how to build a simple "alert-banner" element with Polymer by defining a template, styles, and prototype. The element can be used on a page by adding content between its opening and closing tags. Finally, it discusses how Polymer elements can be combined to build complete applications and packaged for production use.

1. Polymer
Una bella historia de amor
+Israel Blancas
@iblancasa

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

3. Mejor tarde que nunca

8. Web Components are low-level
primitives that let you define
your own HTML Elements.

9. Template
Shadow DOM
Custom Elements
HTML Imports
native client-side templating
scoping, composition
define new HTML/DOM
loading web components

10. Primitives are designed so we can
build libraries on top of them.

11. So what is Polymer?

12. Polymer is not
a framework

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

14. Polymer is not
a framework
Sure?

15. Over 3M pages

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

23. Hey user! Something awesome happened!

24. x
Hey user! Something awesome happened!
<alert-banner>

25. 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”>

26. 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

27. 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

28. 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”>

29. Shadow DOM

30. Shadow DOM || “Shady DOM”

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

32. 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”>

33. 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 happHey user! Something awesome happ

34. 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

35. </ul>
</header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner></alert-banner>
<section>
<article class="top-story">
<img src="headline.jpg"/>

36. Hey user! Something awesome happened!

37. 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

38. 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!

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

40. 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

41. </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>

42. </header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>

43. </header>
</nav>
<main>
<h1 class="logo">Polymer!</h1>
<alert-banner>
<span class=“message”>
Success! Your first component!
</span>
</alert-banner>
Matching class

44. Success! Your first component!

45. Elements
Building blocks for a better web

46. There’s an element for that!

47. https://beta.webcomponents.org
/collection/Polymer/elements

48. Applications
Combining elements into something great

49. Create or reuse elements in any app

50. Production-ising Apps

51. Build process out of the box

53. GDG Granada

54. polymer-project.org

55. Muchas gracias
¿Preguntas?
+Israel Blancas
@iblancasa