A sustentabilidade no setor da construção e o isomorfismo institucional
Isomorfismo pra quê?
128
Isomorfismo Pra quê? Fernanda Bernardo
-
Upload
fernanda-bernardo -
Category
Technology
-
view
270 -
download
0
Transcript of Isomorfismo pra quê?
IsomorfismoPra quê?
Fernanda Bernardo
Voltando no tempo…
1993 Páginas estáticas
1993 Páginas estáticas
1995Javascript
E se fosse possível rodar JS no servidor e no cliente?
UX
Server / Client
1993 Páginas estáticas
200X SPA
1995Javascript
SPA
● Single Page Application● Modelo de desenvolvimento● Sem reload ● Dados assíncronos
SEO / JS
E se fosse possível rodar JS no servidor e no cliente?
1993 Páginas estáticas
2009Node JS
200X SPA
1995Javascript
E se fosse possível rodar um mesmo JS no servidor e no
cliente?
1993 Páginas estáticas
2009Node JS
200X SPA
1995Javascript
2011 Javascript Isomórfico
O que é Isomorfismo?
isomorfismo
i.so.mor.fis.mo
sm (iso+morfo1+ismo)
substantivo masculino1. á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.
isomorfismo
i.so.mor.fis.mo
sm (iso+morfo1+ismo)
substantivo masculino1. á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.
JAVASCRIPTJAVASCRIPT
E no código?
It's Show Time!
pessoa.js
pessoa_parser.js
pessoa_parser.js
pessoa_parser.js
main.js
main.js
main.js
index.html
main.js
main.js
main.js
pessoa_parser.js
Rotas
Renderização
View Models
Persistência
Log
Eventos UI
Rotas
Renderização
View Models
i18n
i18n
Sessão
Local Storage
Rotas
Renderização
View Models
Persistência
i18n
Log
Sessão
Eventos UI
Local Storage
isomórfico
Quem usa?
Charlie Robbins
● 2011
● Arquitetura isomórfica
● Adoção lenta
Spike Brehm
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
● Reconstrução site mobile web
● Diminuir tempo carregamento da página
● Melhorar UX para o usuário
Kristofer Baxter
JavaStrutsTiles
JavascriptJQuery
JavaStrutsTiles
JavascriptJQuery
Prototipação
JavaStrutsTiles
JavascriptJQuery
JavaStrutsTiles
JavascriptJQuery
Servidor de Componentes
Requisição
1ª requisição
JSONRequisição
1ª requisição
Compo-nente
JSONRequisição
1ª requisição
Compo-nente
PáginaJSON
Requisição
1ª requisição
2ª requisição
Requisição
Requisição
JSONRequisição
RequisiçãoComponente
2ª requisição
Prós / Contras
Menos duplicação de códigoMais fácil de dar manutenção
Menos tempo gasto para escrever código no servidor e no cliente.
Levar em conta onde o código será executado
Primeiro request é rápido e os outros ainda mais.
Mais simples de funcionar sem JS, servidor retorna o HTML.
Debug é mais complicado
Evitar expor dados sensíveis
Os frameworks mudam muito rápido
Se sua página não tiver muita atualização dinâmica, você irá implementar muito código para pouco benefício
Frameworks / Libs
● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI
● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI
● Primeira lib isomórfica open source
● Yahoo!
● Abril 2012
● Dependência do YUI
Real Time
Configurações
Configurações
Configurações
Configurações
53 scripts
Projeto básico muito pesado
Projeto básico muito pesado
Load: 3.01 s
Não funciona sem JS
Documentação
Componentes
● Oferece uma linguagem de templates para renderizar HTML (só view).
● Não pode ser comparado com Angular, Ember, Backbone...
Aplicação Simples Load: 343 ms
Aplicação com Router Load: 793 ms
Não suporta < IE8
Marko faz o HTML ser mais parecido com JavaScript
JSX faz o JavaScript ser mais parecido com HTML
Support Libs
Faz o browser suportar require(‘modules’)
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/
