martes, 12 de febrero de 2008

JS, Comprimir JavaScript y de paso CSS

AJAX está en uno de sus mejores momentos y de paso le ha dado un empujoncito al tan poco querido JavaScript.
Ahora vemos sitios con un gran porcentaje de JS y eso ha traído con sigo varias cuestiones como la seguridad del código como el tamaño de los archivos .js.
Los archivos .js se descargan al cliente como archivos de texto plano y son fácilmente visibles por cualquier ojo curioso y al mismo tiempo si el programador fue muy juicioso comentando, indentando y escribiendo nombres de variables claros los .js empiezan a pesar más Kb de lo normal.
Para solventar esto hay 3 técnicas que permiten hacer el código más pequeño en peso y menos legible para el ojo humano (solo menos legible, ya que existe obligatoriamente la inversa para estos métodos).

* Minification (No se como se dice en español):
Básicamente lo que hace es eliminar comentarios, espacios y tabuladores al código.
Está técnica es muy segura para el código (de aquí en adelante cuando hablemos de seguridad estamos hablando de la compatibilidad del código generado) pues no lo modifica demasiado, no requiere tampoco un proceso de traducción pues el código sigue intacto, pero, no comprime demasiado ni da mucha seguridad.

El mejor de su genero es el JSMin

* Obfuscation (Tampoco se como se dice en español):
Está técnica, además de hacer un Minification modifica el código cambiando el nombre las variables y de las funciones por nombres más pequeños (obviamente menos descriptivos).
Por modificar el código tan agresivamente es menos seguro (quiero decir que en su traducción el .js puede quedar inservible), pero al mismo tiempo su peso es menor y su lectura más complicada. También requiere de una traducción por parte del cliente (ya que las funciones no se llaman como deberían) y esto es tiempo y recursos en la máquina del cliente.

Entre las opciones que hay son:

- YUI Compressor:
Escrito en Java y uno de los más conocidos, también uno de los más seguros. Además también sirve para CSS.

- Packer:
Para mucho es el mejor, tiene buena compresión, aunque se cree que no están seguro como YUI pero si tiene un alto nivel de seguridad.

- Crunchy:
Otra opción de obfuscation, es más agresivo que YUI y no es tan seguro.

- JSCruncher Pro:
Es comercial, no lo he probado pero se dice que es bueno.

- Dojo ShrinkSafe:
Se dice que es uno de los más seguros.

- JSMart:
No lo he probado, comprime también CSS.

Encontré también una paginilla interesante que compara algunos de los métodos que describimos arriba, CompressorRater.


* GZip o HTTP Compression:
En esta técnica se pasa un .js o un .css o .html (si, también sirve) comprimido al navegador, este lo descomprime y lo ejecuta. Todo lo que se pasa está compreso por ende se usa menos ancho de banda del servidor, pero, más RAM al tener que comprimir todo antes de pasárselo al cliente. El cliente a su vez debe descomprimir antes de ejecutar.
Es una técnica no siempre tan segura ya que no todos los navegadores soportan gzip (en el link de arriba hay una lista de navegadores que lo soportan, está en ingles), he escuchado que IE 6 tiene un error leyendo ciertos contenidos comprimidos.

Encontré una página que explica muy bien como usar esta técnica en gonzo.teoriza.com:
Parte 1
Parte 2


Conclusión
Comprimir nuestros scripts puede tener ventajas en el uso del ancho de banda (por ende $$$) pero también desventajas en el uso de la RAM tanto del servidor (gzip) como en el cliente (obfuscation).
Las pruebas con nuestros scripts nos dirán que técnica o técnicas usar y en que casos (no olvidar las pruebas con el navegador).
No creo que sea muy recomendable para el cliente hacer gzip y obfuscation al mismo tiempo, pero no le veo problema al gzip y al minification.
No olvidar, siempre hacer una copia de seguridad antes de hacerle un minification o un obfuscation a nuestros archivos.
Los archivos ya modificados son buenos para el servidor final (producción) pero para desarrollo definitivamente toca con los normalitos.


Espero les sea de utilidad y quedo en espera de comentarios y/o correcciones.

martes, 5 de febrero de 2008

AS2, JSON vs XML

Después de haber probado JSON con AS3 quise hacer lo mismo pero con AS2 y esto fue lo que descubrí...

