Javascript: The Good Parts y JSLint

Recientemente parece que el libro Javascript: The Good Parts me persigue allá donde vaya.

Hace poco lo conocí a través de twitter, pero justo hoy, en el evento html tour de Madrid de Plain Concepts, se ha vuelto a recomendar la lectura de este libro.

Lo cierto es que cuando lo tuve en mi poder lo devoré en un solo fin de semana. Tampoco es ningún mérito, el libro es pequeño y no se anda con rodeos.

Después de su lectura, una sola idea ronda por mi cabeza “Javascript es un lenguaje incomprendido”.  Yo al menos no tengo ningún reparo en reconocer que, antes de la lectura de este libro, mi opinión sobre Javascript distaba de ser algo positivo. Además, también distaba de tener el suficiente conocimiento como para juzgarlo con conocimiento de causa.

Hoy durante el html tour, he oído una de las mejores frases que uno podría oír sobre Javascript “Javascript: the worst part. El principal problema es nuestra ignorancia”.

Creo que realmente el problema de Javascript es que cualquiera puede programar en Javascript. Da igual si eres un consumado experto o un tierno novato, escribe cuatro líneas de código y Javascript intentará por todos los medios ocultar tus vicios y ejecutar tu código.

Javascript es algo más que la función alert y la función confirm. Es un lenguaje de programación en toda regla pero con un pésimo interprete que, por no romper la web, no se quejará casi nunca y evitará así que aprendas de tus errores.

Además tampoco esperes encontrar en Javascript un lenguaje POO al estilo de C#. Javascript tiene su propia identidad y su forma singular de hacer las cosas, te gustará o no pero es lo que hay, es mejor que no intentes cambiar a Javascript sino cambiar tu forma de relacionarte con Javascript. Como dice Bruce Lee, “Be water my friend”.

Como lo cierto es que sí queremos aprender de nuestros errores y queremos ser mejores programadores, en mi opinión es indispensable realizar las siguientes tareas:

• Leer Javascript: The Good Parts.
• Utilizar JSLint para que valide nuestro código Javascript.

Como leerte el libro mientras te duermes plácidamente me parece un exceso, en este post lo que voy a intentar es explicarte brevemente cómo instalar JSLint y como usarlo y configurarlo.

JSLint es una herramienta creada por el mismo autor del libro, Douglas Crockford. El sitio web de la herramienta es http://www.jslint.com/. Según sus propias palabras, JSLint es una herramienta de calidad de código, es decir, una herramienta que busca problemas en tú código Javascript.

La mayoría de los problemas son bien conocidos y no admiten debate alguno, otros son guías de estilo propuestos por el autor, que podrías ignorar si así lo crees oportuno.

Aunque puedes utilizar un validador en línea desde su página, hay un proyecto en CodePlex que integra la herramienta en Visual Studio http://jslint4vs2010.codeplex.com/.

Para instalarlo, puedes descargar la extensión para Visual Studio 2010 http://visualstudiogallery.msdn.microsoft.com/961e6734-cd3a-4afb-a121-4541742b912e

También está disponible para su descarga desde el administrador de extensiones

Una vez instalado, tenemos disponible una nueva opción de menú: Herramientas > JS Lint Options…

 

El uso de JSLint es bastante sencillo, por defecto hará lo siguiente.

• Mostrará los errores como “warnings”
• Sólo validará los ficheros .js
• Ejecutará la herramienta en cada Build
• Cancelará el Build si encuentra algún error

Como vemos en las pantallas anteriores, podemos configurar multitud de aspectos de la herramienta: desde validar ficheros .html, no cancelar el Build, ejecutarlo cuando guardamos el fichero, excluir ciertas secciones de nuestro código a través de comentarios, etc.

Mi recomendación (copiada vilmente del ponente del html tour) es que utilicemos JSLint para cualquier nuevo proyecto y que, para proyectos existentes, hagamos lo que podamos. Es decir, hoy mismo me decía un compañero que lo había activado para un proyecto en mantenimiento y el número de errores había sido demasiado alto… Yo directamente en mis proyectos antiguos no lo activaré porque tengo amor propio y no me apetece que JSLint me saque los colores cuando analice mi código antiguo.

Para ver a JSLint en acción, crearemos un nuevo Sitio Web y agregaremos un fichero .js en el que escribiremos el siguiente código:

function foo() {

    bar = "baz";

    return bar;

}

for (var i = 0; i < 5; i++) {

    alert(foo());

}

 

Que nos devolverá los siguientes warnings:

La compilación ha sido cancelada porque JSLint encontró errores de validación.

• Estamos utilizando la variable “bar” pero no la hemos definido previamente (hemos olvidado var y eso implica que la variable bar se está creando en el contexto global y no el ámbito privado de la función foo).
• En Javascript no existe el ámbito de bloque, luego “for (var i” podría llevarnos a engaño. Después de la instrucción for, “i” vale 5 porque “i” sigue existiendo.

Vamos a intentar solucionar los errores:

function foo() {

    var bar = "baz"; // hemos agregado var

    return bar;

}

var i = 0; // hemos declarado la variable fuera del for

for (i; i < 5; i++) {

    alert(foo());

}

 

Pues lo hemos logrado a medias, ahora nos informa que “no esperaba ++” y que “alert” ha sido utilizada antes de ser definida.

En cuanto al operador ++, según Douglas Crockford, no le gusta. Yo no voy a discutir a este señor (no podría), pero como ahora mismo no sé que espera encontrar y además con este excusa podemos ver como “desactivar” ciertas validaciones de JSLint en la pantalla JSLint Options.

Ahora ya no tenemos errores de JSLint:

Respecto a los errores relacionados con las guías de estilo, bastaría con quitar un espacio entre “var bar y =”

function foo() {

    var bar= "baz";

    return bar;

}

 

Ahora JSLint nos informará sobre este nuevo error relacionado con el estilo:

Para los que trabajamos con Visual Studio, muchos de estos problemas se solucionan simplemente con el atajo Ctrl + K, Ctrl + D (Menú Editar > Avanzadas > Dar formato al documento). De hecho, yo también utilizo este comando para ver si mi código tiene algún error, si Visual Studio no es capaz de dar formato al documento Javascript… algo no va bien.

Otros comandos que agrega JSLint a Visual Studio son nuevas opciones en el menú contextual desde el explorador de soluciones (Solution Explorer).

La opción “Skip on build (item)” cobra especialmente importancia si trabajamos con librerías de terceros. Por ejemplo, jQuery 1.8.2 lanza 455 advertencias en JSLint! De este modo o lo excluimos o estamos en un serio aprieto.

Si estás trabajando con VS2012 e instalas la extensión WebEssentials (un must-have en toda regla) http://vswebessentials.com/ automáticamente dispondrás de JSHint (ver que ahora hemos cambiado la L por una H) y podrás configurar todo lo relacionado con la herramienta desde Herramientas > Opciones > Web Essentials > JSHint

Las diferencias entre L y H (JSLint y JSHint) radican en que JSHint es un fork de JSLint. Es decir, ambos están vigentes y ambos son válidos, utilizar uno u otro es cuestión de gustos. El porqué aquí http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to-jshint/ Por supuesto JSHint también tiene su propio validador on-line http://www.jshint.com/

Espero que este post te sirva para entender que Javascript es un lenguaje que merece toda tu atención y que hay herramientas que podrían ayudarnos a escribir mejor código.

Un saludo!