40
Polymer 1.0 Easier, faster, better! Photo: http://on.natgeo.com/1BlepN7

Polymer 1.0: easier, faster, better!

Embed Size (px)

Citation preview

Page 1: Polymer 1.0: easier, faster, better!

Polymer 1.0Easier, faster, better!

Photo: http://on.natgeo.com/1BlepN7

Page 2: Polymer 1.0: easier, faster, better!

<about-me>

</about-me>

Maria Clara Santana

● Computer Engineering student at UFAL;● AI researcher;● Front-end developer;

Page 3: Polymer 1.0: easier, faster, better!

AgendaA brief introductionWhat’s new on 1.0?How to get started today?

Page 4: Polymer 1.0: easier, faster, better!

Photo: http://bit.ly/1CeBPyN

Page 5: Polymer 1.0: easier, faster, better!

Photo: http://bit.ly/1d2I81R

WEB COMPONENTS

Page 6: Polymer 1.0: easier, faster, better!

Photo: http://bit.ly/1d2I81R

Custom and Interoperable

Page 7: Polymer 1.0: easier, faster, better!

polymer

Page 8: Polymer 1.0: easier, faster, better!
Page 9: Polymer 1.0: easier, faster, better!

(Mobile)

4x FASTER

(Available on: http://bit.ly/1FnHG4V)

0.5

1.0

Page 10: Polymer 1.0: easier, faster, better!

3x FASTER

(Available on: http://bit.ly/1FnHG4V)

0.5

1.0

Page 11: Polymer 1.0: easier, faster, better!

0.5 1.0

65kb 42kb

35% LESS CODE

Page 12: Polymer 1.0: easier, faster, better!

1.0 Coolest Features

Page 13: Polymer 1.0: easier, faster, better!

Shady DOM

Page 14: Polymer 1.0: easier, faster, better!

Shadow DOM Shady DOM

(Taken from: http://bit.ly/1QFmNhg)

Page 15: Polymer 1.0: easier, faster, better!

Theming

Page 16: Polymer 1.0: easier, faster, better!

Custom Property

Page 17: Polymer 1.0: easier, faster, better!

“Everything is an element.”(Polymer team)

Page 18: Polymer 1.0: easier, faster, better!

core-elements paper-elements

Page 19: Polymer 1.0: easier, faster, better!

core-elements paper-elements

Page 20: Polymer 1.0: easier, faster, better!

“There’s an element for that!”(Polymer team)

Page 21: Polymer 1.0: easier, faster, better!
Page 22: Polymer 1.0: easier, faster, better!

<google-map><google-drive><google-calendar>

Page 23: Polymer 1.0: easier, faster, better!

(Available on: http://bit.ly/1HRgoLr)

Page 24: Polymer 1.0: easier, faster, better!

<gold-cc-cvc-input>

<gold-cc-expiration-input>

<gold-cc-input>

<gold-email-input>

Page 25: Polymer 1.0: easier, faster, better!
Page 26: Polymer 1.0: easier, faster, better!
Page 27: Polymer 1.0: easier, faster, better!

How do I get started?

Page 28: Polymer 1.0: easier, faster, better!

Polymer Starter Kit

Page 29: Polymer 1.0: easier, faster, better!

❏ Components;

❏ Layout;

❏ Theming;

❏ Build tools;

Page 30: Polymer 1.0: easier, faster, better!

Material Design

<paper-menu-buton><paper-toolbar>

<paper-header-panel>

Page 31: Polymer 1.0: easier, faster, better!

Theming feature

Page 32: Polymer 1.0: easier, faster, better!

Adaptative UI

Photo: http://bit.ly/1AyYVVE

Page 33: Polymer 1.0: easier, faster, better!

Photo: http://bit.ly/1L2gAr9

Page 34: Polymer 1.0: easier, faster, better!

Breakpoints

(Available on: http://bit.ly/1MO2xns)

Page 35: Polymer 1.0: easier, faster, better!

Offline first!

Page 36: Polymer 1.0: easier, faster, better!
Page 37: Polymer 1.0: easier, faster, better!

Service Worker cachingTake your app offline

Page 38: Polymer 1.0: easier, faster, better!

Where you can learn more:

Polymer: polymer-project.org

Polymer Starter Kit: bit.ly/1cOygZh

Github: bit.ly/1L2stNV

Page 39: Polymer 1.0: easier, faster, better!

<contact-me>

</contact-me>

+MariaClaraSantana1@[email protected]

Page 40: Polymer 1.0: easier, faster, better!

<thank-you>