Mestareiden vertailu: Angular vs Vue

Projektin perustaminen

Nopein tapa käynnistää projekti on käyttämällä Kehysten laatijoiden tarjoama CLI.. Molemmissa on melko hyvä palvelu, mutta on kuitenkin muutamia eroja, kuten, Vue on enemmän vaihtoehtoja, joten voit räätälöidä projektin tarpeittesi mukaan heti alusta alkaen. Voit valita Vue-versio, onko sinun käytettävä reititystä. Typescript, CSS-esiprosessorit tai perustaa linterin suoraan eteenpäin. Voit myös päättää, haluatko tehdä testejä (yksikkö- tai E2E-testejä).

Angular mukana tulee generaattori, jonka avulla voit luoda komponentteja, palveluita, rajapintoja ja direktiivejä suoraan konsolista, mikä on kokemukseni mukaan erittäin kätevää, koska ei tarvitse manuaalisesti asettaa kansioita, tiedostoja ja turhia työkaluja. koodi käsin, varsinkin kun käytät esimerkiksi MVC-mallia. Typescriptin mukana tulee Angular ja tavallaan painostaa sinua käyttämään sitä. Jos et ole vielä tehnyt sitä, tässä on kätevä esittely, miksi sinun pitäisi kokeilla sitä - voit tutustua siihen osoitteessa täällä.

Alussa, Angular:n CLI kysyy vain reitityksestä tai halutuista CSS-esiprosessoreista, mikä verrattuna esim. Vue, ei jätä sinulle paljon tilaa päättää sovelluksesi rakenteesta ja tyylistä. Mutta jos aiot noudattaa sen pyytämiä konventioita, CLI opastaa sinua koko ajan.

Hankkeen rakenne

Vue käyttää SFC:tä (Single File Components), jonka ansiosta uuden kehittäjän on melko helppo aloittaa kehyksen käyttö ja löytää jalat koodin pariin.

Direktiivit

Vue on myös valmiiksi varustettu direktiiveillä, kuten `v-if, v-for`, joita on hyvin intuitiivinen käyttää, koska se on lähes kopio ohjelmasta Angular niitä. Vue käyttää samaa konventiota kaksisuuntaiseen datan sitomiseen (vain lisäämällä etuliitteen, esim. v- sanassa `v-model`) ja lisäämällä @/v-on, joka osoittaa, että reagoimme johonkin. Angular erottaa tämän osoittamalla, mihin suuntaan olemme menossa käyttämällä sulkuja tapahtumien sitomiselle ja hakasulkeita ominaisuuksien sitomiselle, eli ,`(muutos), [ngStyle], [(ngModel)]`.

Osoitteessa Vue, rakenne itsessään on yksinkertainen, eikä tyylilomakkeita ja logiikkaa varten tarvitse tehdä erillisiä tiedostoja, joten kaikki on järjestetty ja helposti lähestyttävä. Tietenkin, Vue on mukana tyyliopas, jossa on suositeltuja sääntöjä, joita kannattaa noudattaa projektia luotaessa, mutta vain muutama sääntö on pakollinen. 

Tapahtumat

Tässä tapauksessa, Vue tulee jälleen kätevämpi ratkaisu; nimittäin, lähettääksesi tapahtuman lapsikomponentilta vanhemmalleen sinun tarvitsee vain (käyttämällä komentoa Vue 3 Koostumus API ) ottaa metodin kontekstiobjektin asetuksista ja yksinkertaisesti lähettää sen, mitä sillä hetkellä tarvitset:

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

Voit tehdä sen myös suoraan mallissa vastauksena johonkin muuhun tapahtumaan.

Osoitteessa Angular, sinun on ensin määriteltävä EventEmitter seuraavasti:

@Output() customNameForYourEmitter = new EventEmitter();

Sitten sinun on kutsuttava EventEmitterin emit-metodia:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Korttipaikat/sisältöprojektio

Molemmissa kehyksissä voit helposti siirtää sisällön (yksittäisen ja useamman) vanhemmasta komponentista lapsikomponenttiin vain lisäämällä ylimääräistä html:ää lapsitunnisteiden sisälle, pienin eroin:

Vue:

`<`` 

Angular:

Oletusarvo:
    

Nimetty aukko:

<p yourname>
   Tämä on nimetty korttipaikka
  </p>
  <p>Tämä on oletusarvoinen korttipaikka</p>

Jos kuitenkin haluat renderöidä ehdollisesti joitakin sovelluksen osia, Vue on intuitiivisempi kuin Angular ja voit tehdä sen nopeammin lisäämällä v-if direktiiviin <template> tag, jonka avulla voit renderöidä vain ne osat, joita juuri nyt tarvitaan.

Vaikka ng-content renderöidään aina, sinun täytyy käyttää tässä tapauksessa komentoa ng-templateja myöhemmin luoda oma mukautettu direktiivi:

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

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

ja koska nimi, jonka annat ng-template attribuutin avulla Angular tietää, mitä pitäisi renderöidä:

Lisäksi haluat komponentin sisällä projektoida mallin käytettäväksi komponentissa @ContentChild saadaksesi oikean mallin:

@ContentChild(CustomDirective) content!.: CustomDirective;

Palvelu vs. myymälä

Angular kannustaa sinua käyttämään MVC-suunnittelumallia, jossa voit käyttää palveluja mallissa. Tämän vuoksi sinun on opeteltava riippuvuusinjektiomalli, jotta voit käyttää tietoja sovelluksessasi vapaasti. Sen avulla voit erottaa sivuvaikutukset eli API-kutsut toisistaan ja käyttää samaa logiikkaa koko projektissa injektoimalla juuri sillä hetkellä tarvitsemasi osat, mikä tekee siitä myös modulaarisen lähestymistavan.

Angular sisältää myös Redux-malliin perustuvan Ngrx/store-kehyksen, jos haluat käyttää reaktiivisempaa lähestymistapaa RxJs-havainnoitavien avulla. Se sisältää Actions-toimintoja, joita käytetään komponenttien ja/tai palveluiden ainutlaatuisten tapahtumien lähettämiseen, Effects-toimintoja, jotka käsittelevät sivuvaikutuksia tai asynkronisia toimintoja, jotka haluat suorittaa, ja Reducers-toimintoja, jotka mutatoivat tilaasi.

Osoitteessa Vue, suosittu lähestymistapa on käyttää Vuex-kirjastoa tilanhallintaan, joka sisältää myös työkaluja, kuten Actions (toiminnot), Mutations (muunnokset) ja Getters (hakijat), aivan kuten Ngrx/store, jotka auttavat sinua hallitsemaan ja järjestämään sovelluksesi tilaa. Voit modulaarisoida sitä asettamalla näkymiäsi varten eri varastoja, esimerkiksi käyttäjä- tai ostoskorivaraston, mutta se voi johtaa nimien välisiin ongelmiin, ellet käytä apuna työkalua namespaced: true ominaisuutta myymäläilmoituksessasi.

Seuraavassa vertaillaan palvelupohjaista lähestymistapaa ja Vuex-lähestymistapaa, kun tehtävänä on hakea joitakin tietoja. tuote tietoja myymälääsi varten:

@Injectable() // koriste, joka osoittaa, että haluamme käyttää sitä DI:ssä myöhemmin.
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //tehdä tuotteille mitä haluat
    });
    return this.products;
  }
}

Sitten komponenttiin pistetään käytettävä palvelu:
constructor(private service: HeroService) { }

Osoitteessa Vue, lähetämme yksinkertaisesti toiminnon, joka tekee backend-kutsun puolestamme:

store.dispatch(getAllProducts)

ja actions.ts tiedostossa määrittelemme toiminnon:

toimet: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts(););); // noutaa tiedot ja laittaa tulokset varastoon.
}}

Tietojen hakeminen

Osoitteessa Vue, voit käyttää Axios/Fetchiä tai mitä tahansa kirjastoa, jota haluat käyttää, se on todella suoraviivaista - käsittelet vain asynkronisia kutsuja lupauksilla tai millä tahansa lähestymistavalla, joka sopii sinulle parhaiten.

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

Angular mukana tulee HttpClient-kirjasto, joka käyttää observableja, mikä johtaa toiseen etuun - käyttääksesi sitä kunnolla ja/tai käsitelläksesi dataa sinun on opittava RxJs. Jälleen kerran voi olla melko ylivoimaista päästä sujuvaksi ja tuntea itsensä tutuksi tämän abstraktin rakenteen kanssa heti alussa.

Voit käyttää Axiosia, jos haluat tehdä niin, mutta kuten Axiosin GitHub-sivulla sanotaan: "Axios on saanut vaikutteita $http-palvelusta, joka on tarjottu osoitteessa Angular'

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

.pipe(
pluck('results'),
tap(console.log('tee mitä tahansa sivuvaikutusta haluat käyttää tässä')
catchError((error) => {
        //käsittele virhe
})
)
.subscribe((result: ResultType[])
    //lopputoiminto annetulle tulokselle
)
}

Yhteenveto

| Vue | Angular | Angular |
| ———– | ———– |
| Ei pakota noudattamaan kovin tiukkoja sääntöjä | Vaatii Typescriptin käyttöä, luokkapohjaisia komponentteja/palveluita |
| Tasainen oppimiskäyrä, helppo aloittaa | Korkea oppimiskäyrä (Typescript, RxJs, Dependency Injection) |
| Paljon konfiguroitavia asioita projektin asennuksen aikana| Ei paljon asetuksia etukäteen, mutta sen avulla voit luoda projektin rakenteen konsolin kautta |
| Yhteisölähtöinen kehys, joka perustuu sekä Angular:hen että React:hen | Googlen luoma ja ylläpitämä |
| Ei ole paljon mukana, täytyy asentaa ulkoisia kirjastoja| Tilanhallinta, HttpClient sisältyy kehykseen |

Lue lisää:

JavaScript on täysin kuollut. Joku kaveri internetissä

GraphQL/MongoDB API:n käyttöönotto Netlify-toimintojen avulla

Miten tappaa projekti huonoilla koodauskäytännöillä?