Sammenligningen av The Champions: Angular vs Vue

Sette opp et prosjekt

Den raskeste måten å starte en prosjekt er ved å bruke CLI levert av rammeverkenes forfattere. Begge kommer med ganske god service; det er imidlertid noen få forskjeller, f.eks, Vue kommer med flere alternativer, og du kan derfor skreddersy et prosjekt etter dine behov helt fra starten av. Du kan velge Vue-versjon, enten du trenger å bruke ruting. Typescript, CSS-preprosessorer eller sette opp en linter rett i forkant. Du kan også bestemme om du vil sette opp tester (unit eller E2E).

Angular leveres med en generator som lar deg opprette komponenter, tjenester, grensesnitt og direktiver direkte fra konsollen, noe som etter min erfaring er veldig praktisk, ettersom det ikke er behov for å manuelt sette opp mapper, filer og overflødige kode for hånd, spesielt når du bruker f.eks. MVC-mønsteret. Typescript kommer ut av esken med Angular og presser deg til å bruke det. Hvis du ikke har gjort det ennå, kan du ta en titt på denne praktiske introduksjonen til hvorfor du bør prøve det ut her.

I begynnelsen, Angulars CLI spør deg kun om ruting eller foretrukne CSS-preprosessorer, noe som, sammenlignet med Vuegir deg ikke mye rom for å bestemme strukturen og stilen på applikasjonen din. Men hvis du skal følge konvensjonen den ber deg om å bruke, kommer CLI til å lede deg hele veien.

Prosjektstruktur

Vue bruker SFC (Single File Components), noe som gjør det ganske enkelt for en ny utvikler å begynne å bruke et rammeverk og finne seg til rette i koden.

Direktiver

Vue leveres også med direktiver som `v-if, v-for`, som er veldig intuitivt å bruke, siden det nesten er en kopi av Angular de. Vue bruker samme konvensjon for toveis databinding (bare ved å sette v- i `v-model` foran) og legge til @/v-on for å indikere at vi reagerer på noe. Angular skiller dette ved å indikere hvilken vei vi går ved å bruke parenteser for hendelsesbinding og hakeparenteser for egenskapsbinding, f.eks.

I Vueer selve strukturen enkel, det er ikke nødvendig å lage separate filer for stilark og logikk, så alt er organisert og oversiktlig. Selvfølgelig, selvfølgelig, Vue leveres med en stilguide der du kan finne anbefalte regler du bør følge når du oppretter et prosjekt, men det er bare noen få som er obligatoriske. 

Hendelser

I dette tilfellet, Vue kommer igjen med en mer praktisk løsning; for å sende en hendelse fra den underordnede komponenten til den overordnede er alt du trenger å gjøre (ved hjelp av Vue 3 Sammensetning API ) tar en metode fra kontekstobjektet i oppsettet og sender ganske enkelt ut det du trenger for øyeblikket:

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

Du kan også gjøre det direkte i malen som en respons på en annen hendelse.

I Angularmå du først definere en EventEmitter på følgende måte:

@Output() customNameForYourEmitter = new EventEmitter();

Deretter må du kalle en emit-metode på EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Spilleautomater/innholdsprojeksjon

I begge rammeverkene kan du enkelt flytte innhold (enkelt eller flere) fra den overordnede komponenten til den underordnede komponenten ved å legge til ekstra html i de underordnede taggene, men med små forskjeller:

Vue:

