Construindo apps web mobile com polymer - jsday campina grande - 23 de abril de 2016

Construindo Apps Web/Mobile com Polymer e Web Components - JSday 2016 -

Construindo Apps Web/Mobile com Polymer e Web Components - JSday Campina Grande 2016 -

+BuenoNepomuceno@buenonp

[email protected]

meetup.com/gdg-campina-grande

facebook.com/gdgcgpb

RoteiroWebComponentsPolymer

Web Components

O que queremos resolver?

http://drbl.in/esYL

Criar abasdevia ser fácil!

http://drbl.in/esYL

http://drbl.in/esYL

<paper-tabs>

<paper-tab>KNOWLEDGE</paper-tab>

<paper-tab>HISTORY</paper-tab>

<paper-tab>FOOD</paper-tab>

</paper-tabs>

Menos código. Menos confusão.Web Components

O que são os Web Components?

Elementos customizadosdefina novos elementos HTML/DOM

<paper-tabs selected=“1”>

<paper-tab>Tab 1</paper-tab>



</paper-tabs>

declarativo, legível

HTML significativo

padrão de extensibilidade → reutilizável

Elementos cutomizadosDefinindo um novo HTML

Templates (Moldes)Nativos do lado cliente

<template>

<div class=“comment”>

<img src=“image.png”>

</div>

<script>...</script>

</template>

use DOM para produzir DOM

conteúdo é inerte até clonado/usado

HTML Templatesnativos do lado cliente

analisado, não renderizado

Shadow DOMDOM/CSS exclusivo

<video src=“foo.webm” controls></video>


Na verdade Shadow DOM

@polymer #itshackademic


Importação de HTMLCarregando web components

Elementos customizados (Custom Elements)Criação de novos elementos HTML e extensão de existentes

Templates (Moldes)Templatização nativa no browser

Shadow DOMCSS dentro de escopo!!! + DOM encapsulado

Importação de HTML (HTML Imports)Carrega definição de elementos customizados e recursos

Browser support 2016 - 1º Semestre

Polyfills Web Componentscom webcomponents.js

Browser support2016 - 1º Semestre (com Polymer)

Elementos

<ul><p>

<h1>

<paper-button><paper-checkbox>

<neon -animated-pages>

E se utilizarmos HTMLpara Web/Mobile ?

<paper-icon-button>

<paper-fab>

<paper-drawer-panel>

<paper-input>

http://bit.ly/1jkTo5c

paper-elements

Image: http://bit.ly/1mZjnTu

<paper-toolbar>Container básico para controles como abas ou botões

MY APP

<link rel=“import”

href=“paper-toolbar.html”>

<paper-toolbar>Container básico para controles como abas ou botões

MY APP

<paper-toolbar>

<span>MY APP</span>

</paper-toolbar>



<paper-toolbar>MY APP Container básico para controles

como abas ou botões

<paper-toolbar>

<paper-icon-button icon=“menu”>

</paper-icon-button>

<span>MY APP</span>

</paper-toolbar>



<paper-toolbar>MY APP Container básico para controles

como abas ou botões

Container simples com cabeçalho e seção de conteúdo

<paper-header-panel> MY APP

<paper-header-panel flex>

<paper-toolbar>

<paper-icon-button icon=“menu">


<div>MY APP</div>

</paper-toolbar>

<div class=“content”>…</div>

</paper-header-panel>



<paper-toolbar>



<div>MY APP</div>

</paper-toolbar>






<paper-toolbar>



<div>MY APP</div>

</paper-toolbar>




<paper-header-panel>


<paper-toolbar>



<div>MY APP</div>

</paper-toolbar>



MY APP


<paper-header-panel mode=“scroll" flex>

<paper-toolbar>



<div>MY APP</div>

</paper-toolbar>



<paper-header-panel>

Toolbar com rolagem na página

Container responsivo que combina painéis esquerdo e direito e área principal de conteúdo



<div drawer> Drawer panel... </div>

<div main> Main panel... </div>

</paper-drawer-panel>





<paper-drawer-panel>Container responsivo que combina painéis esquerdo e direito e área principal de conteúdo





<paper-drawer-panel>Container responsivo que combina painéis esquerdo e direito e área principal de conteúdo

<paper-input floatinglabel

label="Type only numbers... (floating)"

allowed-pattern="^[0-9]*$"

error-message="Input is not a number!">

</paper-input>

<paper-checkbox></paper-checkbox>

<div class=“card”>

<img src=“science.svg”>

<paper-ripple></paper-ripple>

</div>

Efeito de cor reativo que indica toque ou ação de mouse

<paper-ripple>

<paper-material elevation=“5” animated>

<div class=“card”>...</div>

</paper-material>

Sombra dinâmica para efeito de profundidade e relacionamentos espaciais

<paper-material>

Estilos

<paper-slider min=“0” max=“100”>

</paper-slider>

permite estilizar nós internos do shadow dom de um elemento

<style is=”custom-style”></style>

<paper-slider min=“0” max=“100”>

</paper-slider>

<style is=”custom-style”></style>

<style is=“custom-style”>

--paper-slider-pin-color: #f4b400;

</style>

permite estilizar nós internos do shadow dom de um elemento

html /deep/ paper-ripple {

background-color: #E91E63;

}

permite estilizar todos os comportamentos

/deep/

com /deep/ vocêpode aplicar temas

source: ebidel.github.io/material-playground

polymer-topeka.appspot.com

polymer-project.org/1.0/

Não estamos sós

Mozilla Brick

<brick-appbar>

<brick-deck>

<brick-tabbar>

<paper-icon-button>

<x-instagram>

(not shown)

Web Componentspodem trabalhar juntos

Aprenda mais!

polymer-project.org

Compartilhe!

customelements.io

EXPLORE

<créditos: @darktears, Alexis Menard, Intel>

<obrigado>

Software

Construindo apps web mobile com polymer - jsday campina grande - 23 de abril de 2016