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 Vue, whether you need to use routing. Texto mecanografiado, CSS preprocessors or set up a linter right ahead. Also, it lets you decide if you want to set up tests (unit or 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 also comes with the Ngrx/store framework based on the Redux pattern in case you want to use a more reactive approach with RxJs observables. It comes with Actions that are used for dispatching unique events from components and/or services, Effects that handle side effects or async actions you want to perform and Reducers that mutate your state.

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 Vue, we simple dispatch an action that makes a backend call for us:

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.
| Community-driven framework based on both Angular and React | Created and maintained by 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