Blog de notas

Como en normal en Javascript, hay más de una forma de implementar herencia,
esto es debido a que la herencia no es explicita, es emulada. Vamos a ver
los dos métodos mas utilizados.

Object masquerading

Este método hace provecho del comportamiento de la palabra reservada this
dentro de las funciones, más específicamente, dentro de los constructores.
El funcionamiento es el siguiente: Un constructor asigna propiedades y métodos
a un objeto referenciándolo con la palabra clave this, como un constructor es simplemente una función,  se puede usar el constructor de una clase A como método de una clase B.  Tenemos, por ejemplo, el siguiente constructor:

     
      function ClaseA(nombre){

          this.nombre=nombre;

          this.identificarse=function(){

              alert(this.nombre);

          }

      }

Recordemos que en un constructor, this hace referencia al nuevo objeto que será retornado. Pero en un método, this hace referencia al objeto desde el cual fue llamado. Analicemos que pasa si lo usamos dentro de otro constructor como en el caso siguiente:

     
      function ClaseB(nombre){

          this.superClase=ClaseA;

          this.superClase(nombre);

          delete this.superClase;

      }

En el código anterior, el constructor ‘ClaseA’, es llamado como método del nuevo objeto que se esta creando en ‘ClaseB’, por lo tanto, todas las propiedades y métodos que se crean en ClaseA se van a agregar al nuevo objeto de ClaseB.

Quizás el punto mas interesante del Object masquerading, frente a otros métodos
de emular herencia, es que soporta la herencia múltiple,  esto significa que un objeto puede heredar de mas de una clase al mismo tiempo. Solo basta con llamar a cuantos constructores sean necesarios dentro del constructor de la clase hija.

Prototype chaining.

En el post anterior mostré como definir clases utilizando el objeto prototype. Prototype chaining se basa en este paradigma para implementar herencia de una manera muy interesante.

Prototype es una propiedad del objeto Function, que actúa como un template sobre el cual se van a crear nuevos objetos. Mas precisamente, las propiedades y métodos del objeto prototype van a ser pasados a todas las instancias de esa clase.

El ejemplo anterior utilizando prototype chaining quedaría de la siguiente manera:

      function ClassA(){         

      }

      ClassA.prototype.nombre = “”;

      ClassA.prototype.identificarse = function(){

          alert(this.nombre);

      }

      function ClassB(){

      }    

      ClassB.prototype = new ClassA();

La última línea del ejemplo muestra el funcionamiento del prototype chaining. Lo que ocurre es que asignamos al prototipo de ‘ClassB’ una nueva instancia de ‘ClassA’.
De ahora en adelante, todos los objetos creados con ‘ClassB’ van a tener, también, los mismos métodos y propiedades de la instancia de ‘ClassA’. Y si queremos agregar mas métodos y propiedades, lo único que tenemos que hacer es agregárselos al prototype
de ‘ClassB’.

Lo malo de este método para emular herencia, es que no se puede pasar parámetros
a la clase base, como hicimos en el ejemplo de Object masquerading.

Lo bueno,  es que el operador instanceof funciona de una manera única: por cada instancia de ClaseB, instanceof nos retorna true tanto con ‘ClaseA’ como con ‘ClaseB’:

    var miobjeto = new ClassB();  

    alert(miobjeto instanceof ClassB); // true

    alert(miobjeto instanceof ClassA); // true

Conclusión

Estos son solo 2 de las formas utilizadas para emular herencia en Javascript, quizás las más difundidas. Personalmente prefiero el prototype chaining, porque es la recomendada por el Standard ECMA Script, y por el funcionamiento del operador instanceof,
que permite tener un poco mas de control sobre los objetos, algo que se agradece
muchísimo en un lenguaje tan poco tipeado como Javascript. Sin embargo, los
dos métodos son igual de eficaces y cada uno tiene sus ventajas y desventajas,
por lo que la decisión de cual usar, esta en el programador.

Quizás la noticia mas importante de la semana en lo que refiere al universo del desarrollo web fue que Abobe va a subir el código fuente de Tamarin, el motor Javascript usado en Flash, a la fundación Mozilla para convertirlo en Open Source. Podemos esperar, entonces, que las próximas versiones de Firefox lo utilicen.