``` 

Angular:

Standard:
    

Navngitt spor:

<p yourname>
   Dette er et navngitt spor
  </p>
  <p>Dette er et standardspor</p>

Men hvis du ønsker å gjengi enkelte deler av applikasjonen din på betingede vilkår, Vue er mer intuitivt enn Angular og lar deg gjøre det raskere ved å legge til v-if direktivet til din <template> taggen, slik at du bare kan gjengi de delene som er nødvendige for øyeblikket.

 </template
 </template

   </template

Mens ng-innhold alltid blir gjengitt, må du i dette tilfellet bruke ng-malog senere lage ditt eget egendefinerte direktiv:

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

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

og på grunn av navnet du gir til din ng-mal attributtet, vil Angular vite hva som skal gjengis:

 <!

I komponenten vil du også projisere malen som skal brukes i @ContentChild for å få riktig mal:

@ContentChild(CustomDirective) content!: CustomDirective;

Service vs butikk

Angular oppfordrer deg til å bruke MVC-designmønsteret, der du kan bruke tjenester for modellen. Derfor må du lære deg avhengighetsinjeksjonsmønsteret for å kunne operere data fritt i applikasjonen din. Det lar deg skille ut sideeffekter av API-kall og bruke den samme logikken i hele prosjektet ved å injisere de delene du trenger for øyeblikket, noe som også gjør det til en modulær tilnærming.

Angular leveres også med Ngrx/store-rammeverket basert på Redux-mønsteret, i tilfelle du ønsker å bruke en mer reaktiv tilnærming med RxJs-observabler. RxJ leveres med Actions som brukes til å sende unike hendelser fra komponenter og/eller tjenester, Effects som håndterer sideeffekter eller asynkrone handlinger du ønsker å utføre, og Reducers som muterer tilstanden din.

I VueDen populære tilnærmingen er å bruke Vuex-biblioteket for tilstandshåndtering, som også kommer med verktøy som Actions, Mutations og Getters, akkurat som Ngrx/store, for å hjelpe deg med å administrere og organisere tilstanden til applikasjonen din. Du kan modularisere det ved å angi forskjellige butikker for visningene dine, f.eks. en brukerbutikk eller en handlekurvbutikk, men det kan føre til problemer med navneavstand, med mindre du bruker namespaced: true egenskapen i butikkdeklarasjonen din.

Her er en sammenligning av den tjenestebaserte tilnærmingen og Vuex når oppgaven er å hente noen produkt data for butikken din:

@Injectable() // dekorator for å indikere at vi ønsker å bruke den i DI senere
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      // gjør hva du vil med produktene dine
    });
    returnere this.products;
  }
}

Deretter injiserer vi tjenesten som skal brukes, i komponenten:
constructor(private service: HeroService) { }

I Vuesender vi ganske enkelt en handling som gjør et backend-anrop for oss:

store.dispatch(getAllProducts)

og i actions.ts filen definerer vi en handling:

handlinger: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // hent data og legg resultatene i butikken
}}

Henter data

Med Vuekan du bruke Axios/Fetch eller hvilket bibliotek du vil, det er veldig enkelt - du håndterer bare asynkrone kall med promises eller den tilnærmingen som passer deg best.

prøv {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('gjør det som trengs'))
} catch (e) {
    //håndter feil
}

Angular kommer med HttpClient-biblioteket som bruker observables, noe som fører deg til en annen fordel - for å bruke det riktig og/eller manipulere data, må du lære deg RxJs. Igjen, det kan være ganske overveldende å bli fortrolig med denne abstrakte konstruksjonen helt i begynnelsen.

Du kan bruke Axios hvis det er det du ønsker å gjøre, men som det står på Axios GitHub-side: "Axios er sterkt inspirert av $http-tjenesten som tilbys i Angular'

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

.pipe(
plukk('resultater'),
tap(console.log('gjør hvilken som helst sideeffekt du vil bruke her')
catchError((feil) => {
        //håndter feil
})
)
.subscribe((resultat: ResultType[])
    //sluttoperasjon på gitt output
)
}

Oppsummering

Vue | Angular | Angular | Angular
| ———– | ———– |
| Krever ikke at du følger veldig strenge regler | Krever bruk av Typescript, klassebaserte komponenter/tjenester | Forutsetter
| Flat læringskurve, lett å komme i gang med | Høy læringskurve (Typescript, RxJs, Dependency Injection) | Høy læringskurve (Typescript, RxJs, Dependency Injection)
| Mye å konfigurere under prosjektoppsettet Ikke mye å sette opp på forhånd, men det lar deg generere prosjektstruktur via konsollen
| Fellesskapsdrevet rammeverk basert på både Angular og React | Opprettet og vedlikeholdt av Google
| Ikke mye er inkludert, du må installere eksterne biblioteker. State management, HttpClient er inkludert i rammeverket.

Les mer om dette:

JavaScript er helt død. En fyr på Internett

Distribuere GraphQL/MongoDB API ved hjelp av Netlify-funksjoner

Slik dreper du et prosjekt med dårlig kodingspraksis