Frameworks

Hoy quiero hablaros un poco sobre Angular. Si no lo conoces o no has oído hablar de ello Angular es uno de los framework de desarrollo JavaScript más potentes y populares en la actualidad. Aunque estoy seguro que si eres desarrollador web ya habrás trabajado con él en algún proyecto o estás muy cerca de hacerlo. La razón es porque Angular responde a resolver los problemas a todos aquellos desarrolladores que quieran un desarrollo que consolide JavaScript, HTML y CSS con comodidad permitiendo ensamblar aplicaciones de una forma intuitiva en una sola página (SPA) como ninguna otra.

Dicho esto, aclarar que si con Angular ya vas por el framework número 200 de tu carrera profesional; todos sabemos lo cambiante que es el sector en cuanto a nuevas tecnologías y tendencias, la necesidad de actualizarse continuamente y lo fácil que es quedar quemado; Angular no viene a reinventar la rueda, pero sí para poner las cosas mucho más fáciles a todos y solo por esto merece una oportunidad en nuestros “corazones de silicio”.

Angular es un framework MVC (Modelo Vista Controlador), desarrollado por Google para el Desarrollo Web Front End que permite crear aplicaciones SPA (Single-Page Applications) sin despeinarnos. su principal competidor es React, del que ya hablaremos en otro artículo, y cómo no puede ser de otro modo usa un patrón MVVM (model view view-model) en el que separamos la lógica de la de diseño pero mantenemos ambas partes conectadas (data binding) de manera que mantenemos el control sobre la capa visual DOM (el cuerpo de la web) y actualizar su contenido como queramos.

Características y ventajas de usar Angular

• Angular extiende HTML añadiendo funcionalidad y permitiendo crear plantillas dinámicas poderosas. Permite generar componentes reusables abstrayendo toda la lógica de manipulación del DOM de modo que cualquier actualización en su modelo se reflejará inmediatamente en la vista, sin necesidad de ningún tipo de manipulación DOM o el control de eventos (por ejemplo, con jQuery). Además, Angular implementa de modo nativo el binding de datos de dos vías, conectando lo que se ve en tu HTML (vistas) a los objetos creados en JavaScript (modelos) sin problemas. Pero además:

• Puedes usar TypeScript pero no es obligatorio: Esta es una característica interesante. Si eres un programador Java con experiencia puedes seguir programando como hasta ahora o te guste más trabajar usando ECMAScript, aunque eso sí, lo recomendable es que escribas tu código usando TypeScript. La razón es que si formas parte de un equipo de desarrolladores y se utilizan diferentes normas para declarar nuestro código esto puede generar problemas de inconsistencia a medio o largo plazo. Al usar TypeScript no tenemos este problema. TypeScript evita la confusión y ofrece un mantenimiento más fácil de las aplicaciones.

• Sin complicaciones y con muchas opciones: Angular es un framework que incluye una gran cantidad de opciones y funcionalidades de serie que normalmente las bibliotecas no incluyen. Esto hace que desarrollar nuestro proyecto con Angular suponga un importante ahorro de recursos y costes añadidos.

• Código reutilizable: Angular adopta el estándar de componentes web. Mediante un conjunto de APIs podemos generar etiquetas HTML personalizadas y reutilizar nuestro código.

• Es opensource: No vamos a profundizar mucho sobre sus bondades pero en la actualidad el código abierto es clave en la nueva economía digital. Gracias al software de fuentes abiertas es posible que otras personas aprendan a partir de nuestro código, aporten soluciones o desarrollen las suyas a partir de las aportaciones de otros. Resulta muy fácil encontrar respuestas a nuestras consultas y si todavía nos quedan dudas podemos consultar la excelente documentación disponible.

“Hola Mundo” con Angular

La mejor manera de ver el poder de una aplicación Angular es crear su primer programa básico “Hello World”. Una forma sencilla de familiarizarnos con este Framework mientras vamos aprendiendo sus fundamentos.

La instalación de Angular es sencilla . En principio es suficiente con instalar la herramienta de Angular Cli a través de npm. Node Package Manager (NPM) es también una herramienta de línea de comandos que tiene como objetivo el facilitar el proceso de instalación, actualización o desinstalación de paquetes en nuestra aplicación.

npm install --g @angular/cli

Así instalaremos la herramienta a nivel global. Una vez instalada ya podemos hacer uso de ella y construir un nuevo proyecto desde la línea de comandos.

ng new holamundo

