web components and ´polymer
TRANSCRIPT
![Page 1: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/1.jpg)
Unlock the next era of UI development with Web Components and Polymer
Google I/O ExtendedMaceió, 2015
![Page 2: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/2.jpg)
About me:Maria Clara Santana
● Computer Engineering student at UFAL;● Artificial Intelligence researcher;● GDG Maceió co-organizer;● WTM Maceió Lead;● Technovation Challenge coach;
![Page 3: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/3.jpg)
We use an average of three different devices a day.The New Multi-screen World (http://bit.ly/1uoUzpK)
![Page 4: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/4.jpg)
Multi-device applications!
![Page 5: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/5.jpg)
(http://bit.ly/1IpP4SZ)
Building UI tabs should be easy!
![Page 6: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/6.jpg)
![Page 7: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/7.jpg)
“It’s easy to write code that a browser understands.Good developers writecode that people can understand.”
![Page 8: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/8.jpg)
How can we solve this?
![Page 9: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/9.jpg)
Web ComponentsLess code. Less confusion.
![Page 10: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/10.jpg)
![Page 11: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/11.jpg)
What are Web Components?
![Page 12: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/12.jpg)
Custom Elements
● declarative;● readable;● meaningful HTML;● reusable;
![Page 13: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/13.jpg)
HTML Templates
● native template in the broswer;
● parsed;● content is inert;● doc fragment;
![Page 14: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/14.jpg)
Shadow DOM
● scoped CSS;● encapsulated markup;
Actually shadow DOM
![Page 15: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/15.jpg)
HTML Imports
● loading Web Components;Example: Bootstrap
![Page 16: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/16.jpg)
Browser supportSummer 2014
![Page 17: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/17.jpg)
What if we designed HTML for the mobile
web?
![Page 18: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/18.jpg)
![Page 19: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/19.jpg)
![Page 20: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/20.jpg)
polymer
![Page 22: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/22.jpg)
Understanding polymerLayers
1. Web Components
2. The polymer library
3. Elements
![Page 23: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/23.jpg)
core-elements
![Page 24: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/24.jpg)
Visual Visual
<core-toolbar><core-header-panel><core-menu><core-icon>
And many more...
<core-ajax><core-shared-lib><core-range><core-localstorage>
And many more...
![Page 25: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/25.jpg)
<core-toolbar> </core-toolbar>
![Page 26: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/26.jpg)
<core-header-panel> </core-header-panel>
![Page 27: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/27.jpg)
<core-drawer-panel> </core-drawer-panel>
![Page 28: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/28.jpg)
paper-elements
![Page 29: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/29.jpg)
<paper-fab> </paper-fab>
![Page 30: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/30.jpg)
<paper-checkbox> </paper-checkbox>
![Page 31: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/31.jpg)
<paper-ripple> </paper-ripple>
![Page 32: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/32.jpg)
<paper-menu-button> </paper-menu-button>
![Page 33: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/33.jpg)
<paper-radio-button> </paper-radio-button>
(http://bit.ly/1dBOkyE)
![Page 34: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/34.jpg)
![Page 35: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/35.jpg)
Join the future!
![Page 36: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/36.jpg)
Learn!
polymer-project.org
WebComponents.org
Polycasts by Rob Dodson
![Page 37: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/37.jpg)
Build!
Chrome Dev Editor
yeoman.io
polymer-designer.appspot.com/
![Page 38: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/38.jpg)
“Your future is whatever you make
it. So make it a good one”
Doc (Back to the future III, 1990)
![Page 39: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/39.jpg)
Questions?+MariaClaraSantana1@[email protected]
![Page 40: Web Components and ´Polymer](https://reader034.vdocuments.mx/reader034/viewer/2022052602/55c58e5cbb61ebb46e8b473e/html5/thumbnails/40.jpg)