Mejores prácticas para administrar e implementar grandes aplicaciones JavaScript

StackOverflow https://stackoverflow.com/questions/15390

Pregunta

¿Cuáles son algunas prácticas estándar para administrar una aplicación JavaScript de tamaño mediano a grande?Mis preocupaciones son tanto la velocidad de descarga del navegador como la facilidad y mantenibilidad del desarrollo.

Nuestro código JavaScript tiene aproximadamente un "espacio de nombres" 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 */
}

Por el momento, tenemos un archivo JavaScript (desempaquetado, descomprimido y altamente legible) para manejar toda la lógica empresarial en la aplicación web.Además, existe jQuery y varias extensiones de jQuery.El problema al que nos enfrentamos es que hace falta para siempre para encontrar algo en el código JavaScript y el navegador todavía tiene una docena de archivos para descargar.

¿Es común tener un puñado de archivos JavaScript "fuente" que se "compilan" en un archivo JavaScript comprimido final?¿Algún otro consejo útil o mejores prácticas?

¿Fue útil?

Solución

El enfoque que encontré que funciona para mí es tener archivos JS separados para cada clase (tal como lo haría en Java, C# y otros).Alternativamente, puede agrupar su JS en áreas funcionales de la aplicación si le resulta más fácil navegar.

Si coloca todos sus archivos JS en un directorio, puede hacer que su entorno del lado del servidor (PHP, por ejemplo) recorra cada archivo en ese directorio y genere un <script src='/path/to/js/$file.js' type='text/javascript'> en algún archivo de encabezado que se incluye en todas las páginas de la interfaz de usuario.Esta carga automática le resultará especialmente útil si crea y elimina archivos JS con regularidad.

Al implementar en producción, debe tener una secuencia de comandos que los combine todos en un archivo JS y lo "minimice" para mantener el tamaño bajo.

Otros consejos

Además, te sugiero que uses Google. API de bibliotecas AJAX para cargar bibliotecas externas.

Es una herramienta de desarrollo de Google que agrupa las principales bibliotecas de JavaScript y facilita su implementación, actualización y ligereza al utilizar siempre versiones comprimidas.

Además, hace que su proyecto sea más simple y liviano porque no necesita descargar, copiar y mantener estos archivos de bibliotecas en su proyecto.

Úselo de esta manera:

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");

Hay un excelente artículo sobre Vitamin escrito por Cal Henderson de Flickr sobre cómo optimizan la entrega de CSS y JavaScript: http://www.iamcal.com/serving-javascript-fast/

Solo un nodo lateral: Steve ya señaló que realmente deberías "minimizar" tus archivos JS.En JS, los espacios en blanco realmente importan.Si tiene miles de líneas de JS y elimina solo las nuevas líneas no necesarias, ya habrá guardado aproximadamente 1K.Creo que entiendes el punto.

Hay herramientas para este trabajo.¡Y nunca debes modificar a mano el JS "minimizado"/despojado/ofuscado!¡Nunca!

En nuestras grandes aplicaciones javascript, escribimos todo nuestro código en pequeños archivos separados: un archivo por 'clase' o grupo funcional, utilizando una estructura de directorio/espacio de nombres similar a Java.Entonces tenemos:

  • Un paso en tiempo de compilación que toma todo nuestro código y lo minimiza (usando una variante de JSMin) para reducir el tamaño de la descarga.
  • Un paso en tiempo de compilación que toma las clases que siempre o casi siempre se necesitan y las concatena en un paquete grande para reducir los viajes de ida y vuelta al servidor.
  • Un 'cargador de clases' que carga las clases restantes en tiempo de ejecución bajo demanda.

Por razones de eficiencia del servidor, es mejor combinar todo su javascript en un archivo minimizado.

Determine el orden en el que se requiere el código y luego coloque el código minimizado en el orden en que se requiere en un solo archivo.

La clave es reducir la cantidad de solicitudes necesarias para cargar su página, por lo que debe tener todo JavaScript en un solo archivo para producción.

Recomiendo mantener los archivos divididos para el desarrollo y luego crear un script de compilación para combinar/compilar todo.

Además, como buena regla general, asegúrese de incluir JavaScript hacia el final de su página.Si se incluye JavaScript en el encabezado (o en cualquier lugar al principio de la página), detendrá todas las demás solicitudes hasta que se cargue, incluso si la canalización está activada.Si está al final de la página, no tendrás este problema.

Lea el código de otras (buenas) aplicaciones de JavaScript y vea cómo manejan las cosas.Pero empiezo con un archivo por clase.Pero una vez que esté listo para producción, combinaría los archivos en un archivo grande y los minimizaría.

La única razón por la que no combinaría los archivos es si no necesitara todos los archivos en todas las páginas.

Mi estrategia consta de 2 técnicas principales:Módulos AMD (para evitar docenas de etiquetas de script) y el patrón Módulo (para evitar un acoplamiento estrecho de las partes de su aplicación)

Módulos AMD:muy sencillo, mira aquí: http://requirejs.org/docs/api.html También puede empaquetar todas las partes de su aplicación en un archivo JS minimizado: http://requirejs.org/docs/optimization.html

Patrón del módulo:Usé esta biblioteca: https://github.com/flosse/scaleApp ¿Ahora preguntas qué es esto?más información aquí: http://www.youtube.com/watch?v=7BGvy-S-Iag

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top