Este artículo es el primero de una serie sobre la comprensión de la Esclerosis Múltiple Angular. Los dos primeros artículos proporcionarán una visión general de AngularJS, cómo encaja en el desarrollo de la Web, y el diseño general de la biblioteca. Después de eso, profundizaremos en los diversos aspectos del desarrollo con AngularJS, incluyendo información detallada sobre la arquitectura de la biblioteca.
Desarrollo de la web
Para entender y aprender completamente la AngularJS, es importante primero echar un vistazo al desarrollo de la Web y cómo ha evolucionado en las últimas dos décadas. Durante este tiempo, pasamos de crear páginas con marcas e hipervínculos a construir aplicaciones totalmente interactivas y ricas en el navegador. Existen tres herramientas principales como base de esa plataforma de desarrollo Web en el cliente, incluyendo HTML, JavaScript y CSS. Aunque estos tres componentes siguen siendo la piedra angular del desarrollo de la Web, se han construido muchos nuevos marcos y bibliotecas sobre ellos para simplificar las cosas (o para cumplir con requisitos difíciles).
Pero volvamos a las herramientas principales por un momento.
El HTML, por supuesto, proporciona el marcado semántico del contenido de una página. HTML 5 ofrece varios nuevos tags enfocados principalmente en la estructura semántica de un documento, incluyendo el artículo, la sección y el pie de página, sólo por nombrar algunos. A lo largo de los años los desarrolladores se han alejado del marcado HTML para proporcionar una estructura visual o de diseño, y ahora confían más en el CSS para definir estas cosas. El CSS no sólo define atributos visuales como el tamaño de la fuente, los colores y la visibilidad, sino también el tamaño y la alineación de los elementos de la página. A medida que CSS evolucionó, añadió características más avanzadas como las transformaciones, que añaden un nivel de interactividad a través del lenguaje declarativo. CSS también es un componente importante para hacer que los sitios web respondan, de modo que puedan renderizarse en varios dispositivos y resoluciones de pantalla.
Y luego está el JavaScript, que nos ha permitido construir aplicaciones en el navegador. JavaScript nos permite tomar el marcado semántico, junto con los estilos aplicados a través de CSS, y hacerlos más dinámicos en el navegador, en lugar de usar recursos estáticos que se descargan una vez y se aplican. JavaScript nos permite interactuar con el Modelo de Objeto de Documento (DOM) para cambiar el árbol HTML o los datos de la página. Por ejemplo, una página puede cargar datos del servidor utilizando otra solicitud HTTP iniciada a través de JavaScript y puede entonces cambiar los datos de la página añadiendo o reemplazando los datos HTML existentes. Esto hace que las páginas sean más receptivas y reduce las recargas de página completa en el navegador.
También puedes usar JavaScript para cambiar los estilos CSS aplicados a un determinado objeto o conjunto de objetos de una página. Esto permite que la página responda a las entradas del usuario y cambie el diseño o los estilos. Por ejemplo, un gran conjunto de datos puede presentarse con títulos y detalles, pero con un único detalle visible a la vez. A medida que el usuario hace clic en otro título, los detalles de ese título se hacen visibles mientras que otros detalles se ocultan.
No se puede negar que la combinación de HTML, CSS y JavaScript ha permitido la construcción de algunas interfaces sorprendentes. Sin embargo, los requisitos avanzados en una aplicación pueden dar lugar a la necesidad de escribir un JavaScript más avanzado o complejo. Además, debido a que JavaScript no es un lenguaje compilado, la reutilización de los scripts a menudo se convierte en un ejercicio de desarrollo de copiar y pegar. Por esta y otras razones, los desarrolladores crearon marcos de trabajo o bibliotecas de funcionalidad encapsulada para ser utilizadas en las aplicaciones. Estas bibliotecas suelen facilitar el desarrollo de interacciones más complejas entre los tres pilares básicos del desarrollo de la Web.
Marcos y bibliotecas
Los marcos proporcionan un conjunto de construcciones para construir su aplicación, mientras que las bibliotecas son conjuntos de funcionalidades útiles encapsuladas en uno o más archivos de JavaScript, y no hay escasez de ninguno de los dos. jQuery, por ejemplo, es una biblioteca popular que puede utilizar en toda la lógica de su aplicación para manipular la estructura de la página o cambiar el estilo y la disposición de los elementos. AngularJS y Twitter Bootstrap son ejemplos de marcos de trabajo utilizados para construir una aplicación. Cuando eliges un marco de trabajo, éste normalmente dirige alguna parte del diseño de la aplicación porque ciertas cosas necesitan estar en su lugar para que el marco de trabajo funcione correctamente.
Mantenerse al día con todas las nuevas bibliotecas es difícil y no es necesario para todos. A medida que las bibliotecas y los marcos de trabajo se presentan a la comunidad, los desarrolladores con una clara necesidad de esa funcionalidad utilizarán y probarán las nuevas soluciones. Después de los ciclos de retroalimentación y de varias versiones, las soluciones más viables llegarán a la cima, se presentarán en conferencias y en blogs, y se darán a conocer como herramientas de confianza. El mencionado jQuery, creado por John Resig, es un gran ejemplo de ello. Comenzó como una biblioteca ligera para simplificar la modificación del DOM, que es la representación de la estructura HTML de una página web.
Mientras los desarrolladores se esforzaban por crear aplicaciones que funcionaran en todos los navegadores utilizando las diversas API disponibles, Resig creó jQuery como una forma de simplificar la selección de elementos DOM. Lo hizo utilizando la misma sintaxis de selección que se encuentra en CSS. Una vez seleccionados, los elementos podían ser fácilmente manipulados, tener manejadores de eventos adjuntos, o ser eliminados completamente del documento. A medida que los desarrolladores probaron esto en sus aplicaciones y dieron retroalimentación, la biblioteca mejoró y ahora es una opción por defecto en muchas aplicaciones. De hecho, muchas otras bibliotecas y marcos de trabajo ahora dependen de jQuery en lugar de reescribir la funcionalidad que proporciona.
Aplicaciones de una sola página
A medida que se construían más aplicaciones con las tecnologías de la Web, aumentaban las demandas de los usuarios. Un requerimiento común hoy en día es que una aplicación sea sensible. Esto puede significar que se adapte a diferentes tamaños y resoluciones de pantalla o que responda rápidamente a las entradas del usuario sin recargar una página entera. La primera se logra generalmente con CSS y marcos como Bootstrap que se centran en diseños CSS que se ajustan en función del tamaño de la pantalla. El segundo se logra utilizando una serie de técnicas para responder a las entradas del usuario y manipulando el DOM para cambiar sólo las partes de la página que necesitan ser actualizadas, dejando las que no (como los elementos de navegación y las barras laterales). No es sorprendente que haya desafíos asociados con esto.
Tomemos el marcador, por ejemplo; si un usuario navega a una página, entonces el contenido cambia, añadir un marcador generalmente crea un puntero al contenido original. Esto no crea exactamente una experiencia de usuario ideal. La recuperación de datos del servidor, aunque no es increíblemente difícil, requiere el uso del objeto XmlHttpRequest que se proporciona en los navegadores web modernos. El modelo utilizado para recuperar los datos requiere una serie de llamadas y la comprobación de los códigos de estado, así como la gestión del análisis sintáctico o el procesamiento de los datos de respuesta para obtener un formato utilizable.
Por supuesto, puede superar estos desafíos con una codificación diligente, encapsulación y utilizando los estándares actuales de la Web. Para tener una experiencia consistente a través de sus aplicaciones, podría envolver esta funcionalidad en un conjunto de archivos JavaScript que pueden ser incluidos en sus aplicaciones Web. Sin embargo, una vez que hayas abordado todos estos desafíos, habrás creado tu propio marco de trabajo en lugar de usar uno ya existente.
Este tipo de aplicación (en la que el contenido de la página se carga dinámicamente) se denomina comúnmente aplicación de página única (SPA) porque la lógica de la aplicación y la interacción se producen en una sola página, con nuevos datos y contenidos cargados dinámicamente. Ahora hay varios marcos de aplicación que intentan simplificar el proceso de construcción de aplicaciones de una sola página con características alrededor del enrutamiento, la vinculación de datos, la plantilla del lado del cliente y los envoltorios AJAX (Asynchronous JavaScript And XML) para el acceso a los datos – y todo esto, finalmente, nos lleva a AngularJS.
AngularJS
Como marco para la construcción de aplicaciones de una sola página, AngularJS proporciona un conjunto de funcionalidades para reducir enormemente la cantidad de código escrito y el esfuerzo que implica hacer funcional una aplicación. Prescribe ciertos aspectos del diseño de la aplicación como un compromiso de las características que proporciona. AngularJS también se describe como un marco o arquitectura de Modelo-Vista-Controlador (MVC) porque toma un enfoque modular para construir sus aplicaciones. Cada vista se define en HTML que tiene un módulo controlador de JavaScript y un modelo que impulsa la interacción. Aún mejor, AngularJS ha existido lo suficiente como para haber sido probado en grandes aplicaciones y ha pasado por varias revisiones.
AngularJS se compone de uno o más archivos de JavaScript, dependiendo de la funcionalidad que su aplicación aproveche. En lugar de un archivo JavaScript hinchado que se agrega a todas sus aplicaciones, hay un archivo central que incluye las principales características del marco y archivos o módulos adicionales que puede agregar a la capa de funcionalidad adicional en el marco central. Por ejemplo, hay un módulo de recursos que proporciona una envoltura alrededor de un servicio HTTP central para interactuar con las API de RESTful. No se añade el archivo Javascript para el módulo de recursos a su aplicación si no lo está utilizando.
AngularJS, y los diversos módulos, pueden ser añadidos a una aplicación usando un gestor de paquetes como NPM, Bower o NuGet, por nombrar algunos. Todos los gestores de paquetes proporcionan paquetes individuales para el núcleo y los módulos adicionales, y todas las aplicaciones requieren la instalación del módulo central con módulos opcionales como Route o Resource añadidos según sea necesario.
Plantillas
Cuando los datos se presentan dinámicamente en una página, a menudo se obtienen como un flujo de JavaScript Object Notation (JSON) o XML. Esos datos necesitan ser renderizados en HTML para ser presentados en el navegador. En lugar de crear dinámicamente el marcado HTML en JavaScript a mano, las plantillas permiten definir el marcado con marcadores de posición para los datos que se presentarán. Esto es útil y funciona mejor en casos sencillos, y más aún en casos en los que los datos repetidos se presentarán con el mismo marcado HTML y los cambios sólo en los elementos de datos presentados.
Las plantillas pueden definirse de varias maneras, pero es común definir cada una en su propio archivo HTML desplegado con la aplicación. Cada archivo de plantilla incluye el fragmento HTML que define la plantilla para la vista. Esto permite que las vistas de la aplicación, a pesar de estar incluidas en una sola página, puedan ser administradas y consideradas por separado. Otro aspecto importante de las plantillas es la flexibilidad. Las plantillas AngularJS pueden incluir marcas conocidas como filtros, que proporcionan una funcionalidad útil como el formato de la moneda, los números y los datos de fecha/hora, permitiendo el uso de una única plantilla en todas las culturas y regiones.
Vinculación de datos
Estrechamente relacionada con las plantillas está la noción de vincular los datos, en forma de objetos de JavaScript, a los elementos HTML de la página. La vinculación se puede utilizar con fines de visualización al recuperar y mostrar los datos al usuario. Pero AngularJS soporta la vinculación de dos vías, lo que significa que los elementos de entrada en los formularios HTML también pueden ser vinculados a esos objetos JavaScript.
Tener un sistema de vinculación de datos significa que los desarrolladores de aplicaciones no tienen que escribir manualmente mucho código de infraestructura para leer o establecer valores en los elementos HTML. Esta separación de preocupaciones significa que para cambiar un valor en la pantalla, el código simplemente necesita actualizar el objeto JavaScript y los cambios se reflejarán en la interfaz HTML. De la misma manera, cuando se responde a un evento de entrada de usuario como el clic de un botón, el desarrollador puede recuperar los valores directamente del objeto JavaScript en lugar de tener que atravesar el DOM para leer los valores de los elementos HTML.
El modelo de unión de datos en AngularJS es simple y poderoso. La mayor parte del modelo de vinculación involucra declaraciones en las plantillas HTML que permiten a AngularJS mantener los elementos DOM y los objetos JavaScript sincronizados. En algunos escenarios puede ser necesario ayudar a AngularJS a actualizarse, pero la mayoría de las veces se maneja por ti.
Enrutamiento
Como se mencionó anteriormente, la administración de la URL de un recurso (para permitir la navegación dentro de una aplicación de una sola página, y apoyar la vinculación y el marcaje a diferentes vistas) puede ser un desafío. El módulo de enrutamiento aprovecha las características de anclaje e hipervínculo HTML para crear URLs únicos para las distintas vistas de la aplicación. Por ejemplo, los siguientes dos URL apuntan a la misma página, pero a un ancla diferente en esa página:
http://yourdomain/SinglePageApp#Customers
http://yourdomain/SinglePageApp#CustomerDetails
Esto significa que los usuarios pueden marcar su lugar en la aplicación y volver a la vista específica en lugar de la vista predeterminada en su aplicación. Además, el módulo de enrutamiento le permite manejar parámetros de enrutamiento tales como un ID para identificar a un cliente.
Promesas
Una gran parte de la construcción de aplicaciones de respuesta que funcionan a través de las redes es la programación asíncrona. La programación asíncrona utiliza hilos adicionales para procesar el trabajo de mayor duración sin detener la actualización de la interfaz de usuario. Las promesas se han convertido en el modelo de facto para la gestión del trabajo asíncrono y AngularJS proporciona un modelo de promesa basado en la popular biblioteca Q pero centrado sólo en las características principales. Este servicio se utiliza en todo el AngularJS y proporciona una interfaz simplificada para los desarrolladores que trabajan con operaciones asíncronas en sus aplicaciones Angular.
HTTP / AJAX
El acceso a los datos a través de HTTP es un requisito común en las aplicaciones de una sola página. El objeto XMLHttpRequest puede ser usado directamente en código JavaScript, sin embargo, es comúnmente envuelto para reducir la codificación. En AngularJS el servicio HTTP envuelve el objeto XmlHttpRequest para proveer funciones simples (como get, post y put) que usan el modelo de promesa para proveer respuestas asincrónicas o errores. El servicio HTTP de AngularJS también proporciona una funcionalidad más avanzada que nos permite proporcionar funciones para transformar y/o interceptar la solicitud o respuesta para permitir la manipulación de la configuración o el contenido. Esto permite manejar asuntos transversales como el manejo de errores y la autenticación.
Recurso
Siguiendo un patrón común de estratificación de abstracciones, AngularJS proporciona el módulo de recursos que ofrece una interfaz mecanografiada a través del servicio HTTP para RESTful Web APIs. El uso de este módulo le permite enfocarse en los recursos de su RESTful API y extiende los objetos con funciones como Query, Save y Delete. Al igual que el servicio HTTP, el servicio Resource puede ampliarse con métodos personalizados y aprovechar las transformaciones e interceptores.
Otras características
La lista anterior es un conjunto común de características utilizadas en la mayoría de las aplicaciones, pero AngularJS tiene otras características y servicios también. Los módulos adicionales, instalados desde su propio archivo JavaScript e incluidos por separado, incluyen soporte de animación, soporte de tacto en dispositivos móviles, mensajería común de UI (errores y alertas, por ejemplo) y trabajo con cookies. Estos módulos adicionales pueden ser agregados según sea necesario y cada uno simplifica el proceso de desarrollo relacionado en su aplicación AngularJS.
Prueba de la unidad
AngularJS fue concebido y construido para ser altamente comprobable. Incluye un módulo de burla y soporte para burlar cosas como el servicio HTTP en sus pruebas de unidad. Debido a que AngularJS aprovecha fuertemente la inyección de dependencia en el tiempo de ejecución, los diversos componentes pueden ser más fácilmente probados con implementaciones de burla para cualquier dependencia.
Para llevar
Ahora tienes una visión general de AngularJS y de dónde encaja en el mundo del desarrollo de la Web y de las aplicaciones de una sola página. Usted sabe que AngularJS proporciona un marco para simplificar y acelerar el desarrollo de aplicaciones de una sola página, abordando muchos desafíos comunes. El próximo artículo de la serie examinará la arquitectura general de las aplicaciones de AngularJS y cómo el modelo MVC se utiliza para construir su aplicación. Después de eso, profundizaremos en los artículos que se sumergen en los diversos componentes de las aplicaciones de AngularJS como controladores, modelos, vistas, servicios, filtros y directivas.
Para más de los pros, contras y características de Angular, mira nuestro post «Angular 101». O mira esta guía sobre cómo empezar con el AngularJS.