¡Hola de nuevo! En estas semanas hemos estado bastante ocupados y como podéis observar, nuestra web está actualmente en proceso de transformación. Espero que muy pronto podáis ver la nueva web y disfrutar de algunas de las cosas que iremos mostrando desde allí, de hecho este blog y sus contenidos se trasladarán a la web de Calipso Studios, por lo que probablemente esta sea la última entrada que escribiré desde blogger.
Entre las tareas de un desarrollador se encuentra la depuración de código para eliminar errores. En esta última semana, por ejemplo, estoy enfrentándome a esta tarea desde la perspectiva del lenguaje Javascript y si corregir “bugs” (palabra que designa en programación a un fallo en el funcionamiento esperado del software) en cualquier lenguaje es tedioso, en Javascript puede llegar a ser un auténtico infierno. Hace un año y medio de este lenguaje conocía lo justo y, como comprobé, lo que sabía era totalmente insuficiente y erróneo en algunos aspectos. Hoy voy a realizar un inciso sobre el tema del marketing web y voy a hablar de algunos conceptos que he ido aprendiendo y que considero fundamentales para desarrollar en Javascript. Puesto que para hablar de este lenguaje en profundidad necesitaría un blog aparte creo que puede resultar útil estructurar esta entrada partiendo de algunas de esas concepciones erróneas que he encontrado bastante extendidas entre la gente que no conoce a fondo el lenguaje y explicar por qué lo son y cómo se pueden evitar sus efectos adversos. Si queréis conocer las características de este lenguaje os recomiendo ver el siguiente vídeo de la Google IO 2011:

  • “Javascript no sigue un paradigma de orientación a objetos”. Falso. Este es uno de los errores más comunes que se cometen al iniciarse en este lenguaje quizás simplemente porque no posee una palabra clave que designe la definición de una clase (al menos hasta que no llegue la versión 2 de este lenguaje en la que han reservado “class” como palabra clave). Sin embargo en Javascript todo es un objeto y también existen los siguientes tipos de objetos:
  • RegExp: una expresión regular que se crea empleando una sintáxis parecida a la del comando ‘sed’ del bash linux.
  • Date: un tipo fecha.
  • String: cadenas de caracteres, todo lo que utilice comillas dobles o simples es un objeto de este tipo.
  • Number: números, cualquier expresión numérica es un objeto de este tipo.
  • Boolean:  un tipo representado por los valores true y false.
  • Array: un conjunto de elementos agrupados secuencialmente mediante un índice numérico. Cuando vemos una construcción como:

    var array = [], //constructor literal.
        array1 = ['primero', 2], //constructor literal con inicialización.
        array2 = new Array(); // constuctor de función.
    //inserción de los elementos de un array
    array.push('primero');
    array.push(2);
    array[0] === 'primero';//forma de acceder a los elementos de un array. Internamente el tipo de los índices de un array son cadenas pero javascript sigue una conversión automática de tipos por lo que 0 se transfoma en '0' y devuelve el elemento correcto
    array['1'] === 2;
    • Object: este es el tipo que representa a un estructura de
      datos, un mapa asociativo de parejas <clave, valor>. Cuando vemos
      una contrucción como:

    • var object = {}, //constructor literal.
          object1 = {key : 'value'}, //constructor literal con inicialización de clave a una cadena.
          object2 = new Object(); // constuctor de función.
      //creación en los objetos de una clave
      de forma dinámica mediante asignación.

      object.key = ‘value’;
      object2.key = ‘value’;
      object[‘key’] === ‘value’;//forma de acceder a los elementos de un
      objeto mediante referencia a clave. La expresión “===” sirve para
      comparar dos elementos sin utilizar conversión de tipos y es la
      preferida en las construcciones condicionales if. En este caso la expresión devolvería el objeto booleano true.
      object2.key === ‘value’; //forma de acceder a los elementos de un
      objeto mediante indexación. Siempre que conozcamos el nombre de la clave
      esta es la forma preferida para hacerlo.


      Tenemos tes objetos con el mismo contenido creados de 3 maneras distintas. Además todos
      los objetos siempre tienen una serie de propiedades, entre ellas la
      propiedad especial denominada prototype que permite:
       

      1. Crear tipos propios. 
      2. Disponer de un mecanismo para realizar herencia de tipos en javascript. Aunque para ver un ejemplo de esto es necesario que veamos el último tipo disponible en javascript.

    • Function: junto con los objetos es el tipo más importante. Cuando hacemos:

    • function miFuncion(){
      //algún código realmente importante
      }

        Puesto que una función es un objeto es posible asignarla a una variable y también devolver una función como tal como resultado de cualquier procesamiento:
         
        function miFuncion(){
        //código
        }
        var a = function(){//función anónima y asignación a una variable},

            b = miFuncion;

        //ejecutamos miFuncion

        miFuncion();
        b();

        //ejecutamos la función anónima
        a();

          Estos objetos también tienen una propiedad prototype y esto nos permite crear nuestros propios tipos de la siguiente manera:  

           
          function Tipo1(valorInicial) {
             this.propiedad1 = valorInicial;
             this.propiedad2 = [0, 3, 4];
          }
          Tipo1.prototype.setPropiedad1 = function(valor){
              this.propiedad1 = valor;
          }
          Tipo1.prototype.getPropiedad1 = function() {
             return this.propiedad1;
          }
          Tipo1.prototype.getPropiedad2 = function(){
              return this.propiedad2;
          }
           
          var a = new Tipo1(2),
                b = new Tipo1(3);
           
          a.getPropiedad1(); //2
          b.getPropiedad1(); //3

            La herencia de tipos se realiza mediante la técnica de encadenamiento de prototipos. Otra característica importante que posee este tipo es que es la única manera de crear ámbitos (lo que en javascript se llaman closures) y esta es una de las características más importantes de este lenguaje.
        • “En Javascript todo es público y global.”. Falso. Todas las declaraciones de variables que se crean dentro de una función son privadas y solamente accesibles a aquellos elementos que están dentro del ámbito de dicha función. Douglas Crockford lo explica en este artículo.
        • “En javascript no hay forma de crear un módulo de código”. Falso. De hecho existen 2 maneras para crear un módulo de código en javascript:
            1. Utilizar namespaces. Son objetos anidados (al estilo de los paquetes Java) cuya definición es devuelta por la ejecución de una función anónima que contiene todo el código de las funciones y métodos de ese módulo. Esto es lo que en el artículo se denomina namespaces.
            2. Utilizar propiamente un sistema de módulos para Javascript, como AMD.
            • “Javascript no encaja bien en el ciclo de vida del desarrollo de la aplicación. No hay una buena manera de especificar dependencias entre módulos javascript”. Falso. Maven permite especificar directamente un módulo javascript como una dependencia sin que tengas que preocuparte por indicar nada más en el archivo de index.html mediante su plugin para javascript.
            • “Javascript es pobre para especificar pruebas de unidad”. Falso. Existen distintas utilidades y software para realizar pruebas unitarias con Javascript. QUnit y Selenium son dos buenas herramientas para esto.
            • “Javascript no es un lenguaje serio, si cometes un error léxico o de sintaxis ni te avisa hasta que lo ejecutas”. Parcialmente cierto. Javascript es un lenguaje serio que adolece de compilador al estilo Java o C, por lo que cometer errores de este tipo es fácil. Sin embargo hoy día existen herramientas que hacen este trabajo, aunque por las características del lenguaje (ser dinámico y muy flexible) se quedan en un análisis léxico y sintáctico, así como una serie de recomendaciones de estilo que pueden llevarnos a evitar la mayoría de los errores semánticos “tontos”. JSLint es uno de ellos y además está integrado en el plugin de javascript para maven.
            Aparte de aclarar todas estas concepciones sobre Javascript hay una serie de recomendaciones para que el desarrollo con este lenguaje sea más simple:
            1. Utiliza un estilo consistente. La guía de estilo de Google es un buen punto de partida.
            2. Utiliza bibliotecas que estandaricen la tarea del manejo del DOM en los distintos navegadores. JQuery es una de ellas.
            3. Haz tu código lo más estandar posible, sin recurrir a cosas específicas y trata de probarlo en distintos navegadores. Antes para esto estaba el proyecto “swarm” que se integraba con QUnit pero lo han cerrado al público en general, por lo que si conocéis otro sitio de similares características soy todo oídos ^^.
            4. Utiliza depuradores de Javascript en los navegadores + sentencias “console.log” en tu código en fase de desarrollo para corregir los bugs. Firebug en Firefox y las herramientas para programadores integradas en Chrome son dos buenas opciones para esto.
            5. Documentad el código empleando alguna utilidad que permita sacarle más provecho a los comentarios, como por ejemplo que sean una ayuda para corregir errores. Google Closure Compiler os puede ser útil para esto, con la ventaja adicional que minimizará vuestro código javascript haciendolo más eficiente.
            6. Si lo que os interesa más que nada es la productividad, utilizar las herramientas de google para programar en java y traducir posteriormente a javascript.
            Todo esto os puede ayudar a que vuestro código tenga mayor calidad y sea más mantenible. Como reflexión y opinión personal sobre el lenguaje diré que pese a todo un error en javascript, por las características del lenguaje, es más difícil de trazar que un error en Java aunque la comparación entre ambos no es justa ni correcta, pero como desarrolladores que nos toca sufrir cuando hacemos depuraciones a todos nos gustaría que las cosas fueran siempre lo más sencillas posibles.
            Nada más por hoy, espero que pronto nos veamos y ya en la página de Calipso Studios.