La Comparación de los Campeones: Angular vs Vue

Crear un proyecto

La forma más rápida de poner en marcha un proyecto es utilizando el CLI proporcionada por los autores de los marcos. Ambos vienen con bastante buen servicio, sin embargo, hay algunas diferencias es decir, Vue viene con más opciones, por lo tanto, puede adaptar un proyecto a sus necesidades desde el principio. Puede elegir el Versión Vueya sea que necesites usar routing Typescript, preprocesadores CSS o configurar un linter directamente. Además, le permite decidir si desea configurar pruebas (unidad o E2E).

Angular viene con un generador que le permite crear componentes, servicios, interfaces y directivas directamente desde la consola, lo que, según mi experiencia, es muy útil, ya que no hay necesidad de configurar manualmente carpetas, archivos y redundante código a mano, especialmente cuando se utiliza, por ejemplo, el patrón MVC. Typescript viene de fábrica con Angular y te presiona para que lo utilices. Si aún no lo has hecho, aquí tienes una práctica introducción de por qué deberías probarlo - puedes echarle un vistazo aquí.

Al principio, CLI del Angular sólo le pregunta sobre el enrutamiento o los preprocesadores CSS preferidos que, en comparación con Vueno te deja mucho espacio para decidir sobre la estructura y el estilo de tu aplicación. Pero si vas a seguir la convención que te pide que uses, la CLI te va a guiar todo el camino.

Estructura del proyecto

Vue utiliza SFC (Single File Components), lo que hace que sea bastante sencillo para un nuevo desarrollador empezar a utilizar un framework y encontrar sus pies en el código.

Directivas

Vue también viene de fábrica con directivas como `v-if, v-for`, que son muy intuitivas de usar, ya que son casi una copia de la directiva Angular unos. Vue utiliza la misma convención para la vinculación bidireccional de datos (simplemente anteponiendo el prefijo, es decir, v- en `v-model`) y añadiendo el @/v-on que indica que estamos reaccionando a algo. Angular separa esto indicando en qué dirección vamos utilizando paréntesis para la vinculación de eventos y corchetes para la vinculación de propiedades, es decir, `(change), [ngStyle], [(ngModel)]`.

En VueLa estructura en sí es simple, no hay necesidad de hacer archivos separados para las hojas de estilo y la lógica, por lo que todo está organizado y accesible. Por supuesto, Vue viene con una guía de estilo en la que puedes encontrar reglas recomendadas a seguir a la hora de crear un proyecto; sin embargo, sólo hay unas pocas que sean obligatorias. 

Eventos

En este caso, Vue viene de nuevo con una solución más práctica; a saber, para emitir un evento del componente hijo a su padre todo lo que necesita hacer es (usando Vue 3 Composición API ) toma un método del objeto de contexto en la configuración y simplemente emite lo que necesites en ese momento:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } }

También puede hacerlo directamente en la plantilla como respuesta a algún otro evento.

En Angularprimero debe definir un EventEmitter de la siguiente manera:

@Output() customNameForYourEmitter = new EventEmitter();

A continuación, debe llamar a un método de emisión en el EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Ranuras/proyección de contenidos

En ambos frameworks, se puede mover fácilmente el contenido (tanto simple como múltiple) del componente padre a su hijo simplemente añadiendo html adicional dentro de las etiquetas hijo, con ligeras diferencias:

Vue:

``` 

Angular:

Por defecto:
    

Ranura con nombre:

<p yourname>
   Se trata de una ranura con nombre
  </p>
  <p>Esta es una ranura por defecto</p>

Sin embargo, si quieres renderizar condicionalmente algunas partes de tu aplicación, Vue es más intuitivo que Angular y te permite hacerlo más rápido añadiendo el v-if a su directiva <template> que permite mostrar sólo las partes que se necesitan en ese momento.

Mientras que el ng-content siempre se renderiza, en este caso es necesario utilizar la opción ng-templatey, posteriormente, cree su propia directiva personalizada:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@Directive({
  selector: '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

y por el nombre que das a tu ng-template Angular sabrá lo que se debe mostrar:

Además, dentro del componente, querrá proyectar su plantilla para utilizarla en el componente @ContentChild para obtener la plantilla adecuada:

@ContentChild(CustomDirective) ¡contenido!: CustomDirective;

Servicio frente a tienda

Angular en su núcleo te anima a utilizar el patrón de diseño MVC donde puedes utilizar servicios para el modelo. Debido a esto, necesitas aprender el patrón de inyección de dependencias para operar datos libremente en tu aplicación. Te permite separar los efectos secundarios de tus llamadas a la API y utilizar la misma lógica en todo el proyecto inyectando las partes que necesites en cada momento, lo que también lo convierte en un enfoque modular.

Angular también viene con el framework Ngrx/store basado en el patrón Redux en caso de que quieras usar un enfoque más reactivo con observables RxJs. Viene con Acciones que se utilizan para despachar eventos únicos desde componentes y/o servicios, Efectos que manejan efectos secundarios o acciones asíncronas que quieras realizar y Reductores que mutan tu estado.

En VueEl enfoque más popular es utilizar la librería Vuex para la gestión de estados, que también viene con herramientas como Actions, Mutations y Getters, al igual que Ngrx/store, para ayudarte a gestionar y organizar el estado de tu aplicación. Puedes modularizarlo estableciendo diferentes almacenes para tus vistas, por ejemplo, un almacén de usuarios o un almacén de carritos, pero esto puede conducir a problemas de espaciado de nombres, a menos que utilices el método namespaced: true en la declaración de la tienda.

He aquí una comparación entre el enfoque basado en servicios y el Vuex cuando la tarea consiste en obtener unos producto datos para su tienda:

@Injectable() // decorador para indicar que queremos usarlo en DI más adelante
export class ProductosServicio {
  productos privados: Producto[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //haz lo que quieras con tus productos
    });
    return this.products;
  }
}

Luego, en el componente, inyectamos nuestro servicio a utilizar:
constructor(private service: HeroService) { }

En Vuesimplemente despachamos una acción que hace una llamada al backend por nosotros:

store.dispatch(getAllProducts)

y en el acciones.ts definimos una acción:

acciones: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // obtener datos y poner los resultados en el almacén
}}

Obtención de datos

Con VuePuedes usar Axios/Fetch o cualquier librería que quieras usar, es realmente sencillo - sólo tienes que manejar las llamadas asíncronas con promesas o el enfoque que mejor te convenga.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(datos => console.log('haz lo que sea necesario'))
} catch (e) {
    /hacer frente a error
}

Angular viene con la librería HttpClient que usa observables, lo que te lleva a otra ventaja - para usarlo apropiadamente y/o manipular datos, necesitas aprender RxJs. De nuevo, puede ser bastante abrumador conseguir fluidez y sentirse familiarizado con esta construcción abstracta al principio.

Puedes utilizar Axios si eso es lo que quieres hacer, pero como dice la página GitHub de Axios: "Axios está fuertemente inspirado en el servicio $http proporcionado en Angular'

private getAllItems(): void {
este.http
.get('https://url.to.fetch.data')

.pipe(
pluck('resultados'),
tap(console.log('haz el efecto secundario que quieras usar aquí')
catchError((error) => {
        /manejar error
})
)
.subscribe((resultado: TipoResultado[])
    //operación final sobre el resultado dado
)
}

Resumen

| Vue Angular
| ———– | ———– |
| No te obliga a seguir reglas muy estrictas | Requiere el uso de Typescript, componentes/servicios basados en clases |
| Curva de aprendizaje plana, fácil para empezar | Curva de aprendizaje alta (Typescript, RxJs, inyección de dependencias) |
| No hay mucho que configurar, pero te permite generar la estructura del proyecto a través de la consola.
| Marco de trabajo comunitario basado tanto en Angular como en React | Creado y mantenido por Google |
| No se incluye mucho, es necesario instalar librerías externas | Gestión de estado, HttpClient incluido en el framework |

Más información:

JavaScript está totalmente muerto. Un tipo en Internet

Despliegue GraphQL/MongoDB API Usando Funciones Netlify

Cómo matar un proyecto con malas prácticas de codificación