Parar o Javascript do lado do cliente se torne um monolito

5

Estou desenvolvendo alguns códigos front-end de Javascript usando o JQuery com alguns serviços web JSON de backend. IDE é NetBeans e depuração usando isso e o Chrome.

Vindo de um plano de fundo em C ++ Eu estou acostumado a arquivos de origem pequenos, cada um encapsulando um (ou um pequeno punhado) de classes. Com o JS, a falta de arquivos 'include' significa que eu gradualmente me encontrei lidando com blocos monolíticos de 1K + linhas de Javascript.

Eu olhei para o uso de inclusões do lado do servidor nginx para dividi-las, mas isso vincula o código firmemente ao servidor da Web, o que não é ideal. Carregar dinamicamente cada arquivo de origem como uma solicitação separada parece ineficiente, então acho que quero algo que combine (e opcionalmente minimize) o código-fonte como parte do ciclo de compilação / depuração do IDE.

Sou relativamente novo no desenvolvimento de JS, por isso não tenho ideia sobre as práticas recomendadas para isso.

Meu código já é orientado a objetos, mas tenho alguns arquivos de origem muito grandes, o que dificulta o gerenciamento de alterações, a edição etc. Estou procurando as melhores abordagens para dividir o código em vários arquivos de origem menores e a melhor forma de obter esses dados para o lado do cliente.

    
por Roddy 30.09.2016 / 10:06
fonte

2 respostas

2

A abordagem moderna do JS é:

  • Mantenha vários arquivos de origem * .js separados, da mesma forma que fazemos em idiomas OO
  • Use um canal de criação de JavaScript como gulp ou grunhir para concatenar e reduzir os arquivos * .js em um único recurso antes de enviar

Isso permite que você:

  • Evite arquivos grandes e mantenha a legibilidade do código
  • Entregue todos os arquivos ao navegador em uma única solicitação minificada

Para aplicativos muito grandes, até mesmo o recurso único reduzido pode se tornar muito grande. É aqui que os carregadores de módulo, como o requirejs , entram - permitindo que você carregue apenas o que precisa.

    
por 08.10.2016 / 00:34
fonte
2

Para evitar que um arquivo monolítico contenha todo o código do seu aplicativo, você pode usar duas técnicas:

  • Frameworks. Há um monte de estruturas JavaScript que permitem declarar dependências entre arquivos e carregar esses arquivos sob demanda. Um framework popular é RequireJS .

    Isso oferece uma abordagem simples, na qual todo o trabalho de dependência é feito para você, e você pode se concentrar na codificação, como acontece na maioria das linguagens tradicionais, como Python, Java ou C #. Observe que o Node.js segue uma abordagem semelhante.

  • Padrão do módulo . Aqui, você não está confiando em uma biblioteca de terceiros para as dependências, mas simplesmente divide seu código em partes que são muito isoladas umas das outras. Como você está familiarizado com o OOP, o módulo estará próximo ao mesmo tempo de um objeto e um namespace: você encontrará maneiras de declarar claramente quais funções podem ser chamadas do mundo externo e manter as outras funções particulares. / p>

    Depois de ter seus módulos separados, você pode dividir seu arquivo monolítico em arquivos menores - geralmente um arquivo por módulo. A partir daí, você tem uma escolha: basta carregar todos os arquivos um por um do navegador todas as vezes (o que não é o mesmo que “every request”): se você configurou o cache do cliente corretamente, os arquivos serão armazenados em cache por um longo período de tempo). Ou você agrupa todos os seus arquivos em um (ou vários, o que fizer sentido no seu caso) para reduzir o número de solicitações.

    Se você quiser empacotar esses arquivos, existem várias bibliotecas do lado do servidor que fazem isso. Dependendo do seu ambiente, você pode procurar um ou escrever um.

    A redução também pode ser uma boa ideia, e o Google Closure Compiler é uma das suas opções. Observe que o Google Closure Compiler tem níveis diferentes, de um simples "vamos retirar o espaço em branco" para uma transformação muito capaz e muito agressiva do seu código. Se você tentar usar o agressivo no código existente, provavelmente você não ficará satisfeito com os resultados. Leva tempo para se acostumar a como o Google Closure Compiler, nesse nível, quer que você escreva seu código.

Observe que agrupar seu JavaScript não leva necessariamente a um melhor desempenho. Se, por exemplo, seu site tiver muitas páginas e cada página usar pouco código comum, a abordagem RequireJS significaria duas coisas:

  • Um usuário que chega nesta página baixará apenas um pequeno fragmento de todo o seu código JavaScript, ou seja, o que é necessário para esta página. Empurrar um pacote enorme composto de dezenas de arquivos para o usuário que precisa apenas de dois ou três deles não é a melhor coisa que você pode fazer.

  • Se você alterar um dos arquivos com freqüência, o RequireJS fará o download da nova versão deste arquivo para os usuários que já visitaram seu site anteriormente. Se for um pacote, uma pequena alteração invalida todo o pacote.

Observe que empacotamento e minificação são duas coisas diferentes. Você pode fazer um sem o outro.

Por fim, lembre-se de que existem alguns aspectos muito importantes que devem ser sua principal preocupação:

  • Armazenamento em cache no lado do cliente. Os arquivos JavaScript podem e geralmente devem ser armazenados em cache por um longo tempo, sem a necessidade de o navegador fazer a verificação e receber HTTP 304 Não Modificado em resposta. Isso também significa que sempre que você alterar um arquivo JavaScript, todos os links para ele deverão ser alterados, ou seja, http://cdn.example.com/js/hello.js se tornará http://cdn.example.com/js/hello.js?r=1 , depois http://cdn.example.com/js/hello.js?r=2 , etc.

  • CDN. Se você está atendendo usuários chineses da Europa, ou usuários indianos dos EUA, você está fazendo errado. Mais importante ainda, se você está servindo conteúdo estático do seu servidor que já é responsável pelo conteúdo dinâmico, você pode não só degradar os desempenhos, mas também pagar demais pela largura de banda. Serviços como o Amazon CloudFront garantem um excelente desempenho de entrega para seu conteúdo estático.

por 08.10.2016 / 02:41
fonte