1. Descargué la clase JSON desde la página oficial (http://www.json.org/). También hay otra clase del mismo autor rondando por la red, tiene la ventaja de ser estática, pero, es notablemente más lenta.

2. Cree un archivo de Flash con 2 DataGrid, el primero lo llamé "dataj_dg" y el otro "datax_dg".

3. Le cree una clase al documento:


Básicamente lo que hace es cargar un JSON y un XML (con los mismos datos) y convertirlos en un DataProvider para pasárselos al los Datagrid. Al final traza el tiempo que demoró procesando cada archivo (la carga no cuenta).

4. Cargué la clase en el primer frame de mi película con este código:

import Main;
var oMain:Main = new Main(this);


5. Usé los mismos archivos .json y .xml del ejemplo de AS3.

6. Lo ejecuté y.....

Tiempo JSON: 17
Tiempo XML: 2

7. Después calculé el tiempo de JSON usandolo después de parseado y los resultados fueron:

Tiempo JSON: 1
Tiempo XML: 2

8. Nuevamente sorprendido.

El test se hizo en un PC Athlon X2 4000+ con 1.87 GB de RAM

Conclusión:
Con JSON usamos mucho menos código ya que se usa como un objeto.
La parseada de JSON come mucho proceso. Si el JSON se carga una sola vez y se usa mucho podría ser una muy buena opción.

Quedo en espera de comentarios, dudas o correcciones.

viernes, 1 de febrero de 2008

AS2, Clase administradora de versiones

Hace poco he creado una sencilla clase que me ayuda en la administración de las versiones de mis otras clases o archivos .fla.

Cuando se trabaja en proyectos grandes, con varias personas en el equipo y con mucho movimiento en algunas ocasiones sería bueno saber que versión de la aplicación está corriendo en el servidor.
Con esta sencilla clase se registra cada clase en el contructor (o donde quiera) y esta se agrega en una lista de clases y versiones. Cuando se desea ver el reporte de versiones se llama una función que le devuelve el reporte de versiones.

Veamos un ejemplo...

import com.npi.debug.Version;

class Test1{
public function Test1() {
Version.log("1", This);
}

public function toString():String {
return "TEST1";
}
}


Como ven con una simple línea de código se guarda la versión de la clase (en este caso Test1).
También se puede notar que la clase Version es estática, de hecho usa un patón de diseño llamado Singleton.

Veamos las funciones publicas de nuestra clase Version...


public static function getInstance():Version
Devuelve una instancia de la clase Version. Usado por el patrón Singleton.

Ejemplo:
var oVersion:Version = Version.getInstance();


public static function log(sVersion:String, oClass:Object):Void
Agrega una clase u objeto a la lista de versiones.
Esta es una forma corta de agregar clases internamente llama a otra función llamada "add" que veremos más adelante.

Tiene 2 argumentos:
* sVersion:String que es el número de la versión.

* oClass:Object que es la clase a versionar.
Si la clase tiene una función toString se puede usar this o la referencia a dicha clase, también puede escribir el nombre directamente.

Ejemplos:
Version.log("1b", This);
Version.log("8.3 RC 4", "GAME FLA");
Version.log("1.5.2", "GAME");



public function add(sVersion:String, sClassName:String):Void
Igual que la anterior, agrega una clase u objeto a la lista de versiones.
La diferencia está en el argumento sClassName que es un String no un Object y en la forma en que se llama al no ser estática y usar el patrón Singleton (eso la hace levemente más rápida).

Ejemplos:
Version.getInstance().add("1b", This.toString());
Version.getInstance().addg("8.3 RC 4", "GAME FLA");
Version.getInstance().add("1.5.2", "GAME");



public function getVersions():String
Retorna un reporte de las versiones. Usa el patrón Singletón.
Dice el número de clases registradas y las organiza alfabéticamente.

Ejemplo:
Trace("Traza...");
Trace(Version.getInstance().getVersions());

Traza...
REPORTE DE VERSIONES (3)
* GAME v1.5.2
* GAME FLA v8.3 RC 4
* TEST1 v1b



Tip. Se puede trazar el reporte al presionar ciertas teclas (puede ser CTRL + 7).

var myListener:Object = new Object();
myListener.onKeyDown = function() {
if (Key.isDown(Key.CONTROL) && Key.getCode() == 55) {
trace(Version.getInstance().getVersions());
}
};
Key.addListener(myListener);


Version.as


Quedo en espera de comentarios, dudas o correcciones.