web components and ´polymer
TRANSCRIPT
Unlock the next era of UI development with Web Components and Polymer
Google I/O ExtendedMaceió, 2015
About me:Maria Clara Santana
● Computer Engineering student at UFAL;● Artificial Intelligence researcher;● GDG Maceió co-organizer;● WTM Maceió Lead;● Technovation Challenge coach;
We use an average of three different devices a day.The New Multi-screen World (http://bit.ly/1uoUzpK)
Multi-device applications!
(http://bit.ly/1IpP4SZ)
Building UI tabs should be easy!
“It’s easy to write code that a browser understands.Good developers writecode that people can understand.”
How can we solve this?
Web ComponentsLess code. Less confusion.
What are Web Components?
Custom Elements
● declarative;● readable;● meaningful HTML;● reusable;
HTML Templates
● native template in the broswer;
● parsed;● content is inert;● doc fragment;
Shadow DOM
● scoped CSS;● encapsulated markup;
Actually shadow DOM
HTML Imports
● loading Web Components;Example: Bootstrap
Browser supportSummer 2014
What if we designed HTML for the mobile
web?
polymer
Understanding polymerLayers
1. Web Components
2. The polymer library
3. Elements
core-elements
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...
<core-toolbar> </core-toolbar>
<core-header-panel> </core-header-panel>
<core-drawer-panel> </core-drawer-panel>
paper-elements
<paper-fab> </paper-fab>
<paper-checkbox> </paper-checkbox>
<paper-ripple> </paper-ripple>
<paper-menu-button> </paper-menu-button>
<paper-radio-button> </paper-radio-button>
(http://bit.ly/1dBOkyE)
Join the future!
Learn!
polymer-project.org
WebComponents.org
Polycasts by Rob Dodson
Build!
Chrome Dev Editor
yeoman.io
polymer-designer.appspot.com/
“Your future is whatever you make
it. So make it a good one”
Doc (Back to the future III, 1990)
Questions?+MariaClaraSantana1@[email protected]
