Meistrite võrdlus: Angular vs Vue

Projekti loomine

Kiireim viis käivitada projekt on kasutades Raamistike autorite poolt pakutav CLI. Mõlemal on päris hea teenus; siiski on mõned erinevused, st, Vue on rohkem võimalusi, seega saate projekti algusest peale täpselt oma vajadustele kohandada. Saate valida Vue versioon, kas teil on vaja kasutada marsruutimist. Typescript, CSS preprocessors või luua linter otse ette. Samuti võimaldab see otsustada, kas soovite luua teste (unit või E2E).

Angular on kaasas generaator, mis võimaldab luua komponente, teenuseid, liideseid ja direktiive otse konsoolist, mis minu kogemuse põhjal on väga mugav, kuna ei ole vaja käsitsi luua kaustu, faile ja üleliigseid kood käsitsi, eriti kui kasutate nt MVC mustrit. Typescript tuleb karbist välja koos Angular ja sunnib teid seda kasutama. Kui te ei ole seda veel teinud, siis siin on mugav sissejuhatus, miks te peaksite seda proovima - saate seda vaadata siin.

Alguses, Angular CLI küsib teilt ainult marsruutimise või eelistatud CSS eelprotsessorite kohta, mis võrreldes Vue, ei jäta teile palju ruumi oma rakenduse struktuuri ja stiili üle otsustamiseks. Aga kui te järgite konventsiooni, mida ta palub kasutada, siis CLI juhib teid kogu aeg.

Projekti struktuur

Vue kasutab SFC-d (Single File Components), mis teeb uue arendaja jaoks raamistiku kasutamise alustamise ja koodis orienteerumise üsna lihtsaks.

Direktiivid

Vue on samuti karbist välja toodud sellised direktiivid nagu `v-if, v-for`, mida on väga intuitiivne kasutada, kuna see on peaaegu koopia programmi Angular need. Vue kasutab sama konventsiooni kahesuunalise andmesidumise puhul (lihtsalt lisades sellele eesliite, st v- in `v-model`) ja lisades @/v-on, mis näitab, et me reageerime millelegi. Angular eraldab selle, näidates, millises suunas me läheme, kasutades sulgusid sündmuse sidumiseks ja nurksulgusid omaduste sidumiseks, st ,`(muutus), [ngStyle], [(ngModel)]`.

Veebilehel Vue, struktuur ise on lihtne, stiililehtede ja loogika jaoks ei ole vaja teha eraldi faile, nii et kõik on organiseeritud ja ligipääsetav. Muidugi, Vue on kaasas stiilijuhend, kust leiate soovituslikud reeglid, mida projekti loomisel järgida; siiski on ainult mõned kohustuslikud reeglid. 

Sündmused

I sel juhul, Vue on jälle mugavam lahendus; nimelt, et saata sündmus lapskomponendist vanemale, tuleb vaid (kasutades Vue 3 Koostis API ) võtab meetodi konteksti objektist seadistuses ja lihtsalt väljastab selle, mida hetkel vaja on:

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

Seda saab teha ka otse mallile vastuseks mõnele muule sündmusele.

Veebilehel Angular, tuleb kõigepealt defineerida EventEmitter järgmiselt:

@Output() customNameForYourEmitter = new EventEmitter();

Seejärel peate kutsuma EventEmitterile emitmeetodi:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Mänguajad/sisu projektsioon

Mõlemas raamistikus saab sisu (nii ühe kui ka mitme komponendi) hõlpsasti üle viia vanemkomponendist selle lapsesse, lisades lihtsalt täiendava html-i laps-tagide sisse, väikeste erinevustega:

Vue:

`` 

Angular:

Vaikimisi:
    

Nimeline pesa:

<p yourname>
   See on nimeline pesa
  </p>
  <p>See on vaikimisi pesa</p>

Kui aga soovite oma rakenduse mõningaid osi tingimuslikult renderdada, Vue on intuitiivsem kui Angular ja võimaldab seda teha kiiremini, lisades v-if direktiivi oma sildi, mis võimaldab teil renderdada ainult need osad, mis on hetkel vajalikud.

Kuigi ng-content on alati renderdatud, tuleb sel juhul kasutada funktsiooni ng-templateja hiljem luua oma kohandatud direktiiv:

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

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

ja sellepärast, et nimi, mille te annate oma ng-template atribuuti, teab Angular, mida tuleks esitada:

Samuti soovite komponendi sees projitseerida oma malli, et seda saaks kasutada @ContentChild et saada õige mall:

@ContentChild(CustomDirective) content!: CustomDirective;

Teenindus vs kauplus

Angular julgustab teid kasutama MVC disainimustrit, kus saate kasutada mudeli jaoks teenuseid. Selle tõttu peate õppima sõltuvuse süstimise mustrit, et oma rakenduses andmeid vabalt kasutada. See võimaldab teil eraldada oma kõrvalmõjusid, st API-kõnesid, ja kasutada sama loogikat kogu projektis, süstides osad, mida te hetkel vajate, mis teeb sellest ka modulaarse lähenemise.

Angular tuleb ka Ngrx/store raamistik, mis põhineb Reduxi mustril, juhul kui soovite kasutada reaktiivsemat lähenemist RxJs vaatlusobjektidega. Sellega on kaasas Actions, mida kasutatakse unikaalsete sündmuste saatmiseks komponentidest ja/või teenustest, Effects, mis tegelevad kõrvalmõjudega või asünkroonsete tegevustega, mida soovite teostada, ja Reducers, mis muudavad teie olekut.

Veebilehel Vue, on populaarne lähenemine kasutada oleku haldamiseks Vuex raamatukogu, mis sisaldab ka selliseid vahendeid nagu Actions, Mutations ja Getters, nagu Ngrx/store, mis aitavad teil oma rakenduse olekut hallata ja korraldada. Saate seda moduleerida, määrates oma vaadetele erinevaid salvestusi, st kasutaja salvestus või ostukorvi salvestus, kuid see võib põhjustada probleeme nimede vahega, välja arvatud juhul, kui te kasutate namespaced: true omadus teie poe deklaratsioonis.

Siin on võrreldud teenustel põhinevat lähenemisviisi ja Vuex lähenemisviisi, kui ülesanne on hankida mõned toode andmed teie kaupluse jaoks:

@Injectable() // decorator, et näidata, et me tahame seda hiljem DI-s kasutada.
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => { {
      //teha oma toodetega mida iganes sa soovid
    });
    return this.products;
  }
}

Seejärel süstime komponendis meie kasutatava teenuse:
constructor(private service: HeroService) { }

Veebilehel Vue, saadame lihtsalt toimingu, mis teeb meie jaoks backend-kõne:

store.dispatch(getAllProducts)

ja actions.ts faili määratleme tegevuse:

tegevused: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts(););); // hangib andmed ja paneb tulemused poodi.
}}

Andmete hankimine

Koos Vue, võite kasutada Axios/Fetch'i või mis tahes raamatukogu, mida soovite kasutada, see on tõesti lihtne - te lihtsalt käsitlete asünkroonseid kõnesid lubaduste abil või mis iganes lähenemine teile kõige paremini sobib.

proovi {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    //handle error
}

Angular tuleb koos HttpClient raamatukoguga, mis kasutab observables, mis viib teid veel ühe eelise juurde - et seda korralikult kasutada ja/või andmetega manipuleerida, peate õppima RxJs. Jällegi võib see olla üsna üle jõu käivitatud, et saada sujuvalt ja tunda end selle abstraktse konstruktsiooniga kohe alguses tuttavaks.

Võite kasutada Axios't, kui soovite seda teha, kuid nagu Axios GitHubi lehel öeldakse: "Axios on tugevalt inspireeritud $http teenusest, mida pakub Angular'

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

.pipe(
pluck('results'),
tap(console.log('do what side effect you want to use here')
catchError((error) => {
        //handle error
})
)
.subscribe((result: ResultType[])
    //lõppoperatsioon antud väljundiga
)
}

Kokkuvõte

| Vue | Angular | Angular |
| ———– | ———– |
| Ei sunni sind väga rangeid reegleid järgima | Nõuab Typescript'i, klassipõhiste komponentide/teenuste kasutamist |
| Tasane õppimiskõver, lihtne alustada | Kõrge õppimiskõver (Typescript, RxJs, Dependency Injection) |
| Palju asju, mida projekti seadistamise ajal konfigureerida| Ei ole palju, mida eelnevalt määrata, kuid see võimaldab teil luua projekti struktuuri läbi konsooli |
| Kogukonnapõhine raamistik, mis põhineb nii Angular-l kui ka React-l | Google on loonud ja hooldab seda |
| Mitte palju ei ole lisatud, vaja paigaldada väliseid raamatukogusid | State management, HttpClient on lisatud raamistikku |

Loe edasi:

JavaScript on täiesti surnud. Mõni kutt internetis

GraphQL/MongoDB API kasutuselevõtt Netlify funktsioonide abil

Kuidas tappa projekt halva kodeerimispraktikaga