¿Porque esto es importante?. Porque Tamarin es un compilador JIT, no un interprete, esto significa que produce un bytecode de maquina y luego lo ejecuta, en lugar de interpretar la sintaxis en el momento de la ejecución. La ventaja de esto es la gran velocidad en la que se corre el código en Javascript, que ya esta demostrada en muchos benchmarks.

Vamos a ver como responden los browsers de aquí en adelante a esta iniciativa

JavaScript es un lenguaje orientado a objetos, pero no es muy fácil comprenderlo en este aspecto. A pesar de la sintaxis y el nombre, la forma en que JavaScript implementa objetos es bastante diferente al que conocemos de C++ o Java, esto suele llevar a la confusión. Mi intención es describir como es que se trabaja con OOP en JavaScript intentando no confundir al compararlo con otros lenguajes.

Creación de Objetos

En JavaScript, todas las variables hacen referencia a objetos, no existe nada en este lenguaje que no sea un objeto, lo son todos los tipos de datos e inclusive las funciones, que pueden contener propiedades y métodos.

Para crear un objeto desde cero basta con hacer:

miobjeto = new Object();

Lo que equivale a hacer:

miobjeto = {};

La primera forma de declarar un objeto les puede resultar familiar, la segunda hace uso de una característica propia del lenguaje para declarar estructuras de datos. Todos los tipos de datos pueden declararse de las dos maneras, por ejemplo, una cadena de texto se declara:micadena = new String();

Y de la forma declarativa:micadena = “”;

Un array se declara:miarray = new Array();

Ó también:miarray = [];

Esta forma de declarar objetos es muy útil en algunos casos y es la base del intercambio de mensajes mediante el estándar JSON.

Agregar miembros

Javascript es un lenguaje dinámico, esto posibilita la modificación de los objetos en tiempo de ejecución, esto quiere decir que a un objeto, luego de ser creado, se le pueden agregar o eliminar métodos y propiedades.

Para agregar miembros al objeto creado anteriormente solo basta con declararlo y asignarle algún valor.

miobjeto.variable = “hola”;

miobjeto.metodo = new Function();

Listo, ya disponemos de un objeto personalizado creado desde cero, de este modo se pueden agregar mas miembros de cualquier tipo a nuestro objeto. Sin embargo, crear objetos de esta manera no es muy cómodo, ya que si quisiéramos crear una copia de este objeto deberíamos declarar nuevamente todos sus miembros, debido a que este objeto no se puede instanciar.

Creando ‘Clases’ en JavaScript

La forma en que los lenguajes orientados a objetos comúnmente resuelven el problema anterior es mediante el uso de Clases, en JavaScript no es posible declarar Clases, pero si es posible instanciar objetos a partir de un constructor.

El objeto Function es utilizado como objeto instanciable en JavaScript, y el cuerpo de la función es el constructor del nuestros objetos. Una vez que tenemos un constructor, podemos llamarlo con el operador new.

/*clase de ejemplo*/

miClase = new Function();

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

El método mas difundido para emular las clases en JavaScript es aprovechar el funcionamiento de la palabra clave this dentro de los constructores. Cuándo una función es llamada con el operador new, this hace referencia al objeto que será retornado. Veamos como funciona.

/*clase de ejemplo*/

miClase = function(){

/*

agregamos miembros dinamicamente

al objeto que será retornado

*/

this.propiedad = “hola!”;

this.metodo = function(){

/* aqui ‘this’ hace referencia al objeto al que pertenece el metodo */

alert(this.propiedad);

}

}

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

Ahora, ‘nuevoObjeto’ va a referenciar al objeto que se retornó cuando se llamó a ‘miClase’ usando el operador new, por lo tanto, va a tener todas las propiedades y metodos que se crearon dentro del constructor.

El problema de esta forma de crear clases es que cada vez que la función ‘miClase’ es llamada, se crea una nueva función llamada ‘metodo’, de modo que cada objeto tiene su propia versión de ‘metodo’ cuando, en realidad, todos los objetos deberían compartir la misma función.

La propiedad ‘Prototype’

Todas las funciones tienen una propiedad llamada prototype, esta propiedad es un objeto que será utilizado como ‘modelo’ inicial de todos los objetos que sean creados con esta función cuando sea utilizada como constructor.

Inicialmente esta propiedad es un objeto vacío, pero debemos modificarla para aprovechar esta característica del lenguaje. Reescribiendo el ejemplo anterior el código quedaría así:

/* creamos un constructor limpio */

miClase = new Function();

miClase.prototype.propiedad = “hola!”;

