Il confronto tra i campioni: Angular vs Vue

Impostazione di un progetto

Il modo più veloce per dare il via a un progetto è l'utilizzo del CLI fornita dagli autori dei framework. Entrambi sono dotati di un servizio abbastanza buono; tuttavia, ci sono alcune differenze, ad esempio, Vue è dotato di un maggior numero di opzioni, per cui è possibile adattare un progetto alle proprie esigenze fin dall'inizio. Potete scegliere il Versione VueSe avete bisogno di usare routing. Typescript, preprocessori CSS o impostare un linter subito dopo. Inoltre, consente di decidere se si desidera impostare dei test (unitari o E2E).

Angular è dotato di un generatore che consente di creare componenti, servizi, interfacce e direttive direttamente dalla console, il che, in base alla mia esperienza, è molto utile, in quanto non è necessario impostare manualmente cartelle, file e ridondanze. codice a mano, soprattutto quando si utilizza il modello MVC. Typescript viene fornito con Angular e vi spinge a usarlo. Se non l'avete ancora fatto, ecco un'utile introduzione sul perché dovreste provarlo: dateci un'occhiata. qui.

All'inizio, CLI dell'Angular chiede solo il routing o i preprocessori CSS preferiti che, rispetto a Vuenon lascia molto spazio per decidere la struttura e lo stile dell'applicazione. Ma se avete intenzione di seguire le convenzioni che vi chiede di usare, la CLI vi guiderà per tutto il percorso.

Struttura del progetto

Vue utilizza SFC (Single File Components), il che rende abbastanza semplice per un nuovo sviluppatore iniziare a usare un framework e a orientarsi nel codice.

Direttive

Vue viene fornito con direttive come `v-if, v-for`, che è molto intuitivo da usare, essendo quasi una copia del programma Angular quelli. Vue utilizza la stessa convenzione per il binding bidirezionale dei dati (solo con il prefisso v- in `v-model`) e aggiungendo @/v-on, che indica che stiamo reagendo a qualcosa. Angular separa questo aspetto indicando la strada che stiamo percorrendo, usando le parentesi per il legame con gli eventi e le parentesi quadre per il legame con le proprietà, cioè `(change), [ngStyle], [(ngModel)]`.

In VueLa struttura è semplice, non c'è bisogno di creare file separati per i fogli di stile e la logica, quindi è tutto organizzato e accessibile. Naturalmente, Vue è dotato di una guida di stile in cui si possono trovare le regole consigliate da seguire quando si crea un progetto; tuttavia, ce ne sono solo alcune obbligatorie. 

Eventi

In questo caso, Vue viene riproposto con una soluzione più pratica; cioè, per emettere un evento dal componente figlio al suo genitore, tutto ciò che si deve fare è (utilizzando Vue 3 Composizione API ) prende un metodo dall'oggetto contesto nel setup ed emette semplicemente ciò che serve al momento:

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

È anche possibile farlo direttamente nel modello come risposta a un altro evento.

In Angularè necessario definire prima un EventEmitter come segue:

@Output() customNameForYourEmitter = new EventEmitter();

Quindi è necessario chiamare un metodo emit sull'EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Proiezione di slot/contenuti

In entrambi i framework, è possibile spostare facilmente il contenuto (singolo o multiplo) dal componente genitore al suo figlio, semplicemente aggiungendo html aggiuntivo all'interno dei tag figlio, con lievi differenze:

Vue:

``. 

Angular:

Predefinito:
    

Slot con nome:

<p yourname>
   Questo è uno slot con nome
  </p>
  <p>Si tratta di uno slot predefinito</p>

Tuttavia, se si desidera eseguire il rendering condizionato di alcune parti dell'applicazione, Vue è più intuitivo di Angular e consente di farlo più velocemente aggiungendo l'opzione v-if alla direttiva che consente di rendere solo le parti attualmente necessarie.

Mentre il ng-contenuto viene sempre reso, è necessario utilizzare in questo caso l'opzione ng-templatee successivamente creare una direttiva personalizzata:

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

@Direttiva({
  selettore: '[customDirectiveName]'
})
Esportare la classe CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

e per il nome che date al vostro ng-template l'Angular saprà cosa deve essere reso:

Inoltre, all'interno del componente, si vuole proiettare il modello da utilizzare nel file @ContentChild per ottenere il modello corretto:

@ContentChild(CustomDirective) content!: CustomDirective;

Servizio vs negozio

Angular nel suo nucleo incoraggia l'uso del modello di progettazione MVC, in cui è possibile utilizzare servizi per il modello. Per questo motivo, è necessario imparare il modello di iniezione delle dipendenze per gestire liberamente i dati nella propria applicazione. Consente di separare gli effetti collaterali delle chiamate API e di utilizzare la stessa logica nell'intero progetto, iniettando le parti necessarie al momento, il che lo rende un approccio modulare.

Angular viene fornito anche con il framework Ngrx/store, basato sul modello Redux, nel caso in cui si voglia utilizzare un approccio più reattivo con gli osservabili di RxJs. È dotato di Azioni, utilizzate per il dispacciamento di eventi unici da componenti e/o servizi, di Effetti, che gestiscono gli effetti collaterali o le azioni asincrone che si desidera eseguire, e di Riduttori, che mutano lo stato.

In VueL'approccio più diffuso è quello di utilizzare la libreria Vuex per la gestione degli stati, che è dotata di strumenti come Actions, Mutations e Getters, proprio come Ngrx/store, per aiutare a gestire e organizzare lo stato dell'applicazione. Si può modulare impostando diversi negozi per le viste, per esempio un negozio di utenti o un negozio di carrelli, ma questo può portare a problemi di spaziatura dei nomi, a meno che non si utilizzi l'opzione namespaced: true nella dichiarazione del negozio.

Ecco un confronto tra l'approccio basato sui servizi e quello dell'Vuex quando il compito è quello di recuperare alcune prodotto dati per il vostro negozio:

@Injectable() // decoratore per indicare che vogliamo usarlo in DI in un secondo momento
esportare la classe ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //fai quello che vuoi con i tuoi prodotti
    });
    return this.products;
  }
}

Poi, nel componente, iniettiamo il nostro servizio da utilizzare:
constructor(private service: HeroService) { }

In Vue, si invia semplicemente un'azione che effettua una chiamata al backend per noi:

store.dispatch(getAllProducts)

e nel azioni.ts definiamo un'azione:

azioni: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // recupera i dati e inserisce i risultati nell'archivio.
}}

Recupero dei dati

Con VueSi può usare Axios/Fetch o qualsiasi libreria si voglia usare, è davvero semplice: basta gestire le chiamate asincrone con le promesse o con l'approccio più adatto.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('fai quello che serve'))
} catch (e) {
    /gestisce l'errore
}

Angular viene fornito con la libreria HttpClient che utilizza gli osservabili, il che porta a un altro vantaggio: per usarlo correttamente e/o manipolare i dati, è necessario imparare RxJs. Anche in questo caso, può essere piuttosto complicato acquisire fluidità e familiarità con questo costrutto astratto all'inizio.

Si può usare Axios se è quello che si vuole fare, ma come dice la pagina GitHub di Axios: "Axios è fortemente ispirato dal servizio $http fornito in Angular'

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

.pipe(
pluck('results'),
tap(console.log('fai qualsiasi effetto collaterale tu voglia usare qui')
catchError((errore) => {
        /gestisce l'errore
})
)
.subscribe((result: ResultType[])
    //operazione finale sull'output dato
)
}

Riassumendo

| Vue | Angular |
| ———– | ———– |
| Non spinge a seguire regole molto rigide | Richiede l'utilizzo di Typescript, di componenti/servizi basati su classi
| Curva di apprendimento piatta, facile da iniziare | Curva di apprendimento elevata (Typescript, RxJs, Dependency Injection) |
| Non c'è molto da configurare durante l'impostazione del progetto, ma consente di generare la struttura del progetto tramite la console.
| Quadro di riferimento comunitario basato sia su Angular che su React | Creato e mantenuto da Google |
| Non è incluso molto, è necessario installare librerie esterne| Gestione degli stati, HttpClient inclusi nel framework |

Per saperne di più:

L'JavaScript è completamente morto. Un tizio su Internet

Distribuire API GraphQL/MongoDB utilizzando le funzioni Netlify

Come uccidere un progetto con cattive pratiche di codifica