20 lis 2020
5 min

Przywitaj NAN Stack

React z Express i Angular z NestJS

Najpopularniejszym frameworkiem dla Node.js jest wciąż Express.js. Po stronie frontendu jest trzech królów: Angular, React, i Vue. Po dodaniu najpopularniejszej bazy NoSQL, MongoDb, dostajemy kombinację najczęściej spotykanych stacków dla JavaScript deweloperów: MEAN, MERN, and MEVN.

Możemy znaleźć wiele podobieństw pomiędzy React i Express. Obydwa rozwiązania są minimalistyczne, bazujące na JavaScript oraz udostępniają tylko najważniejsze funkcjonalności w swojej głównej paczce. Oferują dużą elastyczność w doborze narzędzi i w strukturyzacji aplikacji.

Dla Angular odpowiednikiem po stronie serwera jest NestJS, którego twórcy silnie inspirowali się rozwiązaniami od kolegów z Google podczas prac nad swoim projektem.

To co Angular i Nest mają wspólnego oraz co jednocześnie wyróżnia je od poprzedniego zestawu to:

  • Użycie TypeScriptu jako główny język
  • Szerokie zastosowanie dekoratorów
  • System wstrzykiwania zależności oparty na modułach (z importowaniem, eksportowaniem i definiowaniem dostawców)
  • Zestaw oficjalnie wspieranych dodatkowych bibliotek
  • Główna biblioteka z dużą ilością funkcjonalności gotowych do użycia
  • CLI

Każde z tych podejść ma swoje plusy i minusy. Największym błędem jest mieszanie różnych filozofii w jednym zestawie technologicznym – o ile elementy zestawu MERN pasują do siebie całkiem dobrze, o tyle nie można tego samego powiedzieć o MEAN.

Dlatego chcę zaproponować znacznie lepszą alternatywę: NAN.

NAN

NAN jest połączeniem trzech technologii: NestJS, Angular i Nx. Naturalne połączenie NestJS i Angular zostało opisane powyżej. Nx jest zestawem narzędzi do pomocy w pracy z monorepo, ale jest także bardzo przydatny przy tworzeniu pojedynczych, złożonych aplikacji. Dla full-stack dewelopera możliwość współdzielenia kodu, narzędzi oraz repozytorium pomiędzy backendem i frontendem jest nieoceniona – Nx nam to oferuje (i znacznie więcej).

Co więcej, w nrwl także zauważono zależności opisane wyżej i dodano możliwość tworzenia projektów w zestawie Angular-Nest lub React-Express.

Relacyjne bazy danych nie zniknęły

Ostatnią ważną różnicą pomiędzy NAN i MEAN jest pominięcie bazy danych. Zawarcie jednej w nowym zestawie byłoby niepotrzebnym ograniczeniem. Dobry backend lub fullstack deweloper powinien być zaznajomiony z bazami NoSQL oraz tradycyjnymi – relacyjnymi. Co ważniejsze, powinien móc świadomie wybrać odpowiednią bazę danych do wymagań projektowych i jego zestaw technologiczny nie powinien być tutaj dyskryminatorem.

Mam tutaj na myśli fakt, że każdy deweloper Node.js jest na pewno świadom, że NoSQL nie jest odpowiednie do pewnych typów aplikacji (np. z dużą ilością obliczeń) i powinien uprzedzić zleceniodawcę, że inna technologia mogłaby się w tym miejscu lepiej sprawdzić. Nawet jeśli NoSQL jest jedyną technologią bazodanową jaką znasz, jej zastosowanie w projekcie powinno być sensownie poparte.

Podsumowanie

MEAN zyskał niesamowitą popularność, posiada parę wariantów oraz utorował ścieżkę, którą podążyło wiele firm i deweloperów przy wyborze technologii, w których będą się specjalizować. Jednakże, aktualnie mamy godnego następcę do którego ci, którzy doceniają styl Angulara i NestJSa, zdecydowanie powinni rozważyć przejść. Wierzę że NAN zyska taką samą popularność jak MEAN, wprowadzi usprawnienia oraz zajmie należne mu miejsce w środowisku JavaScript.

Najczęściej zadawane pytania

Czym jest stack NAN i z jakich technologii się składa?

NAN to zestaw technologii łączący NestJS po stronie serwera, Angular po stronie frontendu oraz Nx jako narzędzie do zarządzania monorepo. Nx sprawdza się też przy pojedynczych, złożonych aplikacjach. Oba główne elementy, NestJS i Angular, opierają się na TypeScript, dekoratorach i systemie wstrzykiwania zależności opartym na modułach, dzięki czemu tworzą spójną całość. Stack jest proponowany jako alternatywa dla MEAN.

Jak Nx umożliwia współdzielenie kodu między NestJS a Angular?

Nx pozwala trzymać backend NestJS i frontend Angular w jednym repozytorium oraz współdzielić między nimi kod, narzędzia i konfigurację. Dla full-stack dewelopera ta możliwość jest bardzo wygodna. Nx oferuje też możliwość tworzenia projektów w zestawach Angular-Nest oraz React-Express, co ułatwia start nowej aplikacji w jednym workspace.

Czym różni się stack NAN od MEAN?

Główna różnica polega na tym, że stack NAN nie zawiera bazy danych, a MEAN zakłada MongoDB jako swój element. NAN opiera się na NestJS, Angular i Nx, a MEAN na Express.js, Angular i Node.js. Autor uważa, że mieszanie różnych filozofii w jednym zestawie, jak w MEAN, jest największym błędem, ponieważ Express i Angular wychodzą z odmiennych założeń.

Czy w stacku NAN muszę używać MongoDB lub innej bazy NoSQL?

Nie, stack NAN celowo nie narzuca żadnej bazy danych, a wybór należy do dewelopera. Relacyjne bazy nie zniknęły i są równie uprawnione jak NoSQL. Warto świadomie dobrać bazę do wymagań projektu, ponieważ NoSQL nie nadaje się do wszystkich typów aplikacji, na przykład tych z dużą ilością obliczeń.

Jakie cechy wspólne mają Angular i NestJS?

Angular i NestJS używają TypeScript jako głównego języka i szeroko korzystają z dekoratorów, na przykład @Module(). Oba mają system wstrzykiwania zależności oparty na modułach, z importowaniem, eksportowaniem i definiowaniem dostawców. Dodatkowo oferują oficjalnie wspierane biblioteki, rozbudowaną bibliotekę główną oraz CLI. Ta zbieżność wynika z inspiracji, jakie twórcy NestJS czerpali z rozwiązań Google.

Podziel się artykułem

Zapisz się na nasz newsletter

Dołącz do community Angular.love i bądź na bieżąco z trendami.