ASP.NET MVC 3: Buenas prácticas y técnicas para optimizar tu aplicación

Desde hace más de diez años, venimos desarrollando aplicaciones web utilizando tecnologías de Microsoft, por lo que hemos pasado por ASP classic, ASP.NET 2 con Web Forms y Rest Services con WCF y .NET 3.5.

Recientemente, hemos empezado a desarrollar un proyecto de tamaño considerable y con poco tiempo de desarrollo, por lo que nos planteamos la mejor tecnología a utilizar, teniendo en mente el objetivo de maximizar la reutilización de componentes de código, y la separación entre el desarrollo del backend y el frontend, para aprovechar la especialización de los miembros del equipo.

Estas premisas iniciales nos llevaron a probar el framework MVC de ASP.NET, justo recién salida la versión 3. Como con toda tecnología o framework que se utiliza por primera vez, existe una curva de aprendizaje y de adopción de buenas prácticas que tienes que asumir como inversión, si quieres que el medio plazo la productividad del desarrollo se dispare.

Después de casi 2 meses de investigaciones, pruebas varias, discusiones y marcha atrás en algunos aspectos del diseño de la aplicación, os dejo una recopilación de enlaces que nos han servido para adoptar buenas prácticas y para implementar técnicas que han mejorado, o lo harán, el desarrollo de cualquier aplicación web.

Formación MVC

Por supuesto, empezamos por el principio, la formación:

Blogs de referencia:

Desarrollando con MVC

Una vez hemos pasado el periodo inicial de formación, o si bien ya teníamos experiencia con MVC, aquí comparto una serie de herramientas que se han vuelto imprescindibles en el desarrollo del día a día y que mejoran notablemente la productividad y mantenimiento de la aplicación:

  1. T4MVC: Esta librería nos crea automáticamente clases tipadas que eliminan la necesidad de utilizar literales de cadena para acceder a nuestras vistas, controladores, acciones y recursos estáticos.

Por ejemplo, en lugar de

Html.RenderPartial("DinnerForm");

podemos utilizar

Html.RenderPartial(MVC.Dinners.Views.DinnerForm);

Lo que además significa que tenemos IntelliSense incluido, con lo que la productividad se incrementa. La lista completa de funcionalidades la podemos encontrar en http://mvccontrib.codeplex.com/wikipage?title=T4MVC_doc&referringTitle=T4MVC

  • Con T4MVC tenemos acceso a nuestros recursos con IntelliSense, pero cada vez que añadimos un nuevo elemento, tenemos que volver a ejecutar la plantilla para que genere las nuevas clases que añamos incluido. Para evitar esto y que se generen automáticamente, instalamos una extensión para Visual Studio llamada Chirpy.Este plugin (que sirve para otras cosas interesantes, que no usamos, pero que merece la pena que investiguéis) se integra directamente con T4MVC y permite que se ejecute automáticamente en cada build que hagamos. Además, permite ejecutar cualquier template T4 propio que podamos tener.

Optimizando la aplicación web MVC

Normalmente, las aplicaciones se suelen desarrollar sin tener en cuenta desde el inicio las posibles optimizaciones que se deben realizar para aumentar el rendimiento de la misma, teniendo que ir modificándola a posteriori conforme van apareciendo los problemas.

El mejor resumen de técnicas de optimización para sitios web podría ser el elaborado por Yahoo: http://developer.yahoo.com/performance/rules.html, que además viene acompañado por una utilidad que nos permitirá comprobar estas reglas en nuestro sitio web: http://developer.yahoo.com/yslow/

También es interesante echarle un ojo a PageSpeed de Google, que también nos proporciona una herramienta para mejorar el rendimiento de nuestra aplicación.

A continuación os muestro algunas librerías que utilizamos para optimizar nuestras aplicaciones y aplicar las reglas anteriores, y que se integran muy bien con el desarrollo de MVC desde el inicio, por lo que es muy recomendable tenerlas en cuenta.

  1. Utiliza CDNs para acceder a frameworks generalistas (como JQuery).

Tanto Google como Microsoft disponen de un CDN que aloja algunos de los frameworks de javascript más comunes. Se recomienda utilizarlos para liberar peticiones HTTP de nuestro servidor y porque si el usuario ha visitado otra web que también use el CDN, ya tendrá el archivo cacheado en el navegador.

  • Combres: Esta librería integra minimización, compresión, combinación y cacheo de archivos JS y CSS. Permite, por tanto, reducir el ancho de banda utilizado por nuestros archivos de script y css, y reducir las peticiones HTTP que recibe nuestro servidor. Más detalles en http://www.codeproject.com/KB/aspnet/combres2.aspx. Otra ventaja incluida indirectamente es que, al centralizar las referencias a librerías de JS y de CSS, nos permite cambiar un archivo por otro en un único punto de la aplicación (p. ej. cambiar la versión de JQuery), y no tener que modificar todas las páginas que lo referencian.

    Combres también permite utilizar recursos externos, por lo que podemos (y debemos) cargar los scripts del CDN y que Combres los minimice y combine con los nuestros propios.

  • ASP.NET Sprite and Image Optimization: Utilizar Sprites para servir las imágenes de la aplicación. Esta librería se encarga de generar automáticamente archivos de Sprites de imágenes a partir de las imágenes de nuestra aplicación, y decide, en función del navegador del usuario, cuál es la mejor manera de servir cada imagen.

Optimizaciones en el servidor IIS

A nivel de IIS, lo más importante es configurarlo correctamente  para habilitar la compresión de las respuestas y la caché en nuestra aplicación.

  1. Configuración de la compresión de la respuesta con Gzip: http://www.iis.net/ConfigReference/system.webServer/httpCompression
  2. Configuración de la caché de respuesta: http://www.iis.net/ConfigReference/system.webServer/caching

Conecta conmigo

Categorías

Archivo