Angular 5, la evolución sigue

Si bien la nueva versión de Angular había sido planeada para ser liberada el pasado 23 de octubre de 2017; eso no sucedió, pero no te preocupes hoy se acaba de liberar el Release Candidate #7 por lo que es muy probable que en muy próximos días Angular 5 ya esté con nosotros. Finalmente tenemos versión 5.0 estable y lista para ser usada.

En este último release se han corregido algunos issues menores, es decir, ya nada crítico está siendo arreglado en estos momentos.

¿Qué esperar en la versión 5?

Optimización en los bundles

Al parecer se acabaron los tiempos donde teníamos bundles de más de 500 Kb para aplicaciones sencillas; eso nos llena de alegría, ya que una de las mayores limitantes (hasta la versión 4) era que nuestros archivos generados eran aún pesados, incluso para aplicaciones con muy pocos componentes.

Ahead Of Time Compilation por defecto para la Angular CLI

Oh sí, mi buen amigo, finalmente ya tendremos AoT desde el inicio cuando se crean proyectos que usen la CLI de Angular. Esto es definitivamente algo excelente, ya que nos olvidaremos de estar pasando flags extraños al estar creando nuestra aplicación para producción.

Mejor Desempeño para Event Listeners

Se han aplicado algunas mejoras en la forma en cómo se registran eventos, como el documentado en este pull request.

¿Progressive Web Apps con Angular? Por supuesto que sí

En la versión 2 y 4, no existían mecanismos completos y bien documentados sobre la creación de Aplicaciones Web Progresivas, ¿y qué crees? en la versión 5, el equipo detrás de este genial framework ha puesto especial énfasis en este tema que cada vez toma más relevancia en todos los frameworks modernos. Angular no se quedará atrás y por supuesto que ya se está trabajando en hacer este tipo de aplicaciones mucho más robustas usando mecanismos de caché en el browser y otras mejorar que ya platicaremos más adelante.

Componentes de Material Design Listos para Server-side Rendering

Esto quizá es de las cosas que personalmente más espero, ya que actualmente Angular está muy “joven” en cuanto server-side rendering, incluso con la adopción de Angular Universal por parte de Google, la verdad es que nos nos han brindado una forma estable y potente para este tema, que es el motivo por el que muchos desarrolladores e ingenieros de software han descartado Angular para aplicaciones donde el SEO sea vital.

Tengo mis reservas en este tema, quisiera probar si realmente estos componentes funcionarán como es debido. Esperemos que sí.

¿Qué sigue?

  • Evidentemente, ya estamos ansiosos por probar la versión estable de Angular 5, así que tan pronto como se libere, estaremos probando todo lo nuevo en el día cero.
  • Angular 6 se empezará a cocinar tan pronto como la 5 sea estable ¿qué? sí recuerda que Angular adoptó el sistema SEMVER con lo cual se ha prometido tener nuevas versiones de Angular cada 6 meses; eso quiere decir que más o menos entre marzo y abril del próximo año tendremos Angular 6…

¿Tendremos un Curso Profesional de Angular 5 en Webtraining.Zone?

Por supuesto que sí, tan pronto como tengamos versión estable, estaremos creando un proyecto completamente desde cero para que puedas aprender todo lo nuevo.

Ya tenemos fecha y hora: 18 de Noviembre 2017 en punto de las 10 AM (Hora México Centro).

Inscríbete ahora al Curso Profesional de Angular 5 con Material Design: https://webtraining.zone/cursos/curso-profesional-de-angular-5-con-material-design
Nos vemos en ese curso, mientras tanto coméntame ¿qué opinas de Angular? ¿has tenido oportunidad de explorarlo?

Tu amigo Alex Arriaga

Angular vs Vue.js ¿qué framework me conviene aprender?

Hoy por hoy la cantidad de opciones entre las que podemos elegir para crear aplicaciones de front-end ha crecido exponencialmente; todos los días hay nuevas ideas, nuevas herramientas y metodologías y con ello llega el gran reto de poder distinguir bajo que circunstancias o casos de uso una es mejor que la otra.

En este artículo te platicaré un poco de mi experiencia personal con dos de los mejores frameworks (en mi opinión) que tenemos a la mano; asimismo te dejo un video de un curso rápido que tuvimos donde comparamos ambos frameworks.

Aclaro que este artículo NO se enfoca en cuestiones de performance, sino que trata de ser un punto de vista más general.

¿Por qué no incluí a React?

Porque hasta ahora no he tenido la oportunidad de trabajar con él a nivel profesional.

Angular

Creado por Google, como evolución de AngularJS. Es un framework muy robusto para creación de Single Page Applications, provee todo lo necesario para crear aplicaciones de cualquier tamaño. La comunidad alrededor de Angular es muy dinámica por lo que todos los días se generan nuevos módulos para las versiones más recientes.

Sitio oficial: https://angular.io/

¿Te gustaría aprender Angular desde cero?

Checa este Curso Profesional de Angular que tenemos en Webtraining.Zone

Ventajas

  • Preparado para cualquier tipo de aplicaciones
  • Excelente documentación técnica
  • Un buen número de módulos creados por la comunidad
  • Sugiere muy buenas convenciones para nombrar tus archivos, componentes, módulos y servicios
  • Hace uso extensivo de un stack moderno que incluye: TypeScript y Webpack.
  • Posee una Command Line Interface: Angular CLI que permite generar código boilerplate muy rápidamente
  • Preparado para lazy loading
  • Provee un modo producción y un modo desarrollo
  • Listo para Ahead of Time Compilation
  • Angular es MUY bien pagado en el mundo front-end empresarial

