Polytechnic 1.0 Granada

Polymer Polytechnic Granada. Celebrado el 25 de abril de 2016 en la Escuela Técnica Superior de Ingenierías Informática y Telecomunicación de Granada.

Transcript

2. Israel Blancas @iblancasa
3. 9:00 - 11:00 Intro to a wonderful world: Polymer 11:00 - 11:30 Coffee break 11:30 - 12:15 Codelab(s) 13:00 - 14:00 “Challenges” Program
4. Rob Dodson
8. Web Components are different. They are not like web standards that have come before.
9. Web Components are low-level primitives that let you define your own HTML Elements.
10. Template Shadow DOM Custom Elements HTML Imports native client-side templating scoping, composition define new HTML/DOM loading web components
11. Full article: https://goo.gl/SFaZKS “Web Components have been in planning for over three years, but we’re optimistic the end is near. All major vendors are on board, enthusiastic, and investing significant time to help resolve the remaining issues.” - Wilson Page, Mozilla
12. Full article: https://goo.gl/N5n4SM “We are happy to announce that we are starting development to add HTML Template element support to Microsoft Edge today! This is just the beginning of our Web Components journey… the next goal is to implement Shadow DOM” - Travis Leithead & Arron Eicholz, Microsoft Edge https://dev.modern.ie/platform/status/shadowdom/
13. “Lots of progress on shadow DOM last week.” - WebKit Twitter account https://twitter.com/webkit/status/648546431771344896
14. Primitives are designed so we can build libraries on top of them.
15. So what is Polymer?
16. Polymer is not a framework
17. Existing Frameworks Applications Web Platform Web Components built with Polymer (or not)
18. Is it ready?
19. +1.3M pages
20. Full article: http://goo.gl/gJbdKu “We no longer build applications. We have, and are enriching, a module market sourced from industry and the ING global community. Modules are assembled into applications as the business requires.” - Ben Issa, ING Head of IT Strategy
21. 300+ Google projects
24. READY FOR PRODUCTION
25. Let’s build an element! Image by Gloria Viganò for the Noun Project
26. Hey user! Something awesome happened!
27. x Hey user! Something awesome happened! <alert-banner>
28. 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”>
29. 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
30. 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
31. 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”>
32. Shadow DOM
33. Shadow DOM || “Shady DOM”
34. Shadow DOM || “Shady DOM” == Local DOM
35. 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”>
36. 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
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”> Define your prototype
38. </ul> </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner></alert-banner> <section> <article class="top-story"> <img src="headline.jpg"/>
39. Hey user! Something awesome happened!
40. 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
41. 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!
42. Light DOM - The world outside your component’s Local DOM
43. 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
44. </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>
45. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner>
46. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner> Matching class
47. Success! Your first component!
48. <input type=“checkbox”>
49. <input type=“checkbox” checked>
50. <input type=“checkbox” checked> // or in JavaScript input.checked = true;
51. <dom-module id=“alert-banner"> <template> … <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner' }); </script> </dom-module>
52. <dom-module id=“alert-banner"> <template> … <div class=“alert”> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner’, properties: { shown: { type: Boolean, value: false, notify: true } } Properties make your element configurable
53. <dom-module id=“alert-banner"> <template> … <div class=“alert” hidden="{{!shown}}"> <content select=“.message”></content> </div> </template> <script> Polymer({ is: ‘alert-banner’, properties: { shown: { type: Boolean, value: false, notify: true } } Bind attributes to the state of a property
54. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner> <span class=“message”> Success! Your first component! </span> </alert-banner>
55. </header> </nav> <main> <h1 class="logo">Polymer!</h1> <alert-banner shown> <span class=“message”> Success! Your first component! </span> </alert-banner>
56. Elements Building blocks for a better web
57. There’s an element for that!
58. core paper
61. <google-drive> <google-calendar> <google-hangout-button> <google-cloud> <google-castable-video> <google-analytics> <google-map> <google-sheets> <google-translate> <google-youtube>
65. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …
69. <gold-cc-input> <gold-zip-input> <gold-cc-expiration-input> <gold-cc-cvc-input> <gold-phone-input> <gold-email-input> …
71. elements.polymer-project.org
72. There’s an element for that!
73. Applications Combining elements into something great
74. Polymer Starter Kit
75. Polymer Starter Kit
76. Polymer Starter Kit New version soon
77. Image: https://www.flickr.com/photos/wwarby/16600407462/ App templates
78. Navigation Cards Layout
79. Navigation List Detail
80. List Card Over
81. Image: goo.gl/QZlMwX Responsive breakpoints
82. Material Design breakpoints
83. 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
84. Web App install banner Mobile Web defaults Meta theme color
85. Icons
86. Offline-first (in your app)
88. There’s an element for that!
89. <platinum-sw> <platinum-sw-fetch> <platinum-sw-cache> <platinum-sw-register> <platinum-push-messaging> …
90. Service Worker caching Take your app offline with ease <link rel="import" href="platinum-sw-elements.html"> <platinum-sw> <platinum-sw-cache default-cache-strategy="networkFirst" precache='["image.jpg", "results.json", "page.html"]'> </platinum-sw-cache> </platinum-sw>
91. Production-ising Apps
92. image: http://gulpjs.com
93. Build process out of the box
94. Live-reload and cross-device development
95. Polymer is lean, and production ready
96. Create or reuse elements in any app
97. Starter Kit gets you up and running
99. polymer-project.org
100. Thanks! @iblancasa @GDGgranada
101. More? https://polymer.slack.com/ https://github.com/Polymer https://twitter.com/rob_dodson