Tag Archives: mvc

Localizar más facilmente una vista Razor con Resharper

Si alguna vez habéis tenido que localizar y maquetar una web que inicialmente estaba en un idioma en varios sabréis que es algo que quita mucho tiempo y desespera profundamente.

Es un proceso lento, repetitivo y que requiere compilar para ver los cambios… vamos, una fiesta.

Como me ha tocado hacer lo propio con las nuevas vistas de Terminis me he planteado la pregunta, ¿Resharper no me podrá ayudar a hacerlo más rápido?

Respuesta rápida: NO por defecto, pero podemos mejorarlo un poco.

Resharper tiene una opción para refactorizar un string y moverlo a un fichero de recursos pero esta opción solo funciona en código interpretado no en texto suelto de vistas Razor :_(

 

Investigando un poco he encontrado un pequeño truco que permite convertir un trozo del HTML en “código interpretado” por el compilador y así poder recfactorizarlo a recurso: crear un surround template:

Template Explorer

Creando el Surround Template

Resharper usa los templates para ayudarte a codificar más rápido y son francamente útiles. En concreto, los surround templates, sirven para seleccionar un texto y envolverlo con, por ejemplo, un tag HTML.

Para nuestra pequeña “trampa” necesitamos crear uno que envuelva el texto seleccionado entre @(“TEXTO”) para que resharper pueda interpretarlo y moverlo a un fichero de recursos.

Para ello seleccionamos en el Template Explorer la opción de “Surround Templates” en los tabs de arriba, elegimos el scope “Razor” y pulsamos en “New Template”:

New Surround Template

Esto nos abrirá una ventana para que peguemos el código del template y le demos un nombre. Yo lo he llamado “@” (si, lo sé, super original..)

Este es el código:

@(“$SELECTION$”)

Luego, en la lista, tienes que arrastrarlo a la quick list para tenerlo más a mano (como en la imagen de arriba).

Bien, con esto ya tenemos el surround template listo y tan solo tenemos que usarlo.

Usandolo en nuestra vista Razor

Tenemos un texto en un h2 que queremos incluir en el fichero de recursos lo más rápido posible.

h2

Hacerlo de la forma “tradicional” implicaría ir al fichero de recursos, añadir uno nuevo, darle un nombre, copiar&pegar este texto, clonarlo para el resto de idiomas, localizar en cada idioma y volver a la vista de razor para sustituir el texto por la llamada al fichero de recursos: un coñazo.

Con surround template (y con los benditos shortcuts!):

1) CTRL + W hasta seleccionar toda la frase a localizar:

h2_1

2) CTRL + E , J: Surround with: @:

h2_2

3) CTRL + R, O: Refactor, Move To:

RefactorMoveTo

 

¡voilá! Resharper se encarga el solo de crear el recurso (en el fichero que le digas), sustituirlo en el Razor y dejarlo listo para clonarlo en el resto de idiomas.

ACTUALIZADO

El gran Subgurim me comenta una forma aún más rápida de refactorzar texto:

En el explorador de soluciones seleccionamos el proyecto y, en sus propiedades -> Resharper modificamos:

  • Localizable: True
  • Localizable inspector: Pessimistic

ResharperLocalizationProperties

 

Con esto habilitamos la opción de Refactor > Move To Resources en el menú de acceso rápido con ALT+ENTER lo cual hace el paso 3 mucho más rápido:

¡Gracias Maestro!


No es la solución que esperaba encontrar pero me ha ahorrado horas de tedioso copy&paste…

¡Nos vemos compilando!

Arquitectura MVC, ¿como puede mejorar mi aplicación?

Y es que ultimamente hemos oido mucho hablar sobre MVC pero, ¿qué es realmente y para que se usa? Empecemos desde el principio:

 

MVC son las siglas de Model-View-Controller (Modelo-Vista-Controlador) y es un patrón de la arquitectura del software descrito en 1979 por el Noruego Trygve Reenskaug.

 

El punto principal de MVC es dividir la aplicación en tres capas reales, una para datos, otra para la lógica y otra para la presentación consiguiendo que sea mantenible, escalable y reutilizable.

