Charla para el DevFest de Córdoba 2016 sobre Polymer

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