Angular: En marcha

Capítulo 1. Presentación de Angular

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Nuestras expectativas sobre lo que podemos hacer en la web (y por web me refiero tanto al escritorio como a la web móvil) han aumentado hasta el punto de que lo que antes eran aplicaciones nativas de escritorio completas se ejecutan en el navegador. Las aplicaciones web se parecen ahora a las aplicaciones nativas de escritorio en alcance y complejidad, lo que también supone una complejidad añadida como desarrollador.

Además, las aplicaciones de una sola página (SPA) se han convertido en una opción muy común en la construcción de experiencias frontales, ya que permiten una gran experiencia del cliente en términos de velocidad y capacidad de respuesta. Una vez que la aplicación inicial se ha cargado en el navegador de un cliente, las interacciones posteriores sólo tienen que preocuparse de cargar los datos adicionales necesarios, sin recargar toda la página como era habitual con las páginas renderizadas del lado del servidor del pasado.

AngularJS se inició para, en primer lugar, aportar estructura y coherencia al desarrollo de aplicaciones web de una sola página, al tiempo que proporcionaba una forma de desarrollar rápidamente aplicaciones web escalables y mantenibles. En el tiempo transcurrido desde su lanzamiento, la web y los navegadores han avanzado a pasos agigantados, y algunos de los problemas que AngularJS estaba resolviendo ya no eran tan relevantes.

Angular entonces era básicamente una versión completamente nueva y reescrita del framework, construida para la web de la nueva era. Aprovechaba muchos de los avances más recientes, desde módulos a componentes web, al tiempo que mejoraba las características existentes de AngularJS, como la inyección de dependencias y la creación de plantillas.

Consejo

A partir de ahora, cuando diga AngularJS, me refiero al framework AngularJS original, la versión 1.0. Siempre que mencione Angular, me refiero al framework más reciente, de la 2.0 en adelante. Esto se debe principalmente a que Angular 2.0 en adelante no se predica a sí mismo el uso exclusivo de JavaScript, sino que también admite la escritura de aplicaciones en TypeScript.

Por qué Angular

Angular como framework proporciona algunas ventajas significativas, a la vez que proporciona una estructura común con la que pueden trabajar los desarrolladores de un equipo. Nos permite desarrollar grandes aplicaciones de forma mantenible. Profundizaremos en cada una de ellas con más detalle en los siguientes capítulos:

Componentes personalizados

Angular te permite construir tus propios componentes declarativos que pueden empaquetar la funcionalidad junto con su lógica de representación en piezas del tamaño de un bocado, reutilizables. También funciona bien con componentes web.

Vinculación de datos

Angular te permite mover sin problemas tus datos desde tu código JavaScript central a la vista, y reaccionar a los eventos de la vista sin tener que escribir tú mismo el código de cola.

Inyección de dependencia

Angular te permite escribir servicios modulares, e inyectarlos allí donde se necesiten. Esto mejora enormemente la comprobabilidad y reutilización de los mismos.

Prueba

Las pruebas son ciudadanos de primera clase, y Angular se ha construido desde cero pensando en la comprobabilidad. Puedes (¡y debes!) probar cada parte de tu aplicación.

Completo

Angular es un framework completo, y proporciona soluciones listas para usar para la comunicación con el servidor, el enrutamiento dentro de tu aplicación y mucho más.

Nota

Angular como framework ha adoptado el versionado semántico para todas las nuevas versiones. Además, el equipo central tiene una agresiva hoja de ruta, con una nueva versión principal prevista cada seis meses. Así, lo que empezó como Angular 2 ahora se denomina simplemente Angular, ya que no queremos llamarlos Angular 2, Angular 4, Angular 5, etc.

Dicho esto, a diferencia de AngularJS a Angular, la actualización entre versiones de Angular (digamos de la 2 a la 4, etc.) es un paso incremental, y la mayoría de las veces una actualización casi trivial. Así que no tienes que preocuparte por tener que hacer una actualización importante cada pocos meses con cambios drásticos en el código.

Lo que este libro no trata

Aunque Angular como framework es bastante grande, la comunidad que lo rodea es aún mayor. De hecho, muchas de las grandes funciones y opciones de uso de Angular proceden de esta comunidad. Esto hace que, como autor, me resulte más difícil averiguar cómo escribir un libro que te prepare a ti, el lector, como desarrollador de Angular, sin dejar de limitar el alcance a lo que creo que es lo esencial.

En este sentido, aunque Angular puede ampliarse de muchas formas, desde escribir aplicaciones móviles nativas utilizando Angular (ver NativeScript), renderizar tu aplicación Angular en el servidor (ver Angular Universal), utilizar Redux como opción de primera clase en Angular (múltiples opciones; ver ngrx), y muchas más, la versión inicial del libro sólo se centrará en el núcleo de la plataforma Angular y en todas las capacidades que proporciona. También se esforzará por centrarse en los casos más comunes en lugar de cubrir todas y cada una de las funciones y capacidades de Angular, ya que un libro así tendría miles de páginas.

