O documento apresenta o framework Polymer e como ele pode ser usado para construir aplicações web e mobile usando Web Components. Ele descreve conceitos como Custom Elements, Templates, Shadow DOM e estilos personalizados e como elementos como <paper-toolbar>, <paper-header-panel>, <paper-drawer-panel> podem ser usados para criar interfaces. O documento também discute o suporte dos navegadores e como o Polymer pode ser usado hoje para criar aplicações cross-platform.

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

2. +BuenoNepomuceno
@buenonp
buenonp@gmail.com

5. meetup.com/gdg-campina-grande
facebook.com/gdgcgpb

6. Roteiro
WebComponents
Polymer

7. Web Components

8. O que queremos resolver?

10. http://drbl.in/esYL
Criar abas
devia ser fácil!

16. <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

17. O que são os Web Components?

18. Elementos customizados
defina novos elementos HTML/DOM

20. <paper-tabs selected=“1”>
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
<paper-tab>Tab 3</paper-tab>
</paper-tabs>
declarativo, legível
HTMLsignificativo
padrão de extensibilidade → reutilizável
Elementos cutomizados
Definindo um
novo HTML

21. Templates (Moldes)
Nativos do lado cliente

22. <template>
<div class=“comment”>
<img src=“image.png”>
</div>
<script>...</script>
</template>
use DOM para produzir DOM
conteúdo é inerte até clonado/usado
HTML Templates
nativos do lado cliente
analisado, não renderizado

23. Shadow DOM
DOM/CSS exclusivo

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

25. <video src=“foo.webm” controls></video>
Na verdade Shadow DOM
@polymer #itshackademic

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

27. Importação de HTML
Carregando web components

30. Elementos customizados (Custom Elements)
Criação de novos elementos HTML e extensão de existentes
Templates (Moldes)
Templatização nativa no browser
Shadow DOM
CSS dentro de escopo!!! + DOM encapsulado
Importação de HTML (HTML Imports)
Carrega definição de elementos customizados e recursos

31. Browser support
2016 - 1º Semestre

32. Polyfills Web Components
com webcomponents.js

34. Browser support
2016 - 1º Semestre (com Polymer)

35. Elementos

36. <ul>
<p>
<h1>

37. <paper-button>
<paper-checkbox>
<neon -animated-pages>

38. E se utilizarmos HTML
para Web/Mobile ?

39. <paper-icon-button>
<paper-fab>
<paper-drawer-panel>
<paper-input>

40. http://bit.ly/1jkTo5c
paper-elements
Image: http://bit.ly/1mZjnTu

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

42. <link rel=“import”
href=“paper-toolbar.html”>
<paper-toolbar>
Container básico para controles
como abas ou botões
MY APP

43. <paper-toolbar>
<span>MY APP</span>
</paper-toolbar>
<link rel=“import”
href=“paper-toolbar.html”>
<paper-toolbar>
MY APP Container básico para controles
como abas ou botões

44. <paper-toolbar>
<paper-icon-button icon=“menu”>
</paper-icon-button>
<span>MY APP</span>
</paper-toolbar>
<link rel=“import”
href=“paper-toolbar.html”>
<paper-toolbar>
MY APP Container básico para controles
como abas ou botões

45. 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">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>

46. <paper-header-panel>
MY APP
<paper-header-panel flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>
Container simples com
cabeçalho e seção de conteúdo

47. <paper-header-panel>
MY APP
<paper-header-panel flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>
Container simples com
cabeçalho e seção de conteúdo

48. <paper-header-panel>
<paper-header-panel flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>
MY APP
Container simples com
cabeçalho e seção de conteúdo

49. <paper-header-panel mode=“scroll" flex>
<paper-toolbar>
<paper-icon-button icon=“menu">
</paper-icon-button>
<div>MY APP</div>
</paper-toolbar>
<div class=“content”>…</div>
</paper-header-panel>
<paper-header-panel>
Toolbar com rolagem na página

50. Container responsivo que combina
painéis esquerdo e direito e área
principal de conteúdo
<paper-drawer-panel>
<paper-drawer-panel>
<div drawer> Drawer panel... </div>
<div main> Main panel... </div>
</paper-drawer-panel>

51. <paper-drawer-panel>
<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

52. <paper-drawer-panel>
<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

54. <paper-input floatinglabel
label="Type only numbers... (floating)"
allowed-pattern="^[0-9]*$"
error-message="Input is not a number!">
</paper-input>

55. <paper-checkbox></paper-checkbox>

56. <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>

57. <paper-material elevation=“5” animated>
<div class=“card”>...</div>
</paper-material>
Sombra dinâmica para efeito de
profundidade e relacionamentos
espaciais
<paper-material>

58. Estilos

59. <paper-slider min=“0” max=“100”>
</paper-slider>
permite estilizar nós
internos do shadow dom
de um elemento
<style is=”custom-style”></style>

60. <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

61. html /deep/ paper-ripple {
background-color: #E91E63;
}
permite estilizar todos
os comportamentos
/deep/

62. com /deep/ você
pode aplicar temas
source: ebidel.github.io/material-playground

63. polymer-topeka.appspot.com

65. polymer-project.org/1.0/

66. Não estamos sós

67. Mozilla Brick

68. <brick-appbar>
<brick-deck>
<brick-tabbar>

69. <paper-icon-button>
<x-instagram>
(not shown)

70. Web Components
podem trabalhar
juntos

71. Aprenda mais!

73. polymer-project.org

74. Compartilhe!

75. customelements.io

76. EXPLORE

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

78. <obrigado>