51
Mobile WebApps e o Polymer @obetomuniz

WebApps com Web Components

Embed Size (px)

Citation preview

Page 1: WebApps com Web Components

Mobile WebApps e o Polymer

@obetomuniz

Page 2: WebApps com Web Components

Mas primeiro...

@obetomuniz

Page 3: WebApps com Web Components

@obetomuniz

Page 4: WebApps com Web Components

@obetomuniz

Mobile WebApps + Web Components

Porque isso é bom?

Page 5: WebApps com Web Components

@obetomuniz

Mobile WebApps & Web Components

E qual é o “The right way”?

Page 6: WebApps com Web Components

Cordova

@obetomuniz

Page 7: WebApps com Web Components

Polymer

@obetomuniz

Page 8: WebApps com Web Components
Page 9: WebApps com Web Components

E o que é o Polymer?

@obetomuniz

Page 10: WebApps com Web Components

@obetomuniz

Page 11: WebApps com Web Components

@obetomuniz

Page 12: WebApps com Web Components

@obetomuniz

Page 13: WebApps com Web Components
Page 14: WebApps com Web Components

@obetomuniz

Mas porque o Polymer?

Page 15: WebApps com Web Components

Porque o Polymer?

Produtivo

Page 16: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável

Page 17: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

Page 18: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

Performático

Page 19: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

ExtensívelPerformático

Page 20: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

ExtensívelPerformático Acessível

Page 21: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

Reutilizável

ExtensívelPerformático Acessível

Page 22: WebApps com Web Components

Porque o Polymer?

Produtivo Interoperável Declarativo

ComponentizadoReutilizável

ExtensívelPerformático Acessível

Page 23: WebApps com Web Components

Testável

@obetomuniz

Page 24: WebApps com Web Components

123kb :(

@obetomuniz

Page 25: WebApps com Web Components

15kb (non-gzipped)

6kb (gzipped)

@obetomuniz

Page 26: WebApps com Web Components
Page 27: WebApps com Web Components

Porque o Polymer é bom para

Mobile Web Apps?

Page 28: WebApps com Web Components

Elements

@obetomuniz

Page 29: WebApps com Web Components

Core Elements

Estrutura <core-scaffold> <core-toolbar> <core-header-panel>

•••

Animação <core-animation> <core-animation-keyframe> <core-animation-prop>

Data <core-ajax> <core-xhr> <core-localstorage>

Outros <core-a11y-keys> <core-splitter> <core-drag-drop>

Page 30: WebApps com Web Components

Paper Elements

<paper-slider>

<paper-tabs>

<paper-button>

<paper-dialog>

<paper-progress>

<paper-input>

<paper-dropdown>

•••

Page 31: WebApps com Web Components

Flexbox

@obetomuniz

Page 32: WebApps com Web Components

Mobile First

@obetomuniz

Page 33: WebApps com Web Components
Page 34: WebApps com Web Components

E o que o Polymer não é?

@obetomuniz

Page 35: WebApps com Web Components
Page 36: WebApps com Web Components

@obetomuniz

Page 37: WebApps com Web Components

@obetomuniz

Page 38: WebApps com Web Components

Apenas um Polyfill

@obetomuniz

Page 39: WebApps com Web Components

O Material Design

@obetomuniz

Page 40: WebApps com Web Components

Uma ferramenta do futuro

@obetomuniz

Page 41: WebApps com Web Components
Page 42: WebApps com Web Components

@obetomuniz

Ok!

Alguém já está usando esse workflow?

Page 43: WebApps com Web Components

@obetomuniz

Page 44: WebApps com Web Components

E como aprender?

@obetomuniz

Page 45: WebApps com Web Components

polymer-project.org

@obetomuniz

Page 46: WebApps com Web Components

webcomponents.org

@obetomuniz

Page 47: WebApps com Web Components

customelements.io

@obetomuniz

Page 48: WebApps com Web Components

@obetomuniz

betomuniz.com/blog

Page 49: WebApps com Web Components

@ebidel @zenorocha @addyosmani

@sindresorhus

@rob_dodson @PascalPrecht @eduardolundgren

@passy

•••

Page 50: WebApps com Web Components

Vamos componentizar!

@obetomuniz

Page 51: WebApps com Web Components

Beto Muniz

@obetomuniz

betomuniz.com

bit.ly/mobileapps-e-o-polymer

Muito Obrigado!