Angularjs

1.2. ¿Por qué AngularJS?

El tiempo pasa y la tecnología cambia muy rápido pero los conceptos no tanto. Hace muchos años en 1995 apareció con Java Applet una forma de ejecutar código de alto nivel (en este caso Java) mediante una máquina virtual en el navegador, la Java Virtual Machine (JVM). El concepto era poder utilizar aplicaciones tan potentes como las de un escritorio en un navegador web y que el trabajo duro lo realizara cliente.

Aunque no acabó triunfando, ya que la JVM era pesada en la descarga y en el arranque de cada applet, el concepto evolucionó y Adobe lo llevó hasta su concepto de las RIAs (Rich Internet Application) creadas con Adobe Flex y basadas en otra máquina virtual Flash Player, mucho más ligera y que era un estándar ya que el 99% de los usuarios la había adquirido para ver contenido Flash.

Java Flex Angularjs

Siempre se auguró como el futuro de internet este concepto y en la actualidad los frameworks JavaScript para aplicaciones web Single Page Aplication (SPA) han tomado el relevo de crear sistemas en los navegadores donde gran parte de su lógica de negocio depende del cliente.

AngularJS es lo que debió ser HTML desde el inicio si hubiera sido diseñado para la creación de aplicaciones de software.

Hasta ahora para dotar de "vida" al HTML lo podíamos solventar mediante:

Una librería como una colección de funciones en javascript que nos permitían dotar de funcionalidades a nuestra web apps. Por ejemplo JQuery
Frameworks como una particular implementación y estructuración de una aplicación web. Son simplemente una agrupación de herramientas existentes. El framework se encarga de dotar de orden y facilitar ciertas estructuras y funcionalides. Por ejemplo: backbonejs, emberjs, durandal, etc.

AngularJS realmente tiene otro enfoque. Minimiza esa concordancia entre el HTML estático y las aplicaciones web mediante la extensión con funcionalidad de nuevos bloques HTML. AngularJS enseña la nueva sintaxis al navegador gracias a esta extensión (mediante las directivas).

Data binding, enlace de datos mediante {{}}
Estructuras de control del DOM para repetir / ocultar elementos del DOM
Formularios y validación de los mismos
Creación de nuevos comportamientos de elementos del DOM y manejo de sus eventos
Agrupación y reutilización de componentes HTML.

10 razones por las que elegir AngularJS

MVC bien realizado. Normalmente en los frameworks MVC se pide al desarrollador que escriba el código de una cierta forma para poder funcionar. Esto supone mucho trabajo. AngularJS sin embargo gestiona los componentes y los interconecta de una forma muy sencilla y sin complicaciones.
HTML para la interaz. Se utiliza el HTML con su sistema de etiquetado tradicional para la definición de la interfaz gráfica de la aplicación web. Mucho más sencillo e intuitivo que tener que definir toda la UI mediante Javascript.
Modelo de datos POJO. En AngularJS los modelos de datos son Javascript Obects (POJO) con lo que no requieren de funciones extras estilo getters & setters. El código queda limpio y natural.

Tradicionalmente los modelos de datos se comportan como proveedores de datos con funcionalidad. En AngularJS son simples datos y los proveedores de datos se realizarán mediante services.

Gracias a $scope AngularJS acerca mucho la vista al controlador y nos permite tener estos modelos de datos vinculados entre los procesos y la vista. AngularJS esta continuamente observando (watch) los cambios de estos datos / propiedades actualizando la vista en caso de ser necesario.
Directivas con comportamientos. Angular JS nos permite añadir funcionalidad extra con nuevas etiquetas HTML. Imagina un mundo donde puedas crear tus propias etiquetas y que sean componentes de alto nivel. Por ejemplo <accordion></accordion>, <grid></grid>, <lightbox></lightbox>...

Con AngularJS puedes inventar y definir tus propios elementos de HTML. Esto es extremadamente potente, reutilizable y escalable.

Puedes definir:
- Atributos personalizados <miDirectiva></miDirectiva>
- Clases personalizadas <html><div miDirectiva></div> o <div class="miDirectiva"></div>
Flexibilidad con los filtros. De una forma eficiente cómoda y sencilla podemos formatear los datos o filtrarlos con una sóla línea de código: en la definición de visualización de los datos como parámetro. Son funciones desarrolladas totalmente independientes que se encargan de transformar los datos.
Escribe menos código. Todos estas características hacen que el desarrollador tenga que programar menos y por tanto menos errores.
- No requiere de crear tu propia estructura MVC.
- Las vistas están definidas en HTML y son muy consisas.
- Los modelos de datos no requieren de getters & setters
- Data-binding simplifica la comunicación vista-controlador.
- Las directivas separan el código de la aplicación y lo hacen escalable.
- Los filtros manipulan los datos de una forma muy cómoda.
Manipular DOM en el controlador. Tradicionalmente (por ejemplo con JQuery) manipulamos el DOM añadiendo comportamiento. Con AngularJS separamos el comportamiennto de manipular el DOM, de hecho en AngularJS se debe realizar en las directivas y no en la vista.
Services. Los controladores en Angular acaban haciendo un único trabajo muy simple: manipular el $scope.

Estos controladores se apoyan en los servicios (services). No se involucran en el MVC de la aplicación y funcionen como simples API obteniendo los datos.
Sistema de eventos. Sencilla comunicación por mensajes mediante eventos. Comunicando un particular nodo con sus hijos. Mediante broadcast() se envia a todos sus hijos y mediante emit() a todos sus padres.

Los controladores se puede comunicar mediante este sistema de eventos pero también se puede simplificar mucho esta comunicación gracias al data-binding.
Unit testing. AngularJS tiene un buen mecanismo de testeo en parte gracias también a su Inyección de dependencias (DI)