Charla sobre Polymer para las Jornadas del Hacklab Almería 2016, celebradas en "El Ejido".

1. De 0 a Polymer
+Israel Blancas
@iblancasa
GDG Granada

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

3. GDG Granada

4. Modular
programming
GDG Granada

5. Aseptic
Consistent
Flexible
Production
GDG Granada

6. Quality Speed
GDG Granada

7. Quality Speed
GDG Granada

8. GDG Granada

10. GDG Granada

11. GDG Granada

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

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

14. Primitives are designed so we can
build libraries on top of them.
GDG Granada

15. So what is Polymer?
GDG Granada

16. Polymer is not
a framework
GDG Granada

17. Existing Frameworks
Applications
Web Platform
Web Components built with Polymer (or not)
GDG Granada

18. Polymer is not
a framework
Sure? GDG Granada

19. Over 3M pagesGDG Granada

20. GDG Granada

21. GDG Granada

22. GDG Granada

23. GDG Granada

24. GDG Granada

25. GDG Granada

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

27. Hey user! Something awesome happened!
GDG Granada

28. GDG Granada
Install the tools

29. GDG Granada
NodeJS and NPM

30. GDG Granada
bower and polymer-cli
npm install -g <package>

31. x
Hey user! Something awesome happened!
<alert-banner>
GDG Granada

32. polymer init
GDG Granada

33. Select
“element - A blank element template”
GDG Granada

34. Element name: alert-banner
GDG Granada

35. Element name: alert-banner
Brief description of the element:
Hacklab example
GDG Granada

36. bower_components
demo
test
alert-banner.html
bower.json
index.html
README.md
GDG Granada

37. GDG Granada

38. 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”>
GDG Granada

39. 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
GDG Granada

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

41. 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”>
GDG Granada

42. Shadow DOM
GDG Granada

43. Shadow DOM || “Shady DOM”
GDG Granada

44. Shadow DOM || “Shady DOM” == Local DOM
GDG Granada

45. 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”>
GDG Granada

46. 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
GDG Granada

47. 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
GDG Granada

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

49. <!doctype html>
<html lang="es">
<head>
<title>Hacklab</title>
<script
src="bower_components/webcomponentsjs/webcomponents-lite.min.js">
</script>
<link rel="import" href="alert-banner.html">
</head>
<body>
<alert-banner></alert-banner>
</body>
</html>
GDG Granada

50. Hey user! Something awesome happened!
GDG Granada

51. 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
GDG Granada

52. 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!
GDG Granada

53. Light DOM - The world outside
your component’s Local DOM
GDG Granada

54. 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
GDG Granada

55. </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>
GDG Granada

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

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

58. Success! Your first component!
GDG Granada

59. Elements
Building blocks for a better web
GDG Granada

60. There’s an element for that!
GDG Granada

61. https://beta.webcomponents.org
/collection/Polymer/elements
GDG Granada

62. GDG Granada

63. Applications
Combining elements into something great
GDG Granada

64. Create or reuse elements in any app
GDG Granada

65. GDG Granada

66. App-wide Theming
#303f9f
CSS custom properties
--dark-primary-color
--light-primary-color
--accent-color
--primary-text-color
#303f9f
--dark-primary-color
--light-primary-color
--accent-color
--primary-text-color
GDG Granada

67. Production-ising Apps
GDG Granada

68. Build process out of the box
GDG Granada

70. What are the Progressive Web Apps?

71. Progressive Web App uses modern web
platform capabilities to deliver an app-like
user experience

72. Instant loading
FastPush notifications
Add to home screen
Secure Responsive

74. Android App Mobile Web
$3.75
$0.07
Housing.com: User Acquisition Costs

79. https://pwa.rocks/

80. https://developers.google.com/
web/progressive-web-apps/

81. Polymer Starter Kit
Web app scaffolding, via web
components.
goo.gl/qy16Jk

82. GDG GranadaGDG Granada

83. GDG Granada

84. polymer-project.org
GDG Granada

85. Thank you :)
Questions?
+Israel Blancas
@iblancasa
GDG Granada