Skip to main content
AngularJS Gfi

Super héroes en la web con AngularJS

AngularJS es un framework JavaScript desarrollado por Google para estructurar la arquitectura de aplicaciones web y facilitar la implementación del patrón MVC/MVVM para JavaScript.

AngularJS proporciona un conjunto de herramientas y estructuras para el desarrollo de componentes complejos basados en JavaScript.

Por qué angularjs

AngularJS en el mercado actual

Su uso está bastante extendido, con una rápida expansión, y en sitios que requieren un alto procesamiento JavaScript consideran AngularJS como una de las mejores opciones.

market
Ilustraciones – Posición de AngularJS en el mercado y su uso en corto período de tiempo (Fuente: W3Techs.com y BuiltWith)

A continuación se muestran unos gráficos comparativos de la cantidad de sitios web que utilizan AngularJS clasificados por sector.

chart2
Ilustración – AngularJS por Sectores (Fuente: BuiltWith)

Se apuesta firmemente por AngularJS como tecnología puntera para las aplicaciones web empresariales, con numerosos casos de éxito en diferentes proyectos.

¿Porqué se apuesta por AngularJS?

eleccion-angular
 

Características clave de AngularJS

caracteristicas-clave
 

Patrón MVVM

Los creadores de Angular no quieren clasificar el framework dentro de ningún patrón concreto (MVC/MVVM/…) Lo definen como MV* (modelo-vista-loquesea). Sin embargo su implementación es muy próxima a MVVM.

MVC
Ilustración – Modelo MVC (Model- View – Controller)

El patrón Model-View-ViewModel es una evolución del patrón Model-View-Controller.

MVC separa los datos, la interfaz de usuario, y la lógica de negocio en tres componentes distintos. Cuando la lógica de negocio (controller) realiza un cambio, es necesario que actualice la vista explícitamente (cambiando el contenido o el estilo de los elementos visualizados).

MVVM
Ilustración – Modelo MVVM (Model- View – ViewModel)

 

Client-Side Template

El sistema de plantillas en AngularJS es diferente del utilizado en otros frameworks. Por lo general es el servidor el encargado de mezclar la plantilla con los datos y devolver el resultado al navegador. En AngularJS el servidor proporciona los contenidos estáticos (plantillas) y la información que se va a representar (modelo) y es el cliente el encargado de mezclar la información del modelo con la plantilla para generar la vista.

Single Page Aplication en AngularJS

Una Single Page Application (SPA) es una aplicación de página única con el propósito de dar una experiencia más fluida a los usuarios.

En un SPA todos los códigos de HTML, JavaScript, y CSS se cargan de una vez o los recursos necesarios se cargan dinámicamente como lo requiera la página y se irán agregando, normalmente en respuesta a las acciones del usuario.

ciclo-vidaSPAAngularJS ha adoptado los principios de SPA. Para ello tiene templates que se basan en la tecnología bidirectional UI data binding. Data binding es una forma automática de actualizar a la vista cuando el modelo cambia y actualizaciones al modelo cuando la vista cambia.

Arquitectura AngularJS

La principal característica de AngularJS como framework es la arquitectura que provee para la implementación de la capa de Front-end en JavaScript y HTML.

Para implementar esta arquitectura, AngularJS tiene mecanismos para construcción de distintos elementos funcionales que compondrán el Front-end.

arquitectura

Los controladores son los encargados de inicializar y modificar la información que contienen los ámbitos o contextos de ejecución, en función de las necesidades de la aplicación.

Las directivas son el punto fuerte de AngularJS. Mediante el uso de las mismas podremos extender la sintaxis de HTML y darle el comportamiento que deseemos. Podemos crear directivas a nivel de: elemento, atributo, clase y de comentario.

Los filtros permiten modificar el modo en el que se va a presentar la información al usuario.

Los servicios son los encargados de comunicarse con el servidor para enviar y obtener información que después será tratada por los controllers para mostrarla en las vistas.