Desventajas

  • Angular es un framework complejo, por lo que la curva de aprendizaje puede ser alta dependiendo de tu experiencia previa
  • Es necesario aprender TypeScript, que aunque es un super set de JavaScript, agrega nuevas cosas como por ejemplo los tipos, las interfaces, los modificadores de acceso, etc. que pueden parecerte no naturales al principio (sobretodo si vienes del mundo de JavaScript 100%)
  • Es forzoso utilizar un proceso que incluya un bundler y module loader (como Webpack o Rollup.js)

Vue.js

Creado Evan You, es considerado un framework progresivo, es decir, es un framework que puede irse haciendo tan robusto como se necesite; ya que puede ir desde la simple inclusión de éste como una biblioteca JavaScript regular que sólo crea pequeños widgets, hasta un framework muy potente para crear aplicaciones completas.

Sitio oficial: https://vuejs.org/

Ventajas

  • No necesitas aprender algo nuevo, ya que se puede usar con ES5 o incluso con ES2015 si así lo deseas.
  • Puedes usarlo directamente en tu sitio web sin necesidad de tener un complejo sistema de empaquetado (es decir, no necesita Webpack para trabajar en su formato más simple).
  • Es un framework muy ligero
  • La curva de aprendizaje es muy amigable
  • Tiene una documentación muy “digerible” (se lee y comprende muy bien)

Desventajas

  • Mantenido por un pequeño grupo de personas, lo cual podría suponer un riesgo menor ya que la comunidad alrededor de Vue.js es muy grande (no te preocupes, puedes usarlo)
  • Vue.js te da mucha libertad, lo que para un desarrollador poco experimentado puede resultar peligroso cuando se trate de aplicaciones muy grandes
  • En general he visto que el salario ofrecido para un desarrollador de Vue.js es menor al de un desarrollador de Angular

¿Qué opinas? ¿cómo te ha ido con alguno de estos frameworks? ¿qué tipo de aplicaciones has hecho? ¿crees que sea bueno tener tantas opciones para elegir?

 

Compartiendo información entre componentes con ReactiveX en Angular 4

El problema

Una de las ventajas de usar Angular llega a ser a su vez un lío al momento de compartir información entre componentes no relacionados, es decir para pasar datos de un componente padre a un componente hijo tenemos el famoso @Input y para compartir información de un hijo a un padre podemos usar un @Output que al final del día es un EventEmitter. Pero, ¿qué sucede cuando queremos usar la información de un componente que no está relacionado directamente? Esto es útil cuando nuestros datos (variable data) se encuentren en algún componente, pero nosotros requerimos esa información en un componente muy inferior o que no tiene relación directa. Podríamos tener una cadena de @Input tras @Input hasta llegar al componente que requiere la información, pero esto sólo funcionaría si estos componentes estuvieran en forma de cascada uno dentro de otro como podemos ver en esta ilustración:

 

Pero además de que en algún momento ese código podría ser poco sostenible, tenemos el problema de que al usar estos inputs en ocasiones no se lleva a cabo de manera correcta el change detection de Angular, por lo que podríamos tener que llenar nuestra aplicación de timeouts y eso no es correcto (o Zones que dan un mecanismo más avanzado para este tipo de situaciones).

La solución

Hoy vamos a usar un operador que nos provee la librería de ReactiveX, que junto con Angular nos facilita mucho el poder compartir información entre componentes.

En este ejemplo compartiremos un arreglo de números.

Lo primero que vamos a hacer es crear un servicio e importar el operador BehaviorSubject.

import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';

@Injectable()
export class SharingDataService {
data: Array<any> = [];

y creamos una variable la cual será nuestra manera de comunicarnos con los demás componentes o servicios que requieran la información.

Primero asignados a una variable un new BehaviorSubject<>() para posteriormente asignar esta variable como un Observable.

public _dataSource = new BehaviorSubject<Array<any>>([]);
dataSource$ = this._dataSource.asObservable();

La variable _dataSource la usaremos para poder indicarle a todos los elementos suscritos a nuestro observable que tenemos información y nuestra otra variable dataSource$ será con la cual nosotros podremos suscribirnos a la información.

pongamos un ejemplo

Ahora cómo podemos hacer que el componente principal transmita la información a los demás? pues crearemos una función para esto dentro de nuestro servicio, algo como esto:

public setData(data:Array<any>){
   this.data = data;
   this._dataSource.next(data);
}

Podemos ver que estamos usando la variable _dataSource que es nuestro BehaviorSubject con un .next esto lo que nos permite es alertar a todos los suscriptores que esperan por información pasando como parámetro la información que queremos transmitir.

Ahora viene la otra parte, ¿como consumo la información que el BehaviorSubject está transmitiendo? bueno para esto dentro de nuestro componente importamos otro operador de ReactiveX llamado ‘Subscription’ y el servicio que creamos antes.

import {Subscription} from "rxjs/Subscription";
import {SharingDataService} from "./sharingDataService";

y declaramos nuestra variable del mismo tipo, y nuestro servicio en el constructor:

dataSubscription: Subscription;
data: Array<number>

constructor(public _sharingDataService:SharingDataService){
}

y dentro de nuestro ngOnInit realizamos la suscripción a la variable a la cual asignamos el BehaviorSubject como Observable.

public ngOnInit() {
    this.dataSubscription = this._sharingDataService.dataSource$
    .subscribe(data => {
        this.data = data;
     });
}

y con esto nuestros componentes podrán compartir la información con cualquier otro componente o servicio que este suscrito a nuestro BehaviorSubject.

solo no olvides desuscribirte cuando destruyas el componente ya que consumiría recursos y no los estaríamos usando.

public ngOnDestroy(): void {
    this.dataSubscription.unsubscribe();
}