javascript - teoria - node js tutorial pdf

Mejores prácticas para administrar y desplegar grandes aplicaciones de JavaScript

Question

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

Nuestro código JavaScript es aproximadamente "espacio de nombre" 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, sin quitar, altamente legible) para manejar toda la lógica de negocios en la aplicación web. Además, hay jQuery y varias extensiones jQuery. El problema que enfrentamos es que lleva mucho tiempo encontrar algo en el código JavaScript y el navegador aún tiene una docena de archivos para descargar.

¿Es común tener un puñado de archivos JavaScript de "origen" que se "compilan" en un archivo final comprimido de JavaScript? ¿Alguna otra sugerencia útil o mejores prácticas?

Answer 1

El enfoque que he encontrado funciona para mí es tener archivos JS separados para cada clase (como lo haría en Java, C # y otros). Alternativamente, puede agrupar su JS en áreas funcionales de la aplicación si es más fácil para usted 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 incluido en todas las páginas de la interfaz de usuario. Encontrará esta carga automática especialmente útil si crea y elimina regularmente archivos JS.

Al implementar en producción, debe tener un script que los combine en un solo archivo JS y lo "minimice" para mantener el tamaño bajo.

Answer 2

En nuestras grandes aplicaciones de JavaScript, escribimos todo nuestro código en pequeños archivos separados: un archivo por ''clase'' o grupo funcional, utilizando una estructura de directorios / espacios 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.

Answer 3

Por el bien de la eficiencia del servidor, es mejor combinar todo tu javascript en un archivo minificado.

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

La clave es reducir el número de solicitudes requeridas para cargar su página, por lo que debe tener todos los javascript en un único 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 una buena regla general, asegúrese de incluir su JavaScript al final de su página. Si JavaScript está incluido en el encabezado (o en cualquier lugar al comienzo de la página), detendrá todas las demás solicitudes hasta que se cargue, incluso si se activa pipelining. Si está al final de la página, no tendrá este problema.

Answer 4

Solo un comentario lateral - Steve ya señaló, realmente deberías "minificar" tus archivos JS. En JS, los espacios en blanco realmente importan. Si tiene mil líneas de JS y tira solo las nuevas líneas no requeridas que ya ha guardado, aproximadamente 1K. Creo que entiendes el punto.

Hay herramientas para este trabajo. ¡Y nunca debe modificar manualmente el JS "minificado" / despojado / ofuscado! ¡Nunca!

Answer 5

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 la producción, combinaría los archivos en un archivo grande y lo minimizaría.

La única razón, no combinaría los archivos, es si no necesitaba todos los archivos en todas las páginas.

Answer 6

Además, le sugiero que use la API de bibliotecas AJAX de Google para cargar bibliotecas externas.

Es una herramienta para desarrolladores de Google que agrupa grandes bibliotecas de JavaScript y facilita su implementación, actualización y aligerarlas al usar siempre versiones comprimidas.

Además, simplifica y aligera su proyecto 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");

Answer 7

Hay un excelente artículo sobre la vitamina de Cal Henderson de la fama de Flickr sobre cómo optimizar la entrega de sus CSS y JavaScript: http://www.iamcal.com/serving-javascript-fast/

Answer 8

Mi estrategia consiste en 2 técnicas principales: módulos AMD (para evitar docenas de etiquetas de scripts) y el patrón del Módulo (para evitar el acoplamiento fuerte de las partes de su aplicación)

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

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