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
16. 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>
17. Elementos HTML5 podem ser
estilizados no Internet Explorer 6
porque nele é possível definir
novos elementos
https://github.com/afarkas/html5shiv
19. Acabamos de criar uma série de
elementos sem valor semântico
fora do escopo do nosso projeto
20.
21. HTML
<div itemscope
itemtype="http://schema.org/NewsArticle">
<!-- -->
</div>
Microformats acrescentam
significado ao conteúdo
22. 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
23. 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
24. Utilizar classes e microformats é mais
adequado sob a ótica de estilização e
semântica que definir novos elementos
25. 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>
40. 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
41. 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
42. JAVASCRIPT
var userData = '<script src="authstealer.js">'
el.innerHTML = t.replace('{{name}}', userData)
Assim é que sofremos um XSS attack
49. 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
50. Shadow DOM
Permite isolar código HTML o
mantendo livre de interferências
da página
51. 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
55. 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
57. 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
61. 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
62. 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
64. Mas perder a identidade da página
a cada Shadow DOM geralmente
não é a intenção
65. 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
66. 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)
82. 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
92. 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
93. 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