Melhores práticas para gerenciar e implantar grandes aplicativos JavaScript

Question

Quais são algumas práticas padrão para gerenciar um aplicativo JavaScript de médio e grande porte?Minhas preocupações são a velocidade de download do navegador e a facilidade e facilidade de manutenção do desenvolvimento.

Nosso código JavaScript tem aproximadamente "namespace" como:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

No momento, temos um arquivo JavaScript (descompactado, descompactado e altamente legível) para lidar com toda a lógica de negócios no aplicativo da web.Além disso, existe o jQuery e várias extensões jQuery.O problema que enfrentamos é que é preciso para sempre encontrar qualquer coisa no código JavaScript e o navegador ainda terá uma dúzia de arquivos para baixar.

É comum ter alguns arquivos JavaScript de "fonte" que são "compilados" em um arquivo JavaScript compactado final?Alguma outra dica útil ou prática recomendada?

Answer 1

A abordagem que descobri que funciona para mim é ter arquivos JS separados para cada classe (assim como você faria em Java, C# e outros).Como alternativa, você pode agrupar seu JS em áreas funcionais do aplicativo, se for mais fácil navegar.

Se você colocar todos os seus arquivos JS em um diretório, poderá fazer com que seu ambiente do lado do servidor (PHP, por exemplo) percorra cada arquivo nesse diretório e gere um <script src='/path/to/js/$file.js' type='text/javascript'> em algum arquivo de cabeçalho incluído em todas as páginas da IU.Você achará esse carregamento automático especialmente útil se criar e remover arquivos JS regularmente.

Ao implantar para produção, você deve ter um script que combine todos eles em um arquivo JS e o "minifique" para manter o tamanho baixo.

Answer 2

Além disso, sugiro que você use o Google API de bibliotecas AJAX para carregar bibliotecas externas.

É uma ferramenta de desenvolvedor do Google que agrupa as principais bibliotecas JavaScript e facilita a implantação, atualização e torna-as mais leves, sempre usando versões compactadas.

Além disso, torna seu projeto mais simples e leve, pois você não precisa baixar, copiar e manter esses arquivos de bibliotecas em seu projeto.

Use desta forma:

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Answer 3

Há um excelente artigo sobre Vitamin, de Cal Henderson, famoso no Flickr, sobre como eles otimizam a entrega de CSS e JavaScript: http://www.iamcal.com/serving-javascript-fast/

Answer 4

Apenas um sidenode - Steve já apontou, você realmente deveria "minificar" seus arquivos JS.Em JS, os espaços em branco realmente importam.Se você tiver mil linhas de JS e remover apenas as novas linhas desnecessárias, você já salvou cerca de 1K.Eu acho que você entendeu.

Existem ferramentas para este trabalho.E você nunca deve modificar o JS "minificado"/removido/ofuscado manualmente!Nunca!

Answer 5

Em nossos grandes aplicativos javascript, escrevemos todo o nosso código em pequenos arquivos separados - um arquivo por 'classe' ou grupo funcional, usando uma estrutura de namespace/diretório semelhante ao Java.Temos então:

• Uma etapa de tempo de compilação que pega todo o nosso código e o minimiza (usando uma variante do JSMin) para reduzir o tamanho do download
• Uma etapa de tempo de compilação que pega as classes que são sempre ou quase sempre necessárias e as concatena em um grande pacote para reduzir viagens de ida e volta ao servidor
• Um 'classloader' que carrega as classes restantes em tempo de execução sob demanda.

Answer 6

Para fins de eficiência do servidor, é melhor combinar todo o seu javascript em um arquivo reduzido.

Determine a ordem em que o código é necessário e, em seguida, coloque o código reduzido na ordem em que é necessário em um único arquivo.

O segredo é reduzir o número de solicitações necessárias para carregar sua página, por isso você deve ter todo o javascript em um único arquivo para produção.

Eu recomendo manter os arquivos divididos para desenvolvimento e, em seguida, criar um script de construção para combinar/compilar tudo.

Além disso, como regra geral, certifique-se de incluir seu JavaScript no final da página.Se o JavaScript estiver incluído no cabeçalho (ou em qualquer lugar no início da página), ele impedirá que todas as outras solicitações sejam feitas até que seja carregado, mesmo que o pipeline esteja ativado.Se estiver no final da página, você não terá esse problema.

Answer 7

Leia o código de outros (bons) aplicativos javascript e veja como eles lidam com as coisas.Mas começo com um arquivo por aula.Mas quando estiver pronto para produção, eu combinaria os arquivos em um arquivo grande e reduziria.

A única razão pela qual eu não combinaria os arquivos é se não precisasse de todos os arquivos em todas as páginas.

Answer 8

Minha estratégia consiste em 2 técnicas principais:Módulos AMD (para evitar dezenas de tags de script) e o padrão Module (para evitar o acoplamento rígido das partes do seu aplicativo)

Módulos AMD:muito direto, veja aqui: http://requirejs.org/docs/api.html também é capaz de empacotar todas as partes do seu aplicativo em um arquivo JS reduzido: http://requirejs.org/docs/optimization.html

Padrão do módulo:eu usei esta biblioteca: https://github.com/flosse/scaleApp você está perguntando agora o que é isso?mais informações aqui: http://www.youtube.com/watch?v=7BGvy-S-Iag