La intención es centrarse en las partes que serán necesarias y útiles para todos los desarrolladores de Angular, en lugar de centrarse en partes que serían útiles para un subconjunto.

Primeros pasos con tu entorno de desarrollo

Angular espera que hagas un buen trabajo previo para poder desarrollar sin problemas en tu ordenador. Es necesario instalar ciertos requisitos previos que cubriremos en esta sección.

Node.js

Aunque nunca codificarás en Node.js, Angular utiliza Node.js como base para gran parte de su entorno de compilación. Por lo tanto, para empezar con Angular, necesitarás tener Node.js instalado en tu entorno. Hay varias formas de instalar Node.js, así que consulta la página de descarga de Node.js para obtener más instrucciones.

Advertencia

En macOS, se sabe que instalar Node.js a través de Homebrew puede causar algunos problemas. Así que intenta instalarlo directamente si tienes algún problema.

Necesitas instalar la versión 6.9.0 o superior de Node.js, y la versión 3.0.0 o superior de npm. Puedes confirmar tus versiones tras la instalación ejecutando los siguientes comandos:

node --version
npm --v

TypeScript

TypeScript añade un conjunto de tipos al código JavaScript que escribimos, permitiéndonos escribir un JavaScript más fácil de entender, razonar y rastrear. Garantiza que las últimas funciones ECMAScript propuestas también estén disponibles en la punta de nuestros dedos. Al final, todo tu código TypeScript se compila en un JavaScript que puede ejecutarse fácilmente en cualquier entorno.

TypeScript no es obligatorio para desarrollar una aplicación Angular, pero es muy recomendable, ya que ofrece algo de azúcar sintáctico, además de facilitar la comprensión y el mantenimiento del código base. En este libro, utilizaremos TypeScript para desarrollar aplicaciones Angular.

TypeScript se instala como un paquete NPM, y por lo tanto se puede instalar simplemente con el siguiente comando:

npm install -g typescript

Asegúrate de instalar al menos la versión 2.4.0 o superior.

Aunque cubriremos la mayoría de las características/conceptos básicos que utilizamos de TypeScript, siempre es una buena idea aprender más de la documentación oficial de TypeScript.

Angular CLI

A diferencia de AngularJS, donde era fácil obtener un archivo como dependencia y estar en marcha, Angular tiene una configuración algo más complicada. Por ello, el equipo de Angular ha creado una herramienta de interfaz de línea de comandos (CLI) para facilitar el arranque y desarrollo de tus aplicaciones Angular.

Como ayuda significativamente a facilitar el proceso de desarrollo, te recomiendo que lo utilices al menos para tus proyectos iniciales, hasta que te familiarices con todas las cosas que hace y te sientas cómodo haciéndolo tú mismo. En este libro, cubriremos tanto el comando CLI como las acciones que realiza por debajo, para que entiendas bien todos los cambios necesarios.

Instalar la última versión (1.7.3 en el momento de escribir este libro) es tan sencillo como ejecutar el siguiente comando:

npm install -g @angular/cli

Consejo

Si te estás rascando la cabeza con esta novedosa convención de nomenclatura para los paquetes de Angular, la nueva sintaxis es una característica de NPM llamada paquetes de ámbito. Permite agrupar paquetes dentro de NPM en una única carpeta. Puedes obtener más información aquí.

Una vez instalado, puedes confirmar si se ha realizado correctamente ejecutando el siguiente comando:

ng --version

Obtener el código base

Todos los ejemplos de este libro, junto con los ejercicios y la solución final, están alojados en un repositorio Git. Aunque no es obligatorio descargarlo, puedes hacerlo si quieres tener una referencia o jugar con los ejemplos de este libro. Puedes hacerlo clonando el repositorio Git ejecutando el siguiente comando:

git clone https://github.com/shyamseshadri/angular-up-and-running.git

Esto creará una carpeta llamada angular-up-and-running en tu directorio de trabajo actual con todos los ejemplos necesarios. Dentro de este directorio encontrarás subcarpetas que contienen los ejemplos, organizados por capítulos.

Conclusión

Llegados a este punto, ya tenemos configurado nuestro entorno de desarrollo y estamos listos para empezar a desarrollar aplicaciones Angular. Hemos instalado Node.js, TypeScript, así como la CLI de Angular y entendemos la necesidad y el uso de cada uno de ellos.

En el próximo capítulo, por fin nos ensuciaremos las manos construyendo nuestra primera aplicación Angular y comprendiendo algunos de los términos y conceptos básicos de Angular.