Ejecutar JSHint dentro de Visual Studio

jshint
En el post de ayer se comentaba cómo era posible utilizar la extensión Web Essentials para crear bundles de nuestros archivos JavaScript. Siguiendo en la misma línea, hoy me gustaría hablar de otra de las opciones que posee esta fantástica extensión: la integración con JSHint. Todos aquellos que trabajamos con el front-end deberíamos conocer herramientas de análisis de código JavaScript como JSLint, JSHint, etcétera. Sin embargo, para hacer uso de ellas es necesario copiar nuestro código y pegarlo en el sitio web de alguna de estas herramientas para realizar el análisis del mismo, lo cual nos impide tener un seguimiento a tiempo real de nuestro desarrollo y terminamos por olvidarnos de su uso en el día a día.
Para evitar perder este análisis continuo también en los scripts, con Web Essentials podemos lanzar JSHint directamente desde Visual Studio de manera automática:

VS JsHint Errors

Dentro de la configuración de esta extensión, tenemos un apartado exclusivamente para las propiedades de esta herramienta. Para acceder a las opciones basta con ir al TOOLS –> Options –> Web Essentials –> JSHint:

JSHint configuration Web Essentials

De esta forma obligamos a los desarrolladores a estar atentos a la calidad de su código también en el front-end.

Espero que sea de utilidad.

¡Saludos!

Bundling con la extensión Web Essentials para Visual Studio

Hace tiempo estuve contando la forma de trabajar con Bundles en ASP.NET, donde el back-end es el encargado de unir y comprimir los ficheros seleccionados. Cuando tenemos aplicaciones muy grandes con muchos scripts específicos para determinadas vistas, no es muy viable registrar cada uno de ellos en la configuración de Bundles en el Global.asax. Gracias a la extensión Web Essentials podemos realizar estas acciones en tiempo de desarrollo.

Recordando un poco el por qué hacemos esto, el objetivo principal es reducir el número de peticiones (gracias al bundling) y, ademas, que el contenido sea lo más ligero posible (gracias a la compresión/minification). Un ejemplo claro que podemos ver con demasiada frecuencia es el siguiente:

<!DOCTYPE html>
<html>
<head>
    <title>Bundling Web Essentials</title>
</head>
    <body>
        <script src="scripts/aScript.js"></script>
        <script src="scripts/bScript.js"></script>
        <script src="scripts/cScript.js"></script>
    </body>
</html>

Cuando instalamos esta extensión, tenemos un submenú adicional en el menú contextual de Visual Studio donde podemos elegir lo siguiente:

Web Essentials Create JavaScript bundle file

Lo primero que necesitamos definir es el nombre del bundle:

bundle name

Una vez aceptemos creará un conjunto de archivos:

Bundle configuration

El que encapsula a todos ellos, se trata de un archivo XML, el cual contiene la configuración del mismo (minify, runOnBuild, output) y el nombre de los archivos que componen el bundle, además de su orden:

<?xml version="1.0" encoding="utf-8"?>
<bundle minify="true" runOnBuild="true" output="myBundle.js">
  <!--The order of the <file> elements determines the order of them when bundled.-->
  <file>/scripts/aScript.js</file>
  <file>/scripts/bScript.js</file>
  <file>/scripts/cScript.js</file>
</bundle>

En el archivo indicado como output (myBundle.js) se puede visualizar el resultado de la unión de todos los archivos involucrados, donde se puede apreciar un aspecto similar al siguiente:

///#source 1 1 /scripts/aScript.js
var MyScripts = MyScripts || function () {

    var helloWorld = function () {

        alert("Hello World!");
    };

    return {
        sayHello: helloWorld
    };

}();
///#source 1 1 /scripts/bScript.js
var MyCompany = MyCompany || function () {

    var clickHandler = function () {
        MyScripts.sayHello();
    };

    return {
        click: clickHandler
    };

}();
///#source 1 1 /scripts/cScript.js
window.onload = function () {

    document.getElementById('btnAction').addEventListener('click', function () {

        MyCompany.click();

    });
};

Por último, tenemos el resultado final en myBundle.min.js, el cual es que debemos asociar con nuestra vista, y su correspondiente source map.

Llegados a este punto, ya podemos modificar nuestro código de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
    <title>Bundling Web Essentials</title>
</head>
<body>
    <input id="btnAction" type="button" value="Click">
    <script src="scripts/myBundle.js"></script>
</body>
</html>

Además, gracias al source map generado, podemos disfrutar también de la depuración de estos scripts en producción:

myBundle.js source map

¡Saludos!

Depurar despliegues en Windows Azure desde Visual Studio 2012/2013

Una de las novedades que acompañan a la versión 2.2 del SDK de Windows Azure es la posibilidad de depurar aplicaciones en la nube de Microsoft desde nuestro Visual Studio on premise. ¡Más que útil! Ya que en más de una ocasión nos hemos encontrado con algún error que sólo ocurre una vez desplegado y sólo teníamos como herramienta los logs de aplicación, conectándonos en remoto a las máquinas virtuales.

Configuración de la publicación

Para que podamos depurar las instancias, es necesario modificar las propiedades de la publicación. Básicamente son dos:

En Common Settings debemos modificar Build Configuration a modo Debug, lo cual ya nos sugiere que este despliegue sólo debería de servir para localizar comportamientos anormales dentro de la aplicación, pero no se trata de un despliegue candidato para producción.

Remote Debugger Build configuration Debug

Por otro lado, en Advanced Settings debemos habilitar el check box Enable Remote Debugger for all roles.

Enable Remote Debugger for all roles

Una vez desplegada la solución, debemos acceder a la misma desde la pestaña Server Explorer y, seleccionando el cloud service en cuestión, podemos seleccionar la instancia que necesitemos depurar, simplemente haciendo clic sobre ella con el botón derecho y seleccionando Attach Debugger

Attach Debugger Windows Azure instance

En esta demo, he utilizado un Web Role donde he añadido una acción asociada a un enlace. Al hacer clic en el mismo, veremos cómo el punto de interrupción se activa en nuestro Visual Studio en local :)

Debugger Attached

Happy Clouding!