Se trata de un comando muy sencillo de ejecutar y que se encarga de crear nuestro proyecto de inicio. El gran problema que existe con Angular es que el proyecto de inicio contiene “muchos ficheros” pero el que nos interesa para este ejemplo es el fichero principal o index.html. Este es el fichero de entrada a la aplicación y contiene muy poco código. El código más importante que contiene está ubicado en el body. Para este ejemplo no vamos a enumerar para qué sirve cada fichero generado, pero para más información en este Taller “Organízate con Angular” o en Taller “Estructuración de un proyecto en Angular” encontrarás muy buenas referencias.

Ahí podemos localizar la etiqueta "app-root". Esta etiqueta es la encarga de definir el componente principal de Angular.

Ahora vamos al fichero app.component.ts en donde Angular enlaza la etiqueta "app-root" con el nombre del componente. Deberíamos poder ver algo como lo que sigue:

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}

Ahora nos vamos al fichero main.ts. Este fichero es el encargado de definir qué módulo es el de arranque.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

Podemos ver como solicita que se cargue AppModule. El fichero de app.module.ts se encuentra en la carpeta src.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [**AppComponent**]
})
export class AppModule { }

Como podemos ver es este fichero el que a través de la propiedad de Bootstrap nos indica qué componente es el de arranque en este caso AppComponent.

Ya únicamente nos queda arrancar nuestra aplicación de Angular “Hello world”. Para ello vamos a modificar el contenido del fichero app.component.html y dejar únicamente el mensaje de “hola angular”. Desde la línea de comandos ejecutamos ng serve. Angular arrancará el servidor y veremos nuestro primer componente cargado.

Si quieres profundizar un poco más te recomiendo el siguiente Curso de Angular para principiantes que puedes encontrar aquí en OpenWebinars

Versiones de Angular

Todavía es frecuente la confusión que existe entre los números de versiones de Angular. Para atajar esto podemos resumirlo en que, en 2010, cuando Angular fue presentado, su primera versión fue bautizada como AngularJS. Pronto se hizo muy popular y a partir de ese momento comenzó a llamarse Angular, para abreviar, pero más tarde comenzaría la confusión que todavía hoy existe entre Angular y AngularJS.

Lo que ocurrió fue muy simple. Cuando se presentó Angular 2 esto trajo consigo que prácticamente la totalidad del código fue reescrito desde cero en TypeScript poniendo el foco sobre el desarrollo en dispositivos móviles y dotándolo de un gran número de herramientas. El objetivo era que los desarrolladores pudieran desarrollar de una manera mucho más eficiente con un código más estructurado, modular y reutilizable. Esto hizo que AngularJS evolucionara hasta convertirse en un Framework de facto.

Es decir, a partir de ese momento, ambas versiones comenzaron a seguir caminos diferentes, pero con Angular aunque existan cambios bruscos de versión esto no significa que nuestras aplicaciones queden inservibles y deban ser actualizadas. El mismo Angular-cli ofrece herramientas de migración y verificación de compatibilidad entre versiones.

Dicho esto, vamos a enumerar alguna de las diferencias:

• Angular no proporciona la característica de usar un $scope debido a que usa una arquitectura basada en la jerarquía de componentes.

• Angular adopta el cambio de enfoque de MVC (Modelo-Vista-Controlador) al uso de componentes y directivas junto a las plantillas.

• El cambio de lenguaje de programación de JavaScript en AngularJS a Typescript ECMAScript 6 (ES6) en Angular hace que sea un proyecto más robusto, aunque existe la posibilidad de usar Dart o Typescript ES5.

• El cambio en la estructura supone un cambio importante debido a que es más fácil de crear y mantener grandes proyectos por su modularidad.

• Se puede generar mayor rendimiento con menos código y una mayor compresión al usar el modo AOT (Ahead-of-Time) o “antes de tiempo”, el cual convierte el código en un JavaScript eficiente y más compatible con los navegadores

• Angular utiliza “()” para el enlace de eventos y “[]” para el enlace de propiedades.

Conclusión

 

Angular sigue evolucionando y se posiciona cada vez más como uno de los lenguajes más demandados por las empresas. Además de que gran parte del código ya te suena si tienes cierta experiencia previa. Quizá de lo dicho antes estés tentado en usar AngularJS en lugar de Angular, existen muy buenos cursos al respecto para sacar provecho de las ventajas de desarrollar en AngularJS. Como por ejemplo este Curso de AngularJS profesional

 

En resumen, si deseas crear un proyecto pequeño, AngularJS puede ajustarse a lo que buscas, pero si lo que necesitas es crear una aplicación compleja. Entonces mi recomendación es dar el salto a versiones superiores de Angular.