Para explicar en qué consiste y como funciona vamos a utilizar como ejemplo una hipotética aplicación web .NET que accede a una base de datos SQL SERVER a la que aplicamos este patrón.

  • El “Modelo“, o capa de datos, es el conjunto de clases que representan la información con la que vamos a trabajar y su lógica de negocio. En nuestro ejemplo serían las clases en las que consultamos a la base de datos SQL SERVER mediante, por ejemplo. modelos de Entity Framework.
  • La “Vista“, o capa de presentación, define el modo en el que el usuario ve los datos y como interactúa con ellos. Una página HTML con formularios sería un ejemplo claro de este tipo de capa.
  • El “Controlador“, o capa de lógica, es la que gestiona las peticiones de la Vista solicitando los datos necesarios al Modelo y adaptándolos para su correcta visualización. En .NET serían métodos que actuan como respuesta a un POST de un formulario HTML, captura los datos que el usuario ha introducido y solicita lo necesario al Modelo para retroalimentar la Vista.

 

 

Para terminar de explicar el funcionamiento vamos a platear un formulario de Login en nuestra web de ejemplo.

La Vista sería la página HTML con un <form> con dos <input> uno para el usuario y otro para la contraseña.

Al hacer submit del formulario la petición iría al Controlador que recupera esos datos y solicita al Modelo que busque si el usuario/contraseña introducidos son válidos.

El Modelo realiza la consulta a base de datos y le devuelve el resultado al Controlador que es el que determina si el intento de Login ha sido correcto o no. En caso de ser correcto iniciamos sesión en el sistema y redirijimos a una página de incio del usuario (por ejemplo), en caso de ser erroneo volvemos a la misma vista pero indicando un mensaje de error y el sistema vuelve al punto inicial en el que se espera una acción por parte del usuario.

 

Ventajas de usar MVC

 

  • Escalabilidad

La principal ventaja de separar la aplicación en tres capas reales es la escalabilidad.

Un par de ejemplos: bastaría con recargar el modelo si añades o editas una tabla o crear una nueva vista si quieres hacer una versión para navegador de dispositivo móvil.

  • Simplicidad

Otra gran ventaja es la simplicidad con la que se puede gestionar y mantener el sistema así como la posibilidad de trabajar en paralelo. Puedes tener a diseñadores trabajando en las vistas mientras que los desarrolladores se pueden centrar en el Controlador y el Modelo. ¿Qué quieres cambiar el diseño de la web? Tan solo edita el HTML y la aplicación seguirá funcionando.

  • Desarollo mediante TDD

Al tener la lógica separada de la interfaz es mucho más sencillo crear las pruebas unitarias y desarrollar mediante TDD (Test Driven Development). Sobre esto último dedicaré un artículo más adelante.

  • Rapidez y limpieza de código.

No hay ViewState, ni HTML autogenerado por controles, ni mantenimiento de estado en el código. Lo que interpreta el navegador es exactamente lo que hemos escrito. Eso hace que la página sea más ligera y cargue en menos tiempo.

  • Facilidad para el uso de jQuery

Al tener en la Vista código HTML directamente podemos integrar controles jQuery de forma más sencilla que en WebForms.

 

Conclusiones: ¿WebForms o MVC?

Como habeis podido comprobar en este punto las ventajas de usar este patrón son muchas pero no es oro todo lo que reluce.

MVC es una arquitectura muy compleja que requiere una abstracción mayor por parte del desarrollador que hace que el desarrollo sea más lento por eso solo es recomendable usarlo en ciertos tipos de proyectos.

Si lo que necesitas es hacer un prototipo o RAD, entonces utiliza WebForms.

Si necesitas que la página almacene datos y no quieres estar continuamente haciendo peticiones a la capa de persistencia, entonces utiliza WebForms.

Si tu equipo de desarrollo es pequeño y no trabajais con TDD, entonces utiliza WebForms.

 

En cambio, si tu equipo está segmentado en Diseñadores y Desarrolladores, dispones de conocimientos avanzados de JavaScript y Ajax y necesitas tener un control total del código generado MVC es el patrón que debes utilizar. Si además es un proyecto de cierta embergadura, necesitais controlar mediante pruebas unitarias y va cambiando/ampliandose de forma constante MVC es la solución.

 

Nos vemos Compilando!!