miércoles, 19 de noviembre de 2014

AngularJS: Como aplicarla a mis proyectos?

AngularJS

Seguramente vas a encontrar mucha información en la Red sobre AngularJS y cómo hacer un blog en 5 minutos. Sí esto es lo que estas buscando, este no es el post que necesitas y siento mucho decepcionarte, busca en alguna otra entrada de mi blog algo que te ayude en lo que estas tratando de hacer, y de esa manera no te habré hecho perder el tiempo. Ahora, hablemos de lo que si vamos a tener en este post.

En el siguiente post voy a tratar de resumir que es AngularJS, que problemas podemos encontrar al tratar de implementarlo en uno de nuestros proyectos y un breve resumen de como se supone funciona todo este mundo de controladores, dependencias, directivas y servicios. Dicho esto, empecemos y espero les sea de ayuda.

Que es AngularJS?

AngularJS es un framework MVW (Model View Whatever) como sus creadores lo han denominado. Que traduce cualquier cosa que quieras usar MVC, MVVC o lo que sea que te permita AngularJS hacer y funcione, está bien. Pero como algunas bases debe tener, podemos decir que AngularJS es un Framework MVC en el lado del cliente que esta compuesto de Controladores, Modelos y Vistas. A los cuales se le agregan las directivas, servicios, filtros, dependencias, etc. Si quieres más información puedes consultar la página oficial de AngularJS.

Que problemas podemos encontrar migrando un proyecto hacia AngularJS?

En la mayoría de proyectos que usan javascript sin ningún framework tiene a jQuery cómo base para la creación de sus funciones, eventos y demás actividades en el cliente. Pero la mayoría de estos coinciden en que tienen un javascript por página que es el encargado de inicializar todos los eventos y asignar valores por defecto a las librerías, constantes, etc. 

En este contexto, si la decision fuera pasar de estos complejos y largos archivos con código que posiblemente ya dejo de ser mantenible, hacia un entorno AngularJS, estos son algunos de los problemas que se van a encontrar:

  1. AngularJS necesita de un modulo ("Aplicación") para a partir de este crear los demás componentes. Se podría crear un modulo por página pero sería equivalente a tener el mismo esquema de un archivo js por página. 
  2. AngularJS esta pensado para ser aplicado en modo single page. Es decir, la página de index carga todos los recursos y se encarga de todas las vistas. Normalmente, en los proyectos MVC se tienen templates para cargar vistas, pero cada uno es un recurso diferente. Este cambio es largo y tedioso. 
  3. AngularJS tiene directivas que nos permiten reusar código y funcionalidades, no comiences migrando página por control. Comienza con las directivas y será más rápido.
  4. Es usual tomar los proyectos y comenzar a cambiar todo hacia AngularJS. Te va resultar mucho más fácil si comienzas un proyecto nuevo y reusas el código del proyecto que deseas migrar. Trata de comenzar por las rutas de la aplicación, luego la seguridad, directivas, servicios, controladores y finalmente los estilos. 
  5. AngularJS tiene mucha variedad de plugins/librerías para solucionar los diferentes inconvenientes que se presentan a la hora del desarrollo, es muy importante que no escojas lo primero que veas en internet, investiga cual se acopla mejor a tus necesidades y cuando tengas decidido las librerías que vas a usar, es momento de comenzar a codificar. 

Cómo funciona esto de AngularJS?

Ya sabemos que AngularJS es un Framework, que podemos usarlo como MVC, MVVC o como mejor nos parezca y que además si vamos a migrar una aplicación típica de MVC vamos a tener que cambiar el modo de trabajo de nuestro proyecto. Pero, y Porque? Cómo funciona esto?. A continuación intentaré responder estas preguntas.

AngularJS es una librería que esta pensada para ser cargada una sola vez y a partir de ese momento servir todas las funcionalidades de la aplicación de forma asincrona. De tal manera que todos los scripts que necesitemos para nuestra aplicación van a estar en esta página. De esta manera las vistas van a ser cargadas mediante llamados ajax y AngularJS se encargará de iniciar todos los eventos necesarios para mapear la vista con nuestros controladores.

De igual forma Angular requiere que importes los servicios, directivas y demás archivos en la página de inicio de manera que cuando Angular vaya a resolver las dependencias no genere error ninguna dependencia. Por tanto, la migración de aplicaciones ya existentes no es tan fácil y limpia como se podría pensar, en algunos casos ni siquiera aplica para el modelo del proyecto y no todos los proyectos se pueden trabajar con este esquema, no olvides que existe más frameworks en el mercado. 

Conclusión


AngularJS es un muy buen Framework para el lado del cliente que te ayuda a organizar, agilizar, gestionar, mantener y acelerar tus desarrollos. Pero no todos los proyectos que realices deben tener AngularJS, en algunos casos el model simplemente no se acomoda a las especificaciones del Framework y no puedes intentar cambiar el proyecto para que se acomode al Framework. No depender de las librerías debe ser una de tus reglas principales al momento de realizar un desarrollo. No dejes que tus herramientas se vuelvan tus debilidades. 

Espero les haya gustado y servido este post, para los que esperaban ejemplos, aquí los pueden encontrar, no tenía sentido reinventar la rueda. Saludos y espero sus comentarios.