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();
}