Srovnání šampionů: Angular vs Vue

Nastavení projektu

Nejrychlejší způsob, jak zahájit projekt je pomocí CLI poskytnuté autory rámců. Obě jsou vybaveny docela dobrými službami, nicméně existuje několik rozdílů, tj., Vue nabízí více možností, a proto můžete projekt od začátku přizpůsobit svým potřebám. Můžete si vybrat Verze Vue, zda je třeba použít směrování. Typescript, preprocesory CSS nebo si rovnou nastavte linter. Také vám umožňuje rozhodnout, zda chcete nastavit testy (jednotkové nebo E2E).

Angular je dodáván s generátorem, který umožňuje vytvářet komponenty, služby, rozhraní a směrnice přímo z konzole, což je podle mých zkušeností velmi praktické, protože není třeba ručně nastavovat složky, soubory a nadbytečné soubory. kód ručně, zejména pokud používáte např. vzor MVC. Typescript je dodáván s Angular a tak trochu na vás tlačí, abyste ji používali. Pokud jste to ještě neudělali, zde je praktický úvod, proč byste to měli vyzkoušet - můžete se na něj podívat zde.

Na začátku, CLI Angular se vás ptá pouze na směrování nebo preferované preprocesory CSS, což je ve srovnání s dotazem na Vue, vám neponechává mnoho prostoru pro rozhodování o struktuře a stylu vaší aplikace. Pokud však budete dodržovat konvence, které po vás požaduje, CLI vás povede po celé cestě.

Struktura projektu

Vue používá SFC (Single File Components), což novému vývojáři usnadňuje začít používat framework a zorientovat se v kódu.

Směrnice

Vue také obsahuje direktivy jako `v-if, v-for`, jejichž použití je velmi intuitivní, protože téměř kopírují direktivy `v-if, v-for`. Angular ty. Vue používá stejnou konvenci pro obousměrnou datovou vazbu (jen s předponou, tj. v- ve slově `v-model`) a přidává @/v-on, které označuje, že na něco reagujeme. Angular oddělíme tím, že pomocí závorek pro vazbu na událost a hranatých závorek pro vazbu na vlastnost označíme, kudy se vydáme, tedy `(change), [ngStyle], [(ngModel)]`.

Na adrese Vue, samotná struktura je jednoduchá, není třeba vytvářet samostatné soubory pro soubory stylů a logiku, takže je vše přehledné a přístupné. Samozřejmě, Vue obsahuje průvodce styly, kde najdete doporučená pravidla, která je třeba při vytváření projektu dodržovat, nicméně povinných je jen několik. 

Události

V tomto případě, Vue opět přichází s praktičtějším řešením, a sice, že k vyslání události z podřízené komponenty do její nadřazené komponenty stačí (pomocí funkce Vue 3 Složení API ) převezmou metodu z objektu kontextu v nastavení a jednoduše vyvolají to, co v danou chvíli potřebujete:

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

Můžete to také provést přímo v šabloně jako reakci na jinou událost.

Na adrese Angular, je třeba nejprve definovat EventEmitter takto:

@Output() customNameForYourEmitter = new EventEmitter();

Pak je třeba zavolat metodu emit na EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Promítání slotů/obsahu

V obou frameworcích můžete snadno přesunout obsah (jednoduchý i vícenásobný) z rodičovské komponenty do jejího potomka pouhým přidáním dalšího html uvnitř značek potomka, s drobnými rozdíly:

Vue:

``` 

Angular:

Výchozí nastavení:
    

Pojmenovaný slot:
    

<p yourname>
   Jedná se o pojmenovaný slot
  </p>
  <p>Toto je výchozí slot</p>

Pokud však chcete některé části aplikace vykreslovat podmíněně, Vue je intuitivnější než Angular a umožňuje vám to udělat rychleji přidáním v-if do vaší směrnice který umožňuje vykreslit pouze ty části, které jsou aktuálně potřeba.

Zatímco ng-content se vždy vykresluje, je třeba v tomto případě použít příkaz ng-šablonaa později vytvořit vlastní směrnici:

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

@Directive({
  selector: '[customDirectiveName]'
})
exportní třída CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

a kvůli jménu, které dáváš svému ng-šablona atribut, bude Angular vědět, co se má vykreslit:

V rámci komponenty chcete také promítnout svou šablonu, která bude použita v komponentě @ContentChild získat správnou šablonu:

@ContentChild(CustomDirective) content!: CustomDirective;

Služba vs. obchod

Angular ve svém jádru vybízí k použití návrhového vzoru MVC, kde můžete pro model použít služby. Z tohoto důvodu se musíte naučit vzor vstřikování závislostí, abyste mohli volně pracovat s daty v aplikaci. Umožňuje vám oddělit vedlejší efekty vašich, tj. volání API a používat stejnou logiku v celém projektu tím, že injektujete části, které v danou chvíli potřebujete, což z něj činí také modulární přístup.

Angular je také dodáván s frameworkem Ngrx/store založeným na Redux v případě, že chcete použít reaktivnější přístup s pozorovatelnými objekty RxJs. Obsahuje Akce, které slouží k odesílání jedinečných událostí z komponent a/nebo služeb, Efekty, které zpracovávají vedlejší efekty nebo asynchronní akce, které chcete provést, a Redukce, které mutují váš stav.

Na adrese Vue, oblíbeným přístupem je použití knihovny Vuex pro správu stavu, která také obsahuje nástroje jako Actions, Mutations a Getters, stejně jako Ngrx/store, které vám pomohou spravovat a organizovat stav vaší aplikace. Můžete ji modulovat nastavením různých úložišť pro vaše pohledy, tj. uživatelské úložiště nebo úložiště košíku, ale to může vést k problémům s rozdělením názvů, pokud nepoužijete knihovnu namespaced: true v deklaraci úložiště.

Zde je porovnání přístupu založeného na službách a přístupu Vuex, kdy je úkolem načíst některé produkt údaje pro váš obchod:

@Injectable() // dekorátor, který naznačuje, že jej chceme později použít v DI
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //dělejte si s produkty, co chcete
    });
    return this.products;
  }
}

Poté do komponenty injektujeme naši službu, která se má používat:
constructor(private service: HeroService) { }

Na adrese Vue, jednoduše odešleme akci, která provede backendové volání pro nás:

store.dispatch(getAllProducts)

a v actions.ts souboru definujeme akci:

akce: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // načtení dat a vložení výsledků do úložiště
}}

Získávání dat

S Vue, můžete použít Axios/Fetch nebo jakoukoli knihovnu, kterou chcete použít, je to opravdu jednoduché - stačí zpracovat asynchronní volání pomocí slibů nebo jakéhokoli jiného přístupu, který vám nejlépe vyhovuje.

zkusit {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('proveďte, co je potřeba'))
} catch (e) {
    //vyřešit chybu
}

Angular přichází s knihovnou HttpClient, která využívá observables, což vás přivádí k další výhodě - abyste ji mohli správně používat a/nebo manipulovat s daty, musíte se naučit RxJs. Opět to může být docela zdrcující, abyste se v této abstraktní konstrukci hned na začátku plynule orientovali a cítili se s ní dobře.

Pokud chcete použít službu Axios, můžete ji použít, ale jak se píše na stránce Axios GitHub: "Axios je silně inspirován službou $http poskytovanou v Angular'

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

.pipe(
pluck('results'),
tap(console.log('proveďte zde jakýkoli vedlejší efekt, který chcete použít')
catchError((error) => {
        //obsluha chyby
})
)
.subscribe((result: ResultType[])
    //konečná operace nad daným výstupem
)
}

Shrnutí

| Vue | Angular |
| ———– | ———– |
| Netlačí na dodržování velmi přísných pravidel | Vyžaduje použití Typescriptu, komponent/služeb založených na třídách |
| Plochá křivka učení, snadné začít | Vysoká křivka učení (Typescript, RxJs, Dependency Injection) |
| Spousta věcí, které je třeba nastavit během konfigurace projektu| Není toho moc, co je třeba nastavit předem, ale umožňuje vám to vygenerovat strukturu projektu prostřednictvím konzole |
| Rámec řízený Společenstvím založený na Angular a React | Vytvořeno a spravováno společností Google |
| Není toho mnoho, je třeba nainstalovat externí knihovny| Správa stavu, HttpClient je součástí frameworku |

Přečtěte si více:

JavaScript je zcela mrtvý. Nějaký chlápek na internetu

Nasazení rozhraní API GraphQL/MongoDB pomocí funkcí Netlify

Jak zničit projekt špatnými kódovacími postupy