Contenido

Include, carga y comprime tu javascript ondemand

27 feb

+ 10

Ayer Brian Moschel me envió un mail informándome de la publicación de Include, un componente de JavascriptMVC, que nos permite cargar y comprimir nuestro javascript de una forma muy sencilla, sin importar la complejidad de dependencias que por debajo haya.

Imaginemos que tenemos un entorno de trabajo del que necesitamos cargar una gran cantidad de funcionalidad javascript, toda ella desperdigada en diferentes ficheros javascript. Con Include podemos cargar esa funcionalidad a medida que la vamos necesitando, de forma comprimida, usando el script de Dean Edwards, para reducir el tiempo de carga por parte de nuestro navegador

Instalación

Al estar desarrollado sobre Javascript, basta con incluir la llamada al fichero en el <head> de nuestro HTML. Los ficheros Compres.js y Compres.html deben estar en la misma ruta que el include.js.

<script src="include.js" type="text/javascript"></script>

Modo de uso

Incluir otros ficheros javascript es algo tan sencillo como esto:

<script type="text/javascript">
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

Lo que nos permite cargar el javascript en cualquier lugar simplemente llamando a la función con los parámetros necesarios. Los ficheros serán cargados a medida que se solicitan, por lo que el orden de carga lo definimos nosotros.

Comprimir el javascript

Para que Include se ponga en modo compress, simplemente tenemos que especificarlo antes de solicitar los ficheros, a modo de configuración previa.

<script type="text/javascript">
   include.setup({env: 'compress'});
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

Ejecutar en producción

Tambien dispone de un modo “production” ideal para trabajar en la versión final de nuestras aplicaciones. Podremos especificar una ruta diferente de en donde se encuentran los ficheros javascript mediante un parámetro más.

<script type="text/javascript">
   include.setup({env: 'production', production: 'path/to/prod'});
   include('javascripts/prototype', 'javascripts/myapplication');
</script>

API

Tambien disponemos de una serie de funciones con las que podremos complementar nuestros scripts.

include.get_absolute_path() // Nos devuelve la ruta absoluta.
include.get_env() // Nos informa del entorno que hemos definido ("development", "compress" o "production")
include.get_path() // Directorio de trabajo
include.include() // Función principal que carga N ficheros javascrips solicitados por parámetro.
	- path: Ruta del fichero (String)
	- base62: Activar la compresión para el fichero concreto (true/false)
	- shrink_variables: Shrink variables de dicho fichero (true/false)
include.opera() // Debe ir detrás de los includes si estás usando Opera
include.setup() // Configuración del script
	- env: Entorno de desarrollo ("development", "compress" o "production")
	- production: Ruta de los ficheros javascript (String)
	- base62: Activa la compresión (true/false)
	- shrink_variables: Shrink variables de dicho fichero (true/false)
	- remote: Activa el sistema de compresión remota desde otra aplicación (true/false)
include.plugin() // Nos permite cargar un plugin de JavascriptMVC
include.plugins() // Nos permite cargar plugins de JavascriptMVC
include.set_path() // Definimos la ruta de los ficheros

Descargar

[Descargar] [Demo]

  • Os juro que no entiendo de que va este script… ¿Cargar un archivo para comprimirlo? ¿Y luego que? ¿Porque si ya lo has cargado para que lo vas a comprimr si despues no lo puedes guardar? No lo entiendo.

  • @IvanDeLaJara: El script hace lo siguiente, le indicas el fichero que quieres y te lo carga. Pero no de la forma normal, osea que durante la ejecución de un script, puedes lanzar la llamada y se realiza de forma asincrona al resto de la página.

    La novedad es que además, te permite definir una configuración que te permite comprimir el archivo que estás solicitando.

    Espero haber resumido bien el concepto. Saludos

  • Pues yo sigo sin entender bien como lo hace… Me explico:

    – Entiendo que puedes cargar los scripts solo cuando los necesitas… asi si yo uso jquery puedo hacer cosas como solo incluir un plugin antes de necesitarlo de verdad porque un evento lo llama… Bien, eso no es nuevo, ya lo hacian otros.

    – Lo que no entiendo es eso de “compress”. Como puede desde javaScript decir que se cargue un fichero javaScript comprimido… es decir, el si va comprimido, empaquetado, en base64, etc… depende del propio texto del script y el que vaya en Gzip depende del servidor. Si no van comprimidos de serie el navegador tendrá que descargar el fichero .js completo antes de poder hacer nada con él y entonces ya es una tonteria comprirlo porque ya lo ha cargado…

    – Tenemos que suponer que la novedad sería si consigue comprimirlo ANTES de cargarlo… pero como puede comprimirlo ANTES de cargarlo? desde cuando TODOS los servidores dejan que javaScript les diga como tiene que hacer las cosas?

    – Alguien puede explicar un poco mejor exactamente de que va esto?????

  • En la pagina pone esto:

    ————————————-

    Ruby Compressor Script

    Some users want to automate their compression in a server-side deployment script, like Capistrano. For this purpose, use Include in combination with this Ruby compressor script. Download the Ruby compressor script and read the included readme.txt file for usage instructions.

    ————————————-

    ¿Esto significaria que el javaScript este no comprime nada, sino que puede pedir a una clase especial de ruby que se lo comprima o no?

  • Bueno, a mi no me funco!!!!!
    Me comprime bien las librerias de javascript, pero cuando paso al modo de ‘development’ no me toma el archivo production.js.
    Probé tambien cambiando la ruta pasandola como segundo argumento tal cual explican en la pagina pero nada.
    Si alguien me quiere ayudar, MUCHAS GRACIAS.

  • Hola,

    Soy uno de los developers de JavaScriptMVC y Include. Mi espanol es muy limitado. Puedo ayudar alguien que necesite ayudo si hablas ingles. Inaki y Emi, ustedes pueden emailme a brian.moschel@gmail.com.

    Tambien, si alguien quiere participar en JavaScriptMVC y usted habla ingles y espanol, buzcamos personas que puede traducir páginas a espanol. Por favor contactame.

    Gracias,
    Brian

  • hola estoy usando su libreria pero tengo un problema y es que cuando cargo un archivo el vuelve y carga la libreria include, que debo hacer o que hay que configurar para que no haga esto?

    gracias

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.