O documento discute o conceito de isomorfismo no desenvolvimento de aplicações web, onde o mesmo código JavaScript pode ser executado tanto no servidor quanto no cliente. Isso permite renderizar HTML no servidor para SEO e performance, mas também ter a flexibilidade de lógica de aplicação no cliente. Vários frameworks como React, Angular e Meteor implementam essa arquitetura isomórfica.

1. Isomorfismo
Pra quê?
Fernanda Bernardo

2. Voltando no tempo…

3. 1993 Páginas estáticas

6. 1993 Páginas estáticas
1995Javascript

8. E se fosse possível rodar JS no
servidor e no cliente?

11. UX

12. Server / Client

13. 1993 Páginas estáticas
200X SPA
1995Javascript

14. SPA
● Single Page Application
● Modelo de desenvolvimento
● Sem reload
● Dados assíncronos

16. SEO / JS

17. E se fosse possível rodar JS no
servidor e no cliente?

18. 1993 Páginas estáticas
2009Node JS
200X SPA
1995Javascript

19. E se fosse possível rodar um
mesmo JS no servidor e no
cliente?

20. 1993 Páginas estáticas
2009Node JS
200X SPA
1995Javascript
2011 Javascript Isomórfico

21. O que é Isomorfismo?

22. isomorfismo
i.so.mor.fis.mo
sm (iso+morfo1
+ismo)
substantivo masculino
1. álg correspondência biunívoca entre os elementos de dois grupos, que
preserva as operações de ambos; homomorfismo.
2. miner fenômeno pelo qual duas ou mais substâncias de composição
química diferente se apresentam com a mesma estrutura cristalina.
3. bio similaridade superficial entre indivíduos de diferentes espécies ou
raças.

23. isomorfismo
i.so.mor.fis.mo
sm (iso+morfo1
+ismo)
substantivo masculino
1. álg correspondência biunívoca entre os elementos de dois grupos, que
preserva as operações de ambos; homomorfismo.
2. miner fenômeno pelo qual duas ou mais substâncias de composição
química diferente se apresentam com a mesma estrutura cristalina.
3. bio similaridade superficial entre indivíduos de diferentes espécies ou
raças.

24. JAVASCRIPTJAVASCRIPT

29. E no código?

31. It's Show
Time!

32. pessoa.js

33. pessoa_parser.js

34. pessoa_parser.js

35. pessoa_parser.js

36. main.js

37. main.js

38. main.js

40. index.html

44. main.js

45. main.js

46. main.js

47. pessoa_parser.js

51. Rotas
Renderização
View Models
Persistência
Log
Eventos UI
Rotas
Renderização
View Models
i18n
i18n
Sessão
Local Storage

52. Rotas
Renderização
View Models
Persistência
i18n
Log
Sessão
Eventos UI
Local Storage
isomórfico

53. Quem usa?

55. Charlie Robbins

56. ● 2011
● Arquitetura isomórfica
● Adoção lenta

57. Spike Brehm

58. We really want a hybrid of the new and old approaches:
we want to serve fully-formed HTML from the server for
performance and SEO, but we want the speed and
flexibility of client-side application logic.
Spike Brehm

61. ● Reconstrução site mobile web
● Diminuir tempo carregamento da página
● Melhorar UX para o usuário

62. Kristofer Baxter

63. Java
Struts
Tiles
Javascript
JQuery

64. Java
Struts
Tiles
Javascript
JQuery

65. Prototipação

66. Java
Struts
Tiles
Javascript
JQuery

67. Java
Struts
Tiles
Javascript
JQuery

69. Servidor de
Componentes

71. Requisição
1ª requisição

72. JSON
Requisição
1ª requisição

73. Compo-
nente
JSON
Requisição
1ª requisição

74. Compo-
nente
Página
JSON
Requisição
1ª requisição

75. 2ª requisição
Requisição
Requisição

76. JSON
Requisição
Requisição
Componente
2ª requisição

80. Prós / Contras

82. Menos duplicação de código
Mais fácil de dar manutenção

83. Menos tempo gasto para escrever
código no servidor e no cliente.

84. Levar em conta onde o
código será executado

85. Primeiro request é rápido
e os outros ainda mais.

86. Mais simples de funcionar sem
JS, servidor retorna o HTML.

87. Debug é mais
complicado

88. Evitar expor
dados sensíveis

89. Os frameworks mudam
muito rápido

90. Se sua página não tiver muita atualização dinâmica, você
irá implementar muito código para pouco benefício

91. Frameworks / Libs

94. ● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI

95. ● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI

96. ● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI

99. Real Time

100. Configurações

101. Configurações

102. Configurações

103. Configurações

105. 53 scripts

106. Projeto básico
muito pesado

107. Projeto básico
muito pesado
Load: 3.01 s

108. Não funciona
sem JS

109. Documentação

110. Componentes

112. ● Oferece uma linguagem de templates para
renderizar HTML (só view).
● Não pode ser comparado com Angular, Ember,
Backbone...

113. Aplicação Simples Load: 343 ms

114. Aplicação com Router Load: 793 ms

117. Não suporta
< IE8

119. Marko faz o HTML ser mais parecido com JavaScript
JSX faz o JavaScript ser mais parecido com HTML

121. Support Libs

123. Faz o browser suportar require(‘modules’)

127. Referências
● http://isomorphic.net/
● http://isomorphic.net/javascript
● http://techblog.netflix.com/2015/08/making-netflixcom-faster.html
● https://blog.nodejitsu.com/scaling-isomorphic-javascript-code/
● http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
● https://medium.com/@mjackson/universal-javascript-4761051b7ae9
● https://www.lullabot.com/articles/what-is-an-isomorphic-application
● http://joshowens.me/what-is-meteor-js/
● https://www.sitepoint.com/7-reasons-develop-next-web-app-meteor/
● http://blog.andrewray.me/reactjs-for-stupid-people/
● https://scotch.io/tutorials/learning-react-getting-started-and-concepts
● http://nicolashery.com/exploring-isomorphic-javascript/
● http://browserify.org/
● https://webpack.github.io/

128. fernanda.bernardo@elo7.com
FernandaBernardo
@Feh_Bernardo