Migrando una aplicación Spring Web MVC basada en JSP a AngularJS

En el Blog de Spring.IO podéis encontrar este post sobre los pasos para migrar una aplicación Web sobre JSP y Spring MVC a AngularJS y Spring MVC.

Como dicen en el artículo es importante tener en cuenta ciertas consideraciones:

· Al migrar de una tecnología Server-Side (JSP, Thymeleaf, JSF,…) a una Client-Side es necesario concebir la aplicación como 2 aplicaciones: la Client-Side y la Server-Side.

· La aplicación Client-Side estará construida en AngularJS y correrá el navegador y comunicará con los Servicios Server-Side provistos por Spring MVC.

· También es importante tener en cuenta que al trabajar con una tecnología Javascript en lugar de usar formularios HTML haciendo form submit los datos se encapsularán en un objeto JSON enviado al Servicio RESTFul Spring MVC.

· Las validaciones pueden hacerse mediante el mecanismo de validaciones de AngularJS, aunque es recomendable volver a validar estos datos en la Capa de Servicios

Estructuración de la aplicación

Veamos cómo se puede estructurar la aplicación.

Partiendo de un proyecto Maven Web tendré:

Dentro de src/main/webapp tendré mi aplicación AngularJS:

Los desarrolladores JSP están (estamos J) acostumbrados al uso de Tags para mapear formularios a objetos Java por ejemplo:

En AngularJS también existe un mecanismo de binding, aunque este construido sobre plantillas en HTML (y por tanto que se renderizan bien en el navegador, uno de los mayores handicaps de las JSPs :)).

AngularJS permite definir campos obligatorios, validaciones de fechas, patrones,…

Convirtiendo mis controladores Spring MVC en Servicios RESTful

Como decíamos lo lógico es que AngularJS pase un objeto JSON a la capa Server-Side, por tanto ya no necesito el ModelAndView de Spring MVC para renderizar una vista:

Si no que basta con construir un Servicio RESTful que devuelva el recurso (DTO para entendernos :D) que será mapeado por AngularJS:

Podemos ver cómo desde AngularJS se accede al Servicio RESTful:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: