BT

Experimente a nova interface visual do InfoQ! Veja o novo design do InfoQ 3.0 e nos diga o que você achou.

Netflix.com migra para JavaScript Universal e remove Java de seu pipeline de renderização

| por David Iffland Seguir 4 Seguidores , traduzido por Lu Araujo Seguir 1 Seguidores em 07 set 2015. Tempo estimado de leitura: 2 minutos |

A equipe do Netflix.com trocou seu renderizador HTML baseado em Java por um renderizador JavaScript Universal que pode ser executado no navegador ou no servidor.

Para diminuir o tempo de espera dos usuário, o Netflix removeu o renderizador Java baseado em servidor e reduziu a quantidade de HTML enviada. No post que descreve a mudança, Kristofer Baxter, afirma que não renderizar as partes do aplicativo não visualizadas pelo usuário (dentre outras mudanças) resultou na melhoria do tempo de espera para interação em 70%.

Cada vez que um usuário entrava em qualquer página do netflix.com, a camada Java era responsável por gerar a resposta e a maior parte do HTML necessário para todo o ciclo de vida da página. Frequentemente usuários esperavam pela geração do markup referente à partes da página que não seriam visitadas.

Com o nome "JavaScript Universal", o Netflix arquitetou o novo renderizador de interface de forma a permitir sua execução tanto no navegador como no servidor node.js. Baxter afirma que essa técnica "permite que a aplicação faça renderizações iguais independente da localização do renderizador. A distinção entre servidor e cliente se tornou transparente no modelo em que ambos executam os mesmos processos com poucas chances de saídas diferentes."

Charlie Robbins apresentou a idéia em 2011 no formato em que foi implementada usando JavaScript. Ele a chamou de "JavaScript Isomórfico", o que causou anos de discussões a respeito da adequação do nome. Nos últimos meses, o nome JavaScript Universal ganhou aceitação.

Migrar para um modelo JavaScript Universal não é fácil e requer uma base sólida. Barxter contou ao InfoQ.com que qualidade de código é de suma importância. "Garantir que dois ambientes JavaScript compartilhem um contexto é imprescindível. Sem uma solução arquiteturalmente sólida para esse problema, o código facilmente se divide em diversas ramificações cliente versus servidor", afirmou Baxter.

Apesar de o Netflix ter escolhido o React,js, ele não é a única opção para implementações com esse tipo de transparência. O Ember.js está lançando a tecnologia FastBoot que promete fazer algo similar. Existem também muitas outras bibliotecas que podem ser avaliadas para esse tipo de uso.

O Netflix escolheu o sistema de JavaScript Universal após uma queda de braço dentro da empresa. Baxter explica que outro protótipo desenvolvido com técnicas SPA também foi levado em consideração:

Quando começamos a etapa de prototipação deste projeto, construímos um protótipo para cada uma das arquiteturas propostas. A primeira, uma arquitetura com JavaScript apenas no lado do cliente baseada fundamentalmente no Backbone e no JQuery. A segunda, utilizando JavaScript Universal e o React.js. Após um período de três semanas, as arquiteturas foram apresentadas para um grupo maior de pessoas e o JavaScript Universal com React.js foi o vencedor. De qualquer forma, vamos continuar experimentando com diferentes abordagens para construção de aplicações web.

A lista de organizações desenvolvendo com JavaScript Universal está crescendo. Hotel Tonight, Auto Desk, Tesco e o AirBnb estão desenvolvendo ou já desenvolveram seus produtos com essa arquitetura.

Avalie esse artigo

Relevância
Estilo/Redação

Olá visitante

Você precisa cadastrar-se no InfoQ Brasil ou para enviar comentários. Há muitas vantagens em se cadastrar.

Obtenha o máximo da experiência do InfoQ Brasil.

Dê sua opinião

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

Dúvida by rod cez

Ouço muito em falar em trabalhar com node.js no server para esse tipo de situação...
Basicamente seria o node.js rendenizar as views e o javascript continuar consumindo nossa api ? com outro server side? php/java/.net/python/ruby etc

Re: Dúvida by claudio santos

Exato.
Na primeira requisição é identificado no header que o browser precisa de Html, nas demais é uma requisão configurada a responder json, e o server implementado em node.js se vira com essas informações para fornecer exatamente o que vc precisa.

Re: Dúvida by Wellington Soares

Oi, Claudio,
Na verdade, a sua resposta é "só" metade do que eles fizeram.... A grande diferença é que esse Backend para renderizar a página é isomórfico (isomorphic.net/). Ou seja, o mesmo código JavaScript que você utiliza pro servidor chamar a sua api, pegar o json, montar os elementos e voltar pro client uma página pronta com a marcação HTML completa, é o mesmo código JavaScript que você vai carregar dentro da página HTML para continuar alterando a página. ;) Abs

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

HTML é permitido: a,b,br,blockquote,i,li,pre,u,ul,p

Receber mensagens dessa discussão

3 Dê sua opinião
BT