BrazilJS 2013

1. <web
components>
um futuro
chamado
@zenorocha

2. @liferay @alloyui

6. jqueryboilerplate.com

7. browserdiet.com

9. os projetos
mais populares
voltados para
client-side
estão fadados
a morrer

10. vs
<canvas>

11. document.querySelector
vs

12. vs
<input type=”date”>

13. então quer dizer
que tudo vai virar
“nativo” um dia?

14. o que as
principais
empresas da
web estão
trabalhando hoje?

16. getbootstrap.com

18. facebook.github.io/react

20. topcoat.io

22. alloyui.com

24. purecss.io

28. como usar um
“componente” hoje?

29. 1. Nunca crie! Use um plugin jQuery

30. 2. Copie e cole o código de alguém

31. 3. Torça pra que funcione

32. Web Components

33. <braziljs>
braziljs.github.io/braziljs-element

34. <video is=”camera”>
customelements.github.io/camera-element

35. Web Components
Custom
Elements
Import
Templates
Shadow DOM
Decorators*

36. Custom
Elements

37. <element name="braziljs" constructor="BrazilJS"
attributes="onde">
// implementação
</element>
<element>

38. <element name="camera" extends="video">
// implementação
</element>
<element>

39. zno.io/QxNJ

40. <brazil-js></brazil-js>
usando JS
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.textContent = 'BrazilJS!';
};
document.register('brazil-js', {
prototype: proto
});

41. lifecycle
•createdCallback
•enteredDocumentCallback
•leftDocumentCallback
•attributeChangedCallback

42. x-tags.org

43. polymer-project.org

44. <polymer-element name="braziljs" attributes="onde">
<script>
Polymer('braziljs', {
onde: 'Porto Alegre',
created: function() {
// faça algo
}
});
</script>
</polymer-element>
como usar?

45. zno.io/QxlZ

46. Templates

47. Templates
são blocos
reutilizáveis
de código

48. server-side
mustache
handlebars
liquid
jinja
velocity
savant

49. client-side
mustache
handlebars
eco
ejs
jade
hogan

50. gambiarra #1
<div id="template" style="display: none">
<img src="logo.png" class="logo.png">
</div>

51. <script id="template" type="text/x-handlebars-template">
<img src="logo.png">
</script>
gambiarra #2

52. <template>

53. <template id="meuTemplate">
<img src="">
</template>
como criar?

54. // 1. Acessa o conteúdo do template
var t = document.querySelector('#meuTemplate').content;
// 2. Manipula elemento interno do template
t.querySelector('img').src = 'logo.png';
// 3. Clona e insere no DOM
document.body.appendChild(t.cloneNode(true));
como usar?

55. Shadow
DOM

56. Shadow DOM
esconde os
detalhes de
implementação

57. mas e o
<iframe>?

58. do que é feito
um <video>?
ou um password, textarea, date?

59. como usar?
<h1>Documento</h1>
<div id=”cuia”></div>
var cuia = document.querySelector('#cuia')
.createShadowRoot();
cuia.innerHTML = '<h1>Mate</h1>';

60. estilo, marcação e
script encapsulados
<h1>Documento</h1>
<div id=”cuia”></div>
var cuia = document.querySelector('#cuia')
.createShadowRoot();
cuia.innerHTML = '<h1>Mate</h1>' +
'<style>h1 { color: #f00; }</style>';

61. como ativar?

62. Import

67. como usar?
<link rel="import" href="braziljs.html">

69. jonrimmer.github.io/are-we-componentized-yet

70. Flags

71. quero usar hoje,
onde eu encontro?
NPM? Bower?

72. @eduardolundgren

73. @bernarddeluna

74. customelements.io

75. <twitter>
customelements.github.io/twitter-element

76. <gmaps>
customelements.github.io/gmaps-element

77. <video is=”camera”>
customelements.github.io/camera-element

78. <video is=”tracking”>
eduardolundgren.github.io/tracking-element

79. ou seja...

80. encapsulamento e
reaproveitamento de
código de verdade

81. A melhor forma de
prever o futuro é
inventando ele

82. e..... camisetas!