Actualmente estoy involucrado en un proyecto en el que la arquitectura es un Backend de servicios web Rest (Java) y como Frontend una aplicación de una sola página (SPA Single-page application) hecha en AngularJs, utilizando el patrón MVC en el navegador.
Siempre he tenido ganas en saber algo más de como funciona este framework y no podía perder la oportunidad de echar una mano en el Front.
Para poneros en antecedentes, vaya por delante que en mi anterior trabajo apenas se utilizaba JavaScript en la vista. Así que ahí estaba yo, leyendo un manual de AngularJs con muchas ganas, intentando asimilar todos los nuevos conceptos de la herramienta y del lenguaje.
Aquí van mis primeras conclusiones sobre Angularjs de un ‘newbie’ que todavía tiene mucho que aprender.
Single-page application
La primera y quizás más importante es que me ha encantado el concepto. Te plantea una aplicación web de una manera diferente. Ya no piensas en peticiones web, formularios, etc, sino que piensas en eventos.
Al ser una aplicación de una sola página pasas de pensar en una aplicación web al uso a una que se parece más a .NET. La página se carga una vez (index.html) y es Angular quien se encarga según la url (en realidad ficticia con un ancla #) la que carga las diferentes ‘plantillas’ (vista, código html parcial) y los diferentes ‘controladores’ (funciones javaScript) que hace que se convierta en diferentes ‘páginas’.
No se carga una página por petición por lo que no es necesario guardar variables ‘volátiles’ en sesión, simplemente la almacenas en memoria. De hecho nosotros solamente almacenamos en cookies las credenciales de acceso.
A nivel de controlador defines las funciones que responderán a los diferentes eventos. El apretar un botón, un enlace, el cambio de foco de un campo de formulario,etc… Te centras en programar la lógica del evento, sin preocuparte como propagar el cambio para dibujar el resultado al usuario. De eso se ocupa Angular…
Conexión vista-controlador-backend ¿Programación reactiva?
Dos cosas me han llamado la atención para bien. Primero, la conexión entre la vista y el controlador.
Es directa. Si desde el controlador se cambia una variable esta se propaga directamente en la vista y se produce un cambio en lo que está viendo en usuario. También en el otro sentido, se puede saber cuando se ha modificado una entidad por el usuario y procesar este cambio en el controlador.
Si tenemos en cuenta que los campos de un formulario pueden constituir una entidad en su conjunto, es fácil imaginar lo sencillo que es propagar los cambios también al backend. No se si se puede llamar ‘Programación Reactiva‘ pero se le parece mucho… Un cambio realizado por el usuario se puede propagar al backend y un cambio en el backend se puede propagar y que lo vea el usuario.
Inyección de dependencias
La segunda es la inyección de dependencias que implementa Angular. Una aplicación se divide en módulos y en estos hay controladores, directivas (estas enfocadas más a la vista y a sus validaciones) y servicios. Todas las dependencias, por ejemplo, de un servicio que necesita un controlador, se definen a nivel de módulo de aplicación.
Siguiendo el ejemplo, para poder utilizar el servicio en tu controlador es tan sencillo como tener como argumento en la definición de tu función controlador un objeto servicio. Angular se encarga de instanciar correctamente el servicio que necesita el controlador resolviendo a su vez todas las dependencias.
A nivel de modulo se pueden definir, factorías, servicios y proveedores… Seguro que quien se han pegado en Java con Spring esto les suena algo…
Más cosas
Angular es un framework muy completo. En el core viene con directivas, filtros, y servicios predefinidos (como su propia implementación del patrón ‘promise‘ [$q]) que te hace la vida más fácil para un novatillo en el lenguaje y en el concepto como yo.
Tiene ‘interceptadores‘ que son parecidos a los filtros de Java que te permiten capturar la petición al servidor y por ejemplo enviar las credenciales de conexión sin tener que hacerlo en cada petición.
Angular está orientado a TDD. Es sencillo tanto hacer test unitarios como test de integración.
Conclusiones Pros y Contras
Ventajas
En esta fase de aprendizaje Angular me lo ha puesto sencillo. Me ha definido un marco estándar de trabajo y me ha ayudado a no tener la sensación de estar haciendo las cosas no también como debería.
Además me he encontrado con que la documentación es buena y en este momento ya hay mucha gente trabajando con él por lo que puedes encontrar solución a casi cualquier problema en Stackoverflow.
Otra de las ventajas es su rapidez de ejecución. Las peticiones al servidor son sólo llamadas ajax y plantillas parciales html. Realmente es destacable la rapidez con que se muestran todos los cambios.
Este tipo de arquitectura es fácilmente cacheable al ser todo archivos estáticos por lo que la escalabilidad del Front casi deja de ser un problema.
Por lo que escrito más arriba. El dinamismo que le da a la web es difícil de superar en otra arquitectura.
Contras
La dudas que me surgen es que cuando la aplicación empiece a crecer en ficheros js cuanto va a ser de pesada en la primera carga. A lo mejor cuando llegue habrá que plantearse una librería como RequireJs. Por rendimiento realmente no es necesaria, ya que Angular sólo carga en memoria lo que necesita.
Otra de las pegas es de usabilidad. Es muy común que en un mismo controlador manejes, por ejemplo, dos formularios y que juegues con su visibilidad para mostrar uno u otro. Si en el proceso el usuario aprieta el botón de ‘Atrás’ del navegador lo más probable es que le lleve a una sección de la web que no se corresponde con el anterior paso. Estas cosas hay que tenerlas en cuenta en el diseño de la aplicación.
Otro punto a tener en cuenta es a indexación por parte de los buscadores. Al ser todo javaScript y dinámico probablemente Google no podrá indexar la web.
El problema de IE8. Es el único navegador que no soporta HTML5 y que actualmente aún lo usa mucha gente, aunque afortunadamente cada vez menos. Para que Angular soporte IE8 hay que hacer ‘unas movidas’, que hace que es mejor plantearse indicar al usuario que utilice otro navegador.
Y por último es un cambio de concepto en el diseño de una página web. Por las inercias de las empresas, esto lleva a no pocas reticencias para que alguna se atreva a realizar su proyecto en Angular.
Para una web que siempre requiera un registro, y muy dinámica tipo red social, para mi las ventajas supera con mucho a los inconvenientes.
Espero que os sirva.