Web Components and ´Polymer

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

polymer-topeka.appspot.com/

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@olarclaraclaarasantana@gmail.com