Se recomienda como una buena práctica fundamental, el desarrollo modular de las aplicaciones web. Estos módulos actúan como contenedores aislados, nos sirve para organizar el código y evitar que interactúe con otros scripts. Los módulos también permiten que el código sea más fácilmente reutilizable, entre otras ventajas.

Estructura de directorio modular MVC

A continuación se muestra un ejemplo de la estructura recomendable de proyecto AngularJS a crear:

estructura-modular

Herramientas recomendadas en AngularJS

tools

  • Para el desarrollo dirigido por pruebas se propone utilizar la herramienta Karma. Esta herramienta es utilizada para ejecutar tests de forma automática y facilitar, entre otras cosas, la depuración ‘cross-platform’ tanto en distintos navegadores como dispositivos, accediendo al servidor de Karma. Evita el desarrollo de configuraciones complejas y crea un flujo de trabajo dinámico que permite ahorrar tiempo y esfuerzo.
  • Como framework de pruebas de comportamiento y desarrollo BDD para código JavaScript se recomienda Jasmine, utilizado en numerosos casos de éxito. Es el más popular actualmente y tiene una sintaxis obvia y limpia para que se puedan escribir los tests fácilmente.
  • Para llevar a cabo los tipos de tests end-to-end AngularJS dispone de un ‘Scenario Runner’ basado en Jasmine que permite la descripción de diferentes escenarios de ejecución y los resultados esperados.
  • Para realizar tareas repetitivas tales como: minificación, compilación, validación de sintaxis, observación de cambios de tus archivos, concatenación de archivos, etc. será más fácil y rápido de realizar con Grunt.
  • Bower es un gestor de paquetes que podemos utilizar con AngularJS. Como cualquier otro gestor de paquetes, Bower nos ayuda a instalar dependencias de terceros en nuestras aplicaciones, de forma sencilla y completamente actualizadas. Así podremos evitar la tediosa tarea de tener que buscar todos los archivos actualizados de las dependencias que necesitemos en nuestros proyectos.
  • Existe un complemento para el navegador Chrome llamado Batarang que está especialmente diseñado para la depuración de AngularJS. Este complemento añadirá una nueva vista en la consola de depuración que nos ofrecerá información detallada acerca del contexto en el que se encuentra la aplicación Angular en cada momento, los valores del modelo de datos, la anidación de contextos y las dependencias entre componentes, entre otras cosas.

Material Design UX

El proyecto Material Design es una implementación de componentes en AngularJS al igual que en su día pudo hacerlo jQuery con Boostrap. Este proyecto ofrece un conjunto de componentes de interfaz de usuario reutilizables y accesibles basados en el sistema de diseño de componentes. Es un sistema unificado que trabaja la parte visual y adapta el diseño a los diferentes dispositivos y resoluciones de pantallas. Es una herramienta muy útil para los desarrolladores, ya que ofrece una gran variedad de componentes de reutilizables con un coste de integración mínimo… pero de ello hablaremos en otra ocasión.

Conclusiones

AngularJS se está convirtiendo en el marco de JavaScript dominante para el desarrollo web profesional. Es una de las tecnologías más cool del momento y se apuesta firmemente como elección para el marco de trabajo en equipos ágiles, por la grandes ventajas que ofrece, así que no lo perdamos de vista.

“Ponte el traje de AngularJS y conviértete en un súper héroe…”

 

Escrito con la colaboración de Pablo Pérez Aguiló.

 

 

Verónica Blanco Rodriguez

Verónica Blanco Rodriguez

Consultor Senior y Arquitecto Empresarial para la transformación digital en las organizaciones. Apasionada por la tecnología, innovación y metodologías ágiles.

Verónica Blanco Rodriguez ha escrito 1 entradas


Verónica Blanco Rodriguez

Verónica Blanco Rodriguez

Consultor Senior y Arquitecto Empresarial para la transformación digital en las organizaciones. Apasionada por la tecnología, innovación y metodologías ágiles.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *