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/

[email protected] FernandaBernardo

@Feh_Bernardo