miClase.prototype.metodo = function(){

/* aqui ‘this’ hace referencia al objeto al que pertenece el metodo */

alert(this.propiedad);

}

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

Ahora todos los objetos creados a partir de ‘miClase’ compartirán inicialmente las mismas referencias en todas sus propiedades, esto significa que, todos los objetos van a compartir la misma versión de ‘metodo’.

Adicionalmente, al utilizar la propiedad prototype, obtenemos otra ventaja, podemos usar la palabra reservada instanceof. Vemos como se usa si escribimos:alert(nuevoObjeto instanceof miClase) // muestra ‘true’

El problema del uso de prototype, es que todas las propiedades hacen referencia a las mismas del prototipo, por lo que si modificamos estos objetos se van a modificar también en todos los objetos creados con esta clase. En siguiente ejemplo cambiamos nuestra propiedad a un array para poder modificarla sin cambiar nuestra referencia, de modo que podamos ver lo que explico con un ejemplo:

/* creamos un constructor limpio */

miClase = new Function();

miClase.prototype.propiedad = new Array(“hola”,“hello”);

miClase.prototype.metodo = function(){

/* aqui ‘this’ hace referencia al objeto al que pertenece el metodo */

alert(this.propiedad);

}

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

otroObjeto = new miClase(); // instanciamos ‘miClase’

nuevoObjeto.propiedad.push(“olá”);

otroObjeto.metodo(); // muestra “hola”,”hello”,”olá”

Como pueden ver en el ejemplo anterior, ‘nuevoObjeto’ y ‘otroObjeto’ hacen referencia al mismo array, para solucionar este problema solo debemos asignar un objeto diferente a cada propiedad de nuestros objetos. El constructor es un buen lugar para realizar esta tarea:

miClase = function(){

this.propiedad = new Array(“hola”,“hello”); // reemplazamos el valor de nuestra propiedad con un nuevo objeto

};

miClase.prototype.propiedad = new Array(“hola”,“hello”);

miClase.prototype.metodo = function(){

/* aqui ‘this’ hace referencia al objeto al que pertenece el metodo */

alert(this.propiedad);

}

nuevoObjeto = new miClase(); // instanciamos ‘miClase’

otroObjeto = new miClase(); // instanciamos ‘miClase’

nuevoObjeto.propiedad.push(“olá”);

otroObjeto.metodo(); // muestra “hola”,”hello”

Listo, tenemos clase y tenemos objetos que funcionan bien. Espero que les haya resultado claro, en el próximo post voy a explicar el mecanismo de la herencia en JavaScript (si!!, se puede!!). Hasta entonces.

Muchos programadores coincidimos en que Javascript es un lenguaje incomprendido. Sus características son poco conocidas y crean confusión en aquellos desarrolladores que pasan de lenguajes  no dinámicos, mismo así siendo de sintaxis parecida como Java o C++. A esto se le suma la diferencia en implementaciones de cada browser, los eventuales bug  en los mismos, etc.

Durante la semana encontré este post de un desarrollador que mostrando su descontento con las tecnologías que rodean el desarrollo de aplicaciones WEB 2.0 y las dificultades que implican utilizarlas. Yo, en una reacción típica de un abogado defensor de uno de los lenguajes que mas me gusta le respondí (debo decir que bastante fuerte) puntualizando en donde yo creo que se equivoca, y afortunadamente, fue para bien, y como resultado del mismo hoy podemos contar con una breve pero excelente guía de cómo configurar IE para  depurar JS con Visual Studio.

Felicitaciones! Estas es la forma de hacer WEB 2.0

Uno de los problemas que encuentran los desarrolladores muy a menudo con javascript es la dificultad de escribir y aplicaciones que mantengan una buena performance durante su ejecución.

La importancia de buscar métodos para mejorar la performance del código escrito en JS a aumentado desde la aparición de mas aplicaciones y  desarrolladores que utilizan AJAX, y es uno de los reclamos mas frecuentes para el desarrollo de la nueva generación de browsers.

Claro que no todo depende del browser y de la implementación de JS que tengan, Peter Gurevich ha  escrito en este articulo del blog de IE7 algunas recomendaciones que deberían seguir los desarrolladores.

Algunas de las recomendaciones son bastante simples, como declarar las variables locales usando var o cachear variables con contenido HTML antes de insertarlas en el DOM, pero implican procesamiento del motor JS que es muy importante conocer.

Hace ya un tiempo que estoy en la disyuntiva de que tecnología es la mas recomendable a la hora de desarrollar RIA. Se pueden listar muchas ventajas y desventajas de Ajax y Flash, y no termino de decidir con cual quedarme.

Hoy me pasaron este articulo que plantea este tema de una manera bastante cómica al final, pero que termina dándome miedo de terminar en un psiquiatra en la obsesión que todos los desarrolladores de WEB 2.0 compartimos “llevar el escritorio a la WEB”.

El articulo en cuestión esta en español y es muy bueno, y al llega al final con un párrafo muy lúcido:

“Tal vez lo importante no sea saber qué solución es mejor, porque ninguna lo es, sino conocer bien las implicaciones, ventajas y desventajas de cada una de ellas, para que sea el desarrollador quien, utilizando su criterio, su conocimiento del problema a atacar y de las posibles soluciones para el mismo, utilice una u otra herramienta, o una combinación de ambas.”

Aquí lo que me llamó mas la atención fue “una combinación de ambas”, y de inmediato me volvió a la mente BJAX (Browser Extensions plus AJAX), y de como se puede potenciar las posibilidades del browser con esta técnica, pero esto es solo considerable si estas haciendo una aplicación para un grupo reducido de usuarios .

El mesclar Flash con Ajax es algo mucho mas portable , yo creo que podemos confiar tranquilamente en que la mayoría de nuestros usuarios van a poder ejecutar nuestra aplicación sin problemas, y estaremos ganando toda la potencia de Flash en nuestros scripts.

Claros ejemplos de esta técnica son Javascript Sound Kit que incorpora el objeto Sound de Flash en JS, y AMASS (AJAX Massive Storage System) que aprovecha las capacidades de flash para permitir guardar datos del lado del cliente utilizando Javascript.

Solo el tiempo dirá cual es el camino que tomen la mayoría de los desarrolladores en este ámbito, yo creo que voy a tomar el intermedio

OSCON 2006 está dando unos artículos muy interesantes en el ámbito del desarrollo web y sobretodo en el desarrollo WEB 2.0. Afortunadamente, para los que no podemos asistir a las conferencias, disponemos con las presentaciones online.

La primera que me llamo la atención es un pequeño
tutorial de iniciación en Javascript, que resulta muy útil también para refrescar nuestros conocimientos si ya trabajamos en este lenguaje.

El siguiente es un recorrido por las diferentes alternativas para realizar gráficos vectoriales con tecnologías del lado del cliente. Dejando de lado a Flash, contamos con un Standard – SVG -, disponible en la mayoría de los browsers modernos, pero que lamentablemente no es soportado por IE, aunque éste ultimo cuenta con una tecnología propietaria equivalente llamada VML. Partiendo desde este problema, se mencionan algunos esfuerzos por lograr unificar estas funcionalidades en un API crossbrowser, tal como el ExplorerCanvas project de Google y el dojo.gfx para la librería open source Dojo ,que ya es ampliamente usada.

Después de años de búsqueda al fin encuentro una IDE para Javascript como la gente. Aptana esta basada en eclipse, cuenta con intellisense para Javascript, DOM y CSS, indica la compatibilidad de las funciones en los distintos browsers del mercado y cuenta con un explorador de declaraciones en código y HTML. Tiene ademas una referencia de las funciones del lenguaje integrada a la IDE.

La primera beta que pruebo se ve bastante robusta y tuve una grata experiencia de uso. Todo lo que siempre quise y nunca tuve, o no tuve gratis :P.

Demás esta decir que estoy de acuerdo con este post en DomScripting.

“As Dean Edwards said, anyone can learn a little JavaScript and if you can learn a little, you can learn a lot.”

Dean Edwards publicó hace poco un post llamado “Levels of JavaScript Knowledge”, bastante interesante ya que vengo hablando de lo importante que es aprender este lenguaje si se quiere ser uno de los próximos desarrolladores de la WEB 2.0.

En total son 6 supuestos niveles de conocimiento, pero a mi parecer hay una brecha enorme entre el nivel 5 y el 6.

Mas allá de si concuerdo o no con su post, la impresión que me dio es que hace falta estudiar bastante para llegar a programar Javascript estándar, llamado también unobtrusive Javascript, el nivel a que todo programador WEB debería aspirar.

Quizás sea por eso que hay tan pocos buenos programadores en JavasScript…