De 0 a Polymer

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

Transcript

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 pages GDG 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 happ Hey 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 Fast Push 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 Granada GDG Granada
83. GDG Granada
84. polymer-project.org GDG Granada
85. Thank you :) Questions? +Israel Blancas @iblancasa GDG Granada