Componentes 
para a web 
uma visão sobre tudo aquilo 
que realmente importa
jcemer.com 
github.com/jcemer 
twitter.com/jcemer 
speakerdeck.com/jcemer
Definição 
Componente 
Elemento de software que encapsula 
uma série de funcionalidades 
relacionadas
Unidade independente que pode ser 
composta com outros componentes 
para formar um sistema mais complexo
• Independentes 
• Intercambiáveis 
• Reusáveis 
modularidade 
e coesão
Introducing the new UX and UI for 
Google News platform 
George Kvasnikov · 10/2014 
http://googlenews.gkvasnikov.com
HTML 
JavaScript 
CSS
Definição 
Web Components 
Coleção de padrões que permitem 
encapsular, compor e reusar 
código na plataforma web
• Custom Elements 
• Templates 
• Shadow DOM 
• HTML Imports
Web Components are here to fundamentally 
change the way we think, build, and 
consume our web apps. 
Eric Bidelman 
Googl...
Web Components 
Debunked!
Daqui em adiante, você irá se 
frustrar um pouco, faz parte do 
processo
Custom Elements 
Permite estender e definir novos 
elementos de HTML
HTML 
<news> 
<author uid="jim-kennedy"> 
Jim Kennedy</author> 
<time>April 23</time> 
<title>What is the core of 
Palesti...
Elementos HTML5 podem ser 
estilizados no Internet Explorer 6 
porque nele é possível definir 
novos elementos 
https://gi...
1. Semântica
Acabamos de criar uma série de 
elementos sem valor semântico 
fora do escopo do nosso projeto
HTML 
<div itemscope 
itemtype="http://schema.org/NewsArticle"> 
<!-- --> 
</div> 
Microformats acrescentam 
significado a...
Sabemos que não há nenhuma 
semântica a ser seguida quando 
atribuímos classes a um elemento 
http://nicolasgallagher.com/...
HTML 
<div class="board-item 
board-item--hightlight"> 
<!-- --> 
</div> 
É muito mais flexível e prático utilizar 
classe...
Utilizar classes e microformats é mais 
adequado sob a ótica de estilização e 
semântica que definir novos elementos
HTML 
<div class="board-item" itemscope 
itemtype="http://schema.org/NewsArticle"> 
<div class="person" itemprop="author">...
Função dos 
2. elementos
Alguns elementos possuem 
funções que ultrapassam a de 
atribuir semântica ao conteúdo
HTML 
<link href="style.css" rel="stylesheet"> 
<script src="application.js"></script> 
<iframe src="content.html"></ifram...
HTML 
<form> 
<input type="text"> 
<input type="password"> 
<select> 
<option>Option 1</option> 
<option>Option 2</option>...
MacOS iPad iPhone
Vejamos um exemplo de 
elemento do projeto 
Polymer
https://www.polymer-project.org/docs/elements/paper-elements. 
html#paper-dropdown-menu
https://www.polymer-project.org/docs/elements/paper-elements. 
html#paper-dropdown-menu
https://www.polymer-project.org/docs/elements/paper-elements. 
html#paper-dropdown-menu
Não reinvente elementos que 
já existem, os usuários 
agradecem
Template 
Repositório para fragmentos de 
HTML a serem utilizados por 
código JavaScript
O panorama dos 
templates na web (
HTML 
<div data-template style="display:none"> 
<img src="image.png"> 
<div>{{name}}</div> 
</div> 
Conteúdo será processa...
HTML 
<script type="text/template"> 
<img src="image.png"> 
<div>{{name}}</div> 
</script> 
Conteúdo é uma string que 
pod...
JAVASCRIPT 
var userData = '<script src="authstealer.js">' 
el.innerHTML = t.replace('{{name}}', userData) 
Assim é que so...
)
HTML 
<template> 
<img src="image.png"> 
<div data-name>{{name}}</div> 
</template> 
JAVASCRIPT 
var t = document.querySel...
Templates no 
3. HTML
Não há benefício em ter no documento 
templates acessíveis apenas pelo 
JavaScript
JAVASCRIPT / JSX 
/** @jsx React.DOM */ 
var Avatar = React.createClass({ 
render: function() { 
return <div> 
<img src="i...
JAVASCRIPT 
var Avatar = React.createClass({ 
displayName: 'Avatar', 
render: function() { 
return React.DOM.div(null, 
Re...
JSX JavaScript XML syntax 
• Fácil de visualizar a estrutura 
• Designers sentem-se confortáveis 
em fazer alterações 
• P...
Shadow DOM 
Permite isolar código HTML o 
mantendo livre de interferências 
da página
I’m definitely not a fan of making your 
widget out of a <canvas>. It is reliable but it’s 
hostile to accessibility, inde...
Definição 
Widgets 
Pequena aplicação de terceiros que 
pode ser instalada em suas páginas
Shadow DOM de 
4. elementos nativos
Shadow Dom
Hiding Native HTML5 Video Controls in 
Full-Screen Mode 
Chris Coyier 
http://css-tricks.com/custom-controls- 
in-html5-vi...
CSS 
video /deep/ input[type="range"] { 
display: none; 
}
Maintainable JavaScript: Don’t modify 
objects you don’t own 
Nicholas C. Zakas 
http://www.nczonline.net/blog/2010/03/02/...
http://videos.clicrbs.com.br
Widgets não devem ser 
manipulados de maneiras 
escusas
Encapsulamento 
5. de CSS
HTML 
<div class="widget"></div> 
<p>Not blue content</p> 
<script> 
var root = document.querySelector('.widget') 
.create...
HTML 
<style> p { background: red } </style> 
<div class="widget"></div> 
<script> 
var root = document.querySelector('.wi...
O que faz todo sentido 
quando temos um widget
Mas perder a identidade da página 
a cada Shadow DOM geralmente 
não é a intenção
Não esqueça que conflitos de CSS 
podem ser evitados com a adoção de 
um sistema de escrita 
http://tableless.com.br/oocss...
HTML 
<div class="widget"> 
<style scoped> 
p { color: red } 
</style> 
<p>Red content</p> 
</div> 
Scoped CSS poderia ser...
HTML Imports 
Permite carregar documentos 
HTML de maneira assíncrona
6. Requests
Permite isolar as definições de 
componentes e templates as 
custas de requests
Escopo e 
7. dependências
Código JavaScript é executado 
no mesmo escopo de window
HTML 
<head> 
<title>My funny document</title> 
<link rel="import" href="dangerous.html"> 
</head> 
dangerous.html 
<scrip...
Dependendo da ordem das 
importações, dependências 
podem ser sobrescritas
HTML 
<script src="http://cdn/jquery.js"></script> 
<script> 
$.fn.myPlugin = function () {} 
</script> 
<link rel="import...
Web Components 
The good parts
Web Components 
The good parts 
Aquilo que humildemente acho legal
A única alternativa para se 
criar widgets atualmente é 
através de iframes
Iframes não permitem gerenciar 
externamente seu conteúdo e 
nem aferir sua dimensão
Encapsulamento 
1. com interfaces
HTML 
<div data-widget> 
<h1 data-page-content>Personal Content</h1> 
</div> 
<script> 
document 
.querySelector('[data-wi...
My widget 
Personal Content
HTML 
.sign-up::part(login-label) { 
color: orange; 
} 
Shadow DOM permite definir 
elementos parts passíveis de 
estiliza...
Login
Shadow DOM permite definir 
widgets com interfaces
HTML 
♥ <twitter-timeline user="jcemer"> 
@jcemer
HTML 
<gmaps-address locale="Porto Alegre"> 
<div data-address-modal> 
Auditório do SENAC <!-- --> 
</div> 
</gmaps-addres...
Componentes 
2. e dependências
HTML 
<script src="http://twitter.com/timeline.js"> 
</script> 
timeline.js 
document.registerElement('twitter-timeline') ...
Nestes casos, um encapsulamento 
mais flexível pode ser interessante
HTML 
<link rel="import" 
href="http://twitter.com/timeline.html"> 
timeline.html 
<template> 
<!-- --> 
</template> 
<scr...
Imports permitem melhor 
administrar dependências
HTML 
<link rel="import" href="jquery.html"> 
<link rel="import" href="timeline.html"> 
timeline.html 
<link rel="import" ...
HTML 
<link rel="import" href="jquery.html"> 
<link rel="import" 
src="http://twitter.com/timeline.html"> 
timeline.html 
...
Imports e templates precisam 
evoluir para solucionar mais 
problemas
Atribuindo 
3. comportamento
Componentes não devem ser 
instanciados considerando a 
página em que estão
JAVASCRIPT 
if ($('body').is('.page-product')) { 
$('[data-draggable]').draggable() 
$('[data-comments]').comments() 
} 
i...
Angular.js e Dojo usam elementos 
HTML como referência para 
instanciar componentes
Custom Elements permitem assistir 
ao ciclo de vida de um elemento
HTML 
<img src="jcemer.jpg" alt="Tableless Guy">
HTML 
<img src="diego.jpg" alt="Tableless Guy"> 
<script> 
document.querySelector('img').src = 'diego.jpg' 
</script>
Nesta trincheira, Custom Elements é 
infinitamente melhor que tudo que 
temos até então
• Elemento criado 
createdCallback
• Adicionado ao DOM 
attachedCallback
• Removido do DOM 
detachedCallback
• Alterações nos atributos 
attributeChangedCallback
JAVASCRIPT 
var newsItemProto = 
Object.create(HTMLElement.prototype) 
newsItemProto.attributeChangedCallback = 
function ...
Podemos assistir mudanças 
nos atributos de um elemento
Novos elementos são úteis apenas 
para gerenciar comportamento
HTML 
<news-item class="board-item" itemscope 
itemtype="http://schema.org/NewsArticle"> 
<div class="person" itemprop="au...
HTML 
<article is="news-item" 
class="board-item" itemscope 
itemtype="http://schema.org/NewsArticle"> 
<div class="person...
JAVASCRIPT 
document.registerElement('news-item', { 
prototype: newsItemProto, 
extends: 'article' 
})
Polymer 
Debunked!
Polymer é um projeto que 
utiliza Web Components
O Polymer não poderá ser retirado 
do projeto quando os navegadores 
derem suporte a Web Components
The good parts 
Polymer é uma das alternativas para 
utilizar Web Components hoje mesmo 
http://jonrimmer.github.io/are-we...
Why Web Components Aren’t Ready for 
Production… Yet 
TJ VanToll 
http://developer.telerik.com/featured/web-components-are...
• Independentes 
• Intercambiáveis 
• Reusáveis 
modularidade 
e coesão
• Sistema para escrita de CSS 
• Modularização no JavaScript 
• Ferramenta para build de código 
• Custom Elements e Shado...
Seja cético e questione o valor de 
cada nova tecnologia (mas não critique 
por pura preguiça) 
Jean Carlo 
não trabalha n...
Cheers @jcemer
Componentes para a Web
Componentes para a Web
Componentes para a Web
Componentes para a Web
Componentes para a Web
Próximos SlideShares
Carregando em…5
×

Componentes para a Web

472 visualizações

Publicada em

Uma visão crítica sobre o hype da vez. Esta palestra tem como norte tirar o ruído e fundamentar (inclusive com exemplos) o
 que realmente importa neste papo de componentes.

http://frontinpoa.com.br/2014
Video: https://www.youtube.com/watch?v=KhSDReAefx0

Publicada em: Tecnologia
0 comentários
6 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
472
No SlideShare
0
A partir de incorporações
0
Número de incorporações
51
Ações
Compartilhamentos
0
Downloads
5
Comentários
0
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Componentes para a Web

  1. 1. Componentes para a web uma visão sobre tudo aquilo que realmente importa
  2. 2. jcemer.com github.com/jcemer twitter.com/jcemer speakerdeck.com/jcemer
  3. 3. Definição Componente Elemento de software que encapsula uma série de funcionalidades relacionadas
  4. 4. Unidade independente que pode ser composta com outros componentes para formar um sistema mais complexo
  5. 5. • Independentes • Intercambiáveis • Reusáveis modularidade e coesão
  6. 6. Introducing the new UX and UI for Google News platform George Kvasnikov · 10/2014 http://googlenews.gkvasnikov.com
  7. 7. HTML JavaScript CSS
  8. 8. Definição Web Components Coleção de padrões que permitem encapsular, compor e reusar código na plataforma web
  9. 9. • Custom Elements • Templates • Shadow DOM • HTML Imports
  10. 10. Web Components are here to fundamentally change the way we think, build, and consume our web apps. Eric Bidelman Google
  11. 11. Web Components Debunked!
  12. 12. Daqui em adiante, você irá se frustrar um pouco, faz parte do processo
  13. 13. Custom Elements Permite estender e definir novos elementos de HTML
  14. 14. HTML <news> <author uid="jim-kennedy"> Jim Kennedy</author> <time>April 23</time> <title>What is the core of Palestinian conflict?</title> <news-stats> <stats-reads>26</stats-reads> <stats-shares>312</stats-shares> <stats-likes>216</stats-shares> </news-stats> </news>
  15. 15. Elementos HTML5 podem ser estilizados no Internet Explorer 6 porque nele é possível definir novos elementos https://github.com/afarkas/html5shiv
  16. 16. 1. Semântica
  17. 17. Acabamos de criar uma série de elementos sem valor semântico fora do escopo do nosso projeto
  18. 18. HTML <div itemscope itemtype="http://schema.org/NewsArticle"> <!-- --> </div> Microformats acrescentam significado ao conteúdo
  19. 19. Sabemos que não há nenhuma semântica a ser seguida quando atribuímos classes a um elemento http://nicolasgallagher.com/about-html-semantics- front-end-architecture
  20. 20. HTML <div class="board-item board-item--hightlight"> <!-- --> </div> É muito mais flexível e prático utilizar classes com nomes relacionados a aparência para estilizar
  21. 21. Utilizar classes e microformats é mais adequado sob a ótica de estilização e semântica que definir novos elementos
  22. 22. HTML <div class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </div>
  23. 23. Função dos 2. elementos
  24. 24. Alguns elementos possuem funções que ultrapassam a de atribuir semântica ao conteúdo
  25. 25. HTML <link href="style.css" rel="stylesheet"> <script src="application.js"></script> <iframe src="content.html"></iframe>
  26. 26. HTML <form> <input type="text"> <input type="password"> <select> <option>Option 1</option> <option>Option 2</option> </select> </form>
  27. 27. MacOS iPad iPhone
  28. 28. Vejamos um exemplo de elemento do projeto Polymer
  29. 29. https://www.polymer-project.org/docs/elements/paper-elements. html#paper-dropdown-menu
  30. 30. https://www.polymer-project.org/docs/elements/paper-elements. html#paper-dropdown-menu
  31. 31. https://www.polymer-project.org/docs/elements/paper-elements. html#paper-dropdown-menu
  32. 32. Não reinvente elementos que já existem, os usuários agradecem
  33. 33. Template Repositório para fragmentos de HTML a serem utilizados por código JavaScript
  34. 34. O panorama dos templates na web (
  35. 35. HTML <div data-template style="display:none"> <img src="image.png"> <div>{{name}}</div> </div> Conteúdo será processado e a imagem será requisitada para o servidor
  36. 36. HTML <script type="text/template"> <img src="image.png"> <div>{{name}}</div> </script> Conteúdo é uma string que pode expor a aplicação a Cross-site scripting
  37. 37. JAVASCRIPT var userData = '<script src="authstealer.js">' el.innerHTML = t.replace('{{name}}', userData) Assim é que sofremos um XSS attack
  38. 38. )
  39. 39. HTML <template> <img src="image.png"> <div data-name>{{name}}</div> </template> JAVASCRIPT var t = document.querySelector('template') t.content.querySelector('[data-name]') .textContent = userData document.body.appendChild( document.importNode(t.content, true));
  40. 40. Templates no 3. HTML
  41. 41. Não há benefício em ter no documento templates acessíveis apenas pelo JavaScript
  42. 42. JAVASCRIPT / JSX /** @jsx React.DOM */ var Avatar = React.createClass({ render: function() { return <div> <img src="image.png"/> <div>{ this.props.name }</div> </div> } })
  43. 43. JAVASCRIPT var Avatar = React.createClass({ displayName: 'Avatar', render: function() { return React.DOM.div(null, React.DOM.img({src: "image.png"}), React.DOM.div(null, this.props.name) ) } })
  44. 44. JSX JavaScript XML syntax • Fácil de visualizar a estrutura • Designers sentem-se confortáveis em fazer alterações • Previne Cross-site scripting http://facebook.github.io/react/docs/jsx-in-depth.html
  45. 45. Shadow DOM Permite isolar código HTML o mantendo livre de interferências da página
  46. 46. I’m definitely not a fan of making your widget out of a <canvas>. It is reliable but it’s hostile to accessibility, indexing, composition, and resolution independence Dominic Cooney Google
  47. 47. Definição Widgets Pequena aplicação de terceiros que pode ser instalada em suas páginas
  48. 48. Shadow DOM de 4. elementos nativos
  49. 49. Shadow Dom
  50. 50. Hiding Native HTML5 Video Controls in Full-Screen Mode Chris Coyier http://css-tricks.com/custom-controls- in-html5-video-full-screen Shadow DOM CSS Cheat Sheet Rob Dodson http://robdodson.me/blog/2014/04/10/ shadow-dom-css-cheat-sheet
  51. 51. CSS video /deep/ input[type="range"] { display: none; }
  52. 52. Maintainable JavaScript: Don’t modify objects you don’t own Nicholas C. Zakas http://www.nczonline.net/blog/2010/03/02/maintainable-javascript- dont-modify-objects-you-down-own
  53. 53. http://videos.clicrbs.com.br
  54. 54. Widgets não devem ser manipulados de maneiras escusas
  55. 55. Encapsulamento 5. de CSS
  56. 56. HTML <div class="widget"></div> <p>Not blue content</p> <script> var root = document.querySelector('.widget') .createShadowRoot() root.innerHTML = '<style>' + 'p { color: blue }</style>' </script> As regras definidas no Shadow DOM não surtem efeito na página
  57. 57. HTML <style> p { background: red } </style> <div class="widget"></div> <script> var root = document.querySelector('.widget') .createShadowRoot() root.innerHTML = '<p>Content</p>' </script> E as regras de CSS definidas na página não se aplicam ao Shadow DOM
  58. 58. O que faz todo sentido quando temos um widget
  59. 59. Mas perder a identidade da página a cada Shadow DOM geralmente não é a intenção
  60. 60. Não esqueça que conflitos de CSS podem ser evitados com a adoção de um sistema de escrita http://tableless.com.br/oocss-smacss-bem-dry-css- afinal-como-escrever-css
  61. 61. HTML <div class="widget"> <style scoped> p { color: red } </style> <p>Red content</p> </div> Scoped CSS poderia ser um recurso tão interessante (se não só o Firefox tivesse suporte)
  62. 62. HTML Imports Permite carregar documentos HTML de maneira assíncrona
  63. 63. 6. Requests
  64. 64. Permite isolar as definições de componentes e templates as custas de requests
  65. 65. Escopo e 7. dependências
  66. 66. Código JavaScript é executado no mesmo escopo de window
  67. 67. HTML <head> <title>My funny document</title> <link rel="import" href="dangerous.html"> </head> dangerous.html <script> document.getElementById = function () {} </script>
  68. 68. Dependendo da ordem das importações, dependências podem ser sobrescritas
  69. 69. HTML <script src="http://cdn/jquery.js"></script> <script> $.fn.myPlugin = function () {} </script> <link rel="import" href="overwrite.html"> overwrite.html <script src="http://cdn/jquery.js"></script>
  70. 70. Web Components The good parts
  71. 71. Web Components The good parts Aquilo que humildemente acho legal
  72. 72. A única alternativa para se criar widgets atualmente é através de iframes
  73. 73. Iframes não permitem gerenciar externamente seu conteúdo e nem aferir sua dimensão
  74. 74. Encapsulamento 1. com interfaces
  75. 75. HTML <div data-widget> <h1 data-page-content>Personal Content</h1> </div> <script> document .querySelector('[data-widget]') .createShadowRoot() .innerHTML = '<div>My widget</div>' + '<content select="[data-page-content]">' + '</content>' </script>
  76. 76. My widget Personal Content
  77. 77. HTML .sign-up::part(login-label) { color: orange; } Shadow DOM permite definir elementos parts passíveis de estilização http://robdodson.me/blog/2013/08/29/shadow-dom- styles-cont-dot
  78. 78. Login
  79. 79. Shadow DOM permite definir widgets com interfaces
  80. 80. HTML ♥ <twitter-timeline user="jcemer"> @jcemer
  81. 81. HTML <gmaps-address locale="Porto Alegre"> <div data-address-modal> Auditório do SENAC <!-- --> </div> </gmaps-address> ♥
  82. 82. Componentes 2. e dependências
  83. 83. HTML <script src="http://twitter.com/timeline.js"> </script> timeline.js document.registerElement('twitter-timeline') Elementos são registrados diretamente através de JavaScript
  84. 84. Nestes casos, um encapsulamento mais flexível pode ser interessante
  85. 85. HTML <link rel="import" href="http://twitter.com/timeline.html"> timeline.html <template> <!-- --> </template> <script> document.registerElement('twitter-timeline') </script>
  86. 86. Imports permitem melhor administrar dependências
  87. 87. HTML <link rel="import" href="jquery.html"> <link rel="import" href="timeline.html"> timeline.html <link rel="import" href="jquery.html"> Documentos indicados no import são incluídos uma única vez
  88. 88. HTML <link rel="import" href="jquery.html"> <link rel="import" src="http://twitter.com/timeline.html"> timeline.html <link rel="import" href="jquery.html"> Não resolve o problema em diferentes domínios
  89. 89. Imports e templates precisam evoluir para solucionar mais problemas
  90. 90. Atribuindo 3. comportamento
  91. 91. Componentes não devem ser instanciados considerando a página em que estão
  92. 92. JAVASCRIPT if ($('body').is('.page-product')) { $('[data-draggable]').draggable() $('[data-comments]').comments() } if ($('body').is('.page-checkout')) { $('[data-draggable]').draggable() $('[data-datepicker]').datepicker() }
  93. 93. Angular.js e Dojo usam elementos HTML como referência para instanciar componentes
  94. 94. Custom Elements permitem assistir ao ciclo de vida de um elemento
  95. 95. HTML <img src="jcemer.jpg" alt="Tableless Guy">
  96. 96. HTML <img src="diego.jpg" alt="Tableless Guy"> <script> document.querySelector('img').src = 'diego.jpg' </script>
  97. 97. Nesta trincheira, Custom Elements é infinitamente melhor que tudo que temos até então
  98. 98. • Elemento criado createdCallback
  99. 99. • Adicionado ao DOM attachedCallback
  100. 100. • Removido do DOM detachedCallback
  101. 101. • Alterações nos atributos attributeChangedCallback
  102. 102. JAVASCRIPT var newsItemProto = Object.create(HTMLElement.prototype) newsItemProto.attributeChangedCallback = function (attr, oldValue, value) {} var newsItem = document.registerElement('news-item', { prototype: newsItemProto })
  103. 103. Podemos assistir mudanças nos atributos de um elemento
  104. 104. Novos elementos são úteis apenas para gerenciar comportamento
  105. 105. HTML <news-item class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </news-item>
  106. 106. HTML <article is="news-item" class="board-item" itemscope itemtype="http://schema.org/NewsArticle"> <div class="person" itemprop="author"> Jim Kennedy</div> <time itemprop="datePublished"> April 23</time> <div class="board-item__title" itemprop="name"><!-- --></div> <div class="board-stats"> <div class="board-stats__reads">26</div> <div class="board-stats__shares">312</div> <div class="board-stats__likes">216</div> </div> </article>
  107. 107. JAVASCRIPT document.registerElement('news-item', { prototype: newsItemProto, extends: 'article' })
  108. 108. Polymer Debunked!
  109. 109. Polymer é um projeto que utiliza Web Components
  110. 110. O Polymer não poderá ser retirado do projeto quando os navegadores derem suporte a Web Components
  111. 111. The good parts Polymer é uma das alternativas para utilizar Web Components hoje mesmo http://jonrimmer.github.io/are-we-componentized- yet
  112. 112. Why Web Components Aren’t Ready for Production… Yet TJ VanToll http://developer.telerik.com/featured/web-components-arent- ready-production-yet
  113. 113. • Independentes • Intercambiáveis • Reusáveis modularidade e coesão
  114. 114. • Sistema para escrita de CSS • Modularização no JavaScript • Ferramenta para build de código • Custom Elements e Shadow DOM
  115. 115. Seja cético e questione o valor de cada nova tecnologia (mas não critique por pura preguiça) Jean Carlo não trabalha no Google
  116. 116. Cheers @jcemer

×