De vergelijking van de kampioenen: Angular vs Vue

Een project opzetten

De snelste manier om een project is door gebruik te maken van de CLI geleverd door de auteurs van de frameworks. Beide hebben een vrij goede service, maar er zijn een paar verschillen, namelijk, Vue wordt geleverd met meer opties, zodat je een project vanaf het begin kunt afstemmen op je behoeften. Je kunt kiezen voor de Versie VueOf je nu routing moet gebruiken. Typescript, CSS preprocessors of een linter instellen. Je kunt ook beslissen of je tests wilt opzetten (unit of E2E).

Angular wordt geleverd met een generator waarmee je componenten, services, interfaces en directives direct vanuit de console kunt maken. Mijn ervaring is dat dit erg handig is, omdat het niet nodig is om handmatig mappen, bestanden en overbodige code met de hand, vooral als je bijvoorbeeld het MVC-patroon gebruikt. Typescript wordt standaard geleverd met Angular en zet je als het ware onder druk om het te gebruiken. Als je het nog niet hebt gedaan, is hier een handige introductie waarom je het zou moeten proberen - je kunt het bekijken hier.

Aan het begin, Angular's CLI vraagt je alleen naar routing of voorkeurs CSS preprocessors die, in vergelijking met Vuelaat je niet veel ruimte om te beslissen over de structuur en stijl van je applicatie. Maar als je de conventie volgt die het je vraagt te gebruiken, dan zal de CLI je de hele weg leiden.

Projectstructuur

Vue maakt gebruik van SFC (Single File Components), wat het voor een nieuwe ontwikkelaar vrij eenvoudig maakt om een framework te gebruiken en zijn weg te vinden in de code.

Richtlijnen

Vue komt ook uit de doos met directieven zoals `v-if, v-for`, wat erg intuïtief is om te gebruiken omdat het bijna een kopie is van de Angular degenen. Vue gebruikt dezelfde conventie voor bidirectionele gegevensbinding (alleen door het voorvoegsel te zetten met, bijvoorbeeld, v- in `v-model`) en het toevoegen van de @/v-on om aan te geven dat we ergens op reageren. Angular scheidt dit door aan te geven welke kant we op gaan door haakjes te gebruiken voor binding aan gebeurtenissen en vierkante haakjes voor binding aan eigenschappen, dus `(verandering), [ngStyle], [(ngModel)]`.

In VueDe structuur zelf is eenvoudig, het is niet nodig om aparte bestanden te maken voor stylesheets en logica, dus het is allemaal overzichtelijk en toegankelijk. Natuurlijk, Vue wordt geleverd met een stijlgids waarin je aanbevolen regels kunt vinden om te volgen bij het maken van een project; er zijn er echter maar een paar die verplicht zijn. 

Evenementen

In dit geval, Vue komt weer met een handigere oplossing; namelijk, om een gebeurtenis van het kind-onderdeel naar zijn ouder te sturen is alles wat je hoeft te doen (met behulp van Vue 3 Samenstelling API ) een methode nemen van het contextobject in de setup en gewoon uitzenden wat je op dat moment nodig hebt:

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

Je kunt het ook direct in de sjabloon doen als reactie op een andere gebeurtenis.

In Angularmoet je eerst als volgt een EventEmitter definiëren:

@Output() customNameForYourEmitter = nieuwe EventEmitter();

Dan moet je een emit method aanroepen op de EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Slots/inhoud projectie

In beide frameworks kun je de inhoud (zowel enkelvoudige als meervoudige) gemakkelijk verplaatsen van het ouder component naar het kind door gewoon extra html toe te voegen binnen de child tags, met kleine verschillen:

Vue:

`` 

Angular:

Standaard:
    

Naam sleuf:
    .

<p yourname>
   Dit is een slot met naam
  </p>
  <p>Dit is een standaard sleuf</p>

Als je echter bepaalde delen van je applicatie voorwaardelijk wilt renderen, Vue is intuïtiever dan Angular en laat je het sneller doen door de v-if richtlijn naar uw tag, waarmee je alleen de delen kunt renderen die op dat moment nodig zijn.

Terwijl de ng-content altijd wordt weergegeven, moet je in dit geval de ng-sjabloonen maak later je eigen aangepaste richtlijn:

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

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

en vanwege de naam die je aan je ng-sjabloon attribuut, zal Angular weten wat moet worden weergegeven:

Ook wil je binnen de component je sjabloon projecteren om te gebruiken in de @InhoudKind om de juiste sjabloon te krijgen:

@ContentChild(CustomDirective) content!: CustomDirective;

Service vs winkel

Angular moedigt je in de kern aan om het MVC-ontwerppatroon te gebruiken, waarbij je services voor het model kunt gebruiken. Daarom moet je het patroon voor het injecteren van afhankelijkheden leren om gegevens vrij te kunnen gebruiken in je applicatie. Hiermee kun je de neveneffecten van je API-aanroepen scheiden en dezelfde logica in het hele project gebruiken door de onderdelen die je op dat moment nodig hebt te injecteren, waardoor het ook een modulaire aanpak is.

Angular wordt ook geleverd met het Ngrx/store framework gebaseerd op het Redux patroon voor het geval je een meer reactieve aanpak wilt gebruiken met RxJs observables. Het wordt geleverd met Actions die worden gebruikt voor het dispatchen van unieke gebeurtenissen van componenten en/of services, Effects die neveneffecten afhandelen of async acties die je wilt uitvoeren en Reducers die je state muteren.

In VueDe populaire benadering is om de Vuex bibliotheek te gebruiken voor statusbeheer, die ook tools bevat zoals Actions, Mutations en Getters, net als Ngrx/store, om je te helpen bij het beheren en organiseren van de status van je applicatie. Je kunt het moduleren door verschillende stores in te stellen voor je views, bijvoorbeeld een user store of een cart store, maar dit kan leiden tot problemen met naamspaties, tenzij je de naamgebonden: waar eigenschap in je winkeldeclaratie.

Hier is een vergelijking van de op services gebaseerde benadering en die van de Vuex wanneer de taak is om een aantal product gegevens voor je winkel:

@Injectable() // decorator om aan te geven dat we het later in DI willen gebruiken
exportklasse ProductsService {
  private producten: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (Producten: Product[]) => {
      //doe wat je wilt met je producten
    });
    return this.products;
  }
}

Vervolgens injecteren we in de component onze service die moet worden gebruikt:
constructor(private service: HeroService) { }

In Vueverzenden we eenvoudig een actie die een backend-oproep voor ons doet:

winkel.dispatch(getAlleProducten)

en in de acties.ts bestand definiëren we een actie:

acties: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // gegevens ophalen en de resultaten in de winkel zetten
}}

Gegevens ophalen

Met VueJe kunt Axios/Fetch of welke bibliotheek dan ook gebruiken, het is echt eenvoudig - je handelt asynchrone oproepen gewoon af met beloften of welke aanpak dan ook die het beste bij je past.

probeer {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('doe wat nodig is'))
} vangst (e) {
    //fout afhandelen
}

Angular wordt geleverd met de HttpClient bibliotheek die observables gebruikt, wat leidt tot een ander voordeel - om het goed te gebruiken en/of gegevens te manipuleren, moet je RxJs leren. Nogmaals, het kan behoorlijk overweldigend zijn om vloeiend te worden en vertrouwd te raken met deze abstracte constructie in het prille begin.

Je kunt Axios gebruiken als dat is wat je wilt doen, maar zoals de Axios GitHub pagina zegt: 'Axios is sterk geïnspireerd door de $http service geleverd in Angular'

privé getAllItems(): leeg {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('resultaten'),
tap(console.log('doe hier wat voor neveneffect je wilt gebruiken')
catchError((error) => {
        //fout afhandelen
})
)
.subscribe((resultaat: ResultType[])
    /eindbewerking op gegeven uitvoer
)
}

Samenvattend

| Vue | Angular |
| ———– | ———– |
| Vereist het gebruik van Typescript, op klassen gebaseerde componenten/services.
| Vlakke leercurve, gemakkelijk om mee te beginnen Hoge leercurve (Typescript, RxJs, Dependency Injection)
| Er zijn veel dingen te configureren tijdens het opzetten van een project. Er is niet veel in te stellen, maar je kunt wel een projectstructuur genereren via de console.
| Community-gedreven framework gebaseerd op zowel Angular als React | Gemaakt en onderhouden door Google |
| Er is niet veel inbegrepen, u moet externe bibliotheken installeren. State management, HttpClient inbegrepen in het framework.

Lees meer:

JavaScript is helemaal dood. Een kerel op het internet

GraphQL/MongoDB API implementeren met Netlify-functies

Hoe een project om zeep helpen met slechte codeerpraktijken