Porównanie mistrzów: Angular vs Vue

Konfigurowanie projektu

Najszybszy sposób na rozpoczęcie projekt jest użycie CLI dostarczone przez autorów frameworków. Oba oferują całkiem dobrą obsługę; jednak istnieje kilka różnic, tj, Vue oferuje więcej opcji, dzięki czemu można dostosować projekt do swoich potrzeb od samego początku. Możesz wybrać Wersja VueNiezależnie od tego, czy potrzebujesz routingu. Typescript, preprocesory CSS lub skonfigurować linter. Pozwala również zdecydować, czy chcesz skonfigurować testy (jednostkowe lub E2E).

Angular jest wyposażony w generator, który umożliwia tworzenie komponentów, usług, interfejsów i dyrektyw bezpośrednio z konsoli, co z mojego doświadczenia jest bardzo przydatne, ponieważ nie ma potrzeby ręcznego konfigurowania folderów, plików i zbędnych elementów. kod ręcznie, zwłaszcza gdy używasz np. wzorca MVC. Typescript jest dostarczany z pudełka z Angular i niejako naciska, by z niego skorzystać. Jeśli jeszcze tego nie zrobiłeś, oto przydatne wprowadzenie, dlaczego powinieneś to wypróbować - możesz to sprawdzić tutaj.

Na początku, CLI Angular pyta tylko o routing lub preferowane preprocesory CSS, które w porównaniu do Vuenie pozostawia wiele miejsca na decydowanie o strukturze i stylu aplikacji. Ale jeśli zamierzasz podążać za konwencją, o którą cię prosi, CLI poprowadzi cię przez całą drogę.

Struktura projektu

Vue wykorzystuje SFC (Single File Components), co sprawia, że dla nowego programisty rozpoczęcie korzystania z frameworka i odnalezienie się w kodzie jest dość proste.

Dyrektywy

Vue jest również dostarczany po wyjęciu z pudełka z dyrektywami takimi jak `v-if, v-for`, które są bardzo intuicyjne w użyciu, ponieważ jest to prawie kopia Angular te. Vue używa tej samej konwencji dla dwukierunkowego wiązania danych (tylko poprzez poprzedzenie go, tj. v- w `v-model`) i dodanie @/v-on wskazującego, że na coś reagujemy. Angular oddziela to, wskazując, w którą stronę idziemy, używając nawiasów dla wiązania zdarzeń i nawiasów kwadratowych dla wiązania właściwości, tj. `(change), [ngStyle], [(ngModel)]`.

W VueSama struktura jest prosta, nie ma potrzeby tworzenia oddzielnych plików dla arkuszy stylów i logiki, więc wszystko jest uporządkowane i przystępne. Oczywiście, Vue zawiera przewodnik po stylach, w którym można znaleźć zalecane zasady, których należy przestrzegać podczas tworzenia projektu; jednak tylko kilka z nich jest obowiązkowych. 

Wydarzenia

W tym przypadku, Vue przychodzi ponownie z bardziej poręcznym rozwiązaniem; mianowicie, aby wyemitować zdarzenie z komponentu podrzędnego do jego rodzica, wystarczy (używając Vue 3 Skład API ) pobiera metodę z obiektu kontekstowego w konfiguracji i po prostu emituje to, czego w danej chwili potrzebujesz:

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

Można to również zrobić bezpośrednio w szablonie jako odpowiedź na inne zdarzenie.

W Angular, należy najpierw zdefiniować EventEmitter w następujący sposób:

@Output() customNameForYourEmitter = new EventEmitter();

Następnie należy wywołać metodę emitującą na EventEmitter:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

Wyświetlanie slotów/treści

W obu frameworkach można łatwo przenieść zawartość (zarówno pojedynczą, jak i wielokrotną) z komponentu nadrzędnego do jego elementu podrzędnego, po prostu dodając dodatkowy html wewnątrz tagów podrzędnych, z niewielkimi różnicami:

Vue:

`` 

Angular:

Domyślnie:
    .

Nazwany slot:
    .

<p yourname>
   Jest to nazwane gniazdo
  </p>
  <p>Jest to slot domyślny</p>

Jeśli jednak chcesz warunkowo renderować niektóre części aplikacji, Vue jest bardziej intuicyjna niż Angular i pozwala zrobić to szybciej poprzez dodanie funkcji v-if do dyrektywy <template> który umożliwia renderowanie tylko tych części, które są aktualnie potrzebne.

Podczas gdy ng-content jest zawsze renderowana, należy w tym przypadku użyć funkcji ng-template, a następnie utworzyć własną dyrektywę niestandardową:

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

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

i z powodu imienia, które nadałeś swojemu ng-template Angular będzie wiedział, co powinno zostać wyrenderowane:

Ponadto w ramach komponentu należy wyświetlić szablon, który ma być używany w aplikacji @ContentChild aby uzyskać odpowiedni szablon:

@ContentChild(CustomDirective) content!: CustomDirective;

Usługa a sklep

Angular w swoim rdzeniu zachęca do korzystania z wzorca projektowego MVC, w którym można używać usług dla modelu. Z tego powodu musisz nauczyć się wzorca wstrzykiwania zależności, aby swobodnie operować danymi w swojej aplikacji. Pozwala on oddzielić efekty uboczne wywołań API i korzystać z tej samej logiki w całym projekcie, wstrzykując te części, które są potrzebne w danym momencie, co czyni go również podejściem modułowym.

Angular jest również dostarczany z frameworkiem Ngrx/store opartym na wzorcu Redux na wypadek, gdybyś chciał zastosować bardziej reaktywne podejście z obserwowalnymi elementami RxJs. Zawiera Actions, które są używane do wysyłania unikalnych zdarzeń z komponentów i/lub usług, Effects, które obsługują efekty uboczne lub działania asynchroniczne, które chcesz wykonać oraz Reducers, które mutują twój stan.

W VuePopularnym podejściem jest użycie biblioteki Vuex do zarządzania stanem, która zawiera również narzędzia takie jak Actions, Mutations i Getters, podobnie jak Ngrx/store, aby pomóc w zarządzaniu i organizowaniu stanu aplikacji. Można je modularyzować, ustawiając różne sklepy dla widoków, np. sklep użytkownika lub sklep koszyka, ale może to prowadzić do problemów z odstępami między nazwami, chyba że użyjesz funkcji namespaced: true w deklaracji sklepu.

Oto porównanie podejścia opartego na usługach i podejścia Vuex, gdy zadaniem jest pobranie niektórych produkt dane dla Twojego sklepu:

@Injectable() // dekorator wskazujący, że chcemy go później użyć w DI
export class ProductsService {
  private products: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //zrób cokolwiek chcesz ze swoimi produktami
    });
    return this.products;
  }
}

Następnie w komponencie wstrzykujemy naszą usługę, która ma być używana:
constructor(private service: HeroService) { }

W VuePo prostu wysyłamy akcję, która wykonuje dla nas połączenie z backendem:

store.dispatch(getAllProducts)

i w actions.ts definiujemy działanie:

działania: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // pobierz dane i umieść wyniki w sklepie
}}

Pobieranie danych

Z VueMożesz użyć Axios/Fetch lub innej biblioteki, której chcesz użyć, jest to naprawdę proste - po prostu obsługujesz asynchroniczne wywołania za pomocą obietnic lub innego podejścia, które najbardziej Ci odpowiada.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('do whatever is needed'))
} catch (e) {
    /obsługa błędu
}

Angular jest dostarczany z biblioteką HttpClient, która wykorzystuje obserwowalne elementy, co prowadzi do kolejnej korzyści - aby używać go poprawnie i / lub manipulować danymi, musisz nauczyć się RxJs. Ponownie, uzyskanie płynności i zaznajomienie się z tą abstrakcyjną konstrukcją na samym początku może być dość przytłaczające.

Możesz użyć Axios, jeśli tego właśnie chcesz, ale jak mówi strona Axios GitHub: "Axios jest silnie inspirowany usługą $http dostarczoną w Angular'

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

.pipe(
pluck('results'),
tap(console.log('do whatever side effect you want to use here')
catchError((error) => {
        //obsługa błędu
})
)
.subscribe((result: ResultType[])
    //ostateczna operacja na podanych danych wyjściowych
)
}

Podsumowanie

| Vue | Angular |
| ———– | ———– |
| Nie zmusza do przestrzegania bardzo rygorystycznych zasad | Wymaga użycia Typescript, komponentów/usług opartych na klasach |
| Płaska krzywa uczenia się, łatwa do rozpoczęcia | Wysoka krzywa uczenia się (Typescript, RxJs, Dependency Injection) |
| Wiele rzeczy do skonfigurowania podczas konfiguracji projektu | Niewiele do ustawienia z góry, ale pozwala wygenerować strukturę projektu za pomocą konsoli |
| Społecznościowy framework oparty na Angular i React | Stworzony i utrzymywany przez Google |
| Niewiele jest dołączonych, trzeba zainstalować zewnętrzne biblioteki| Zarządzanie stanem, HttpClient dołączony do frameworka |

Czytaj więcej:

JavaScript jest całkowicie martwy. Jakiś koleś w internecie

Wdrażanie API GraphQL/MongoDB przy użyciu funkcji Netlify

Jak zabić projekt złymi praktykami kodowania?