🥇 Przegląd głównych funkcjonalności narzędzia NX

Intro

Sprawdzimy jakie funkcjonalności ma popularne ostatnio narzędzie Nx od zespołu NRWL i przejdziemy przez najważniejsze przypadki użycia.

Wstęp

Wraz z rozwojem JavaScript zauważa się również wzrost złożoności projektów tworzonych w tym języku. Aby nadążyć za tą ewolucją wielu programistów poszukuje narzędzi, które pomogą w zarządzaniu dużymi projektami i usprawnią proces ich rozwoju.

Jednym z takich narzędzi jest NRWL Extension, w skrócie NX. W tym artykule przedstawię, czym dokładnie jest NX, jakie są jego zastosowania oraz najważniejsze funkcje.

Podstawy podstaw

Narzędzie NX (NRWL Extension) to rozwiązanie do tworzenia monorepo opracowane przez NRWL. NX zapewnia szereg funkcjonalności, które pozwalają na lepszą organizację, testowanie i dystrybucję kodu w dużych projektach opartych o różne technologie JS - Angular, React, Next.js, Nest.js i wiele innych. Narzędzie to zapewnia między innymi:

NX pozwala również na łatwą integrację z innymi narzędziami i bibliotekami, takimi jak NgRx, Storybook , itd. Dzięki temu programiści mogą korzystać z już istniejących rozwiązań i narzędzi w swoich projektach.

NX jest przydatne dla zespołów deweloperskich, które pracują nad dużymi, złożonymi projektami i chcą zwiększyć swoją produktywność poprzez automatyzację procesów i lepszą organizację kodu.

Przypadki użycia NX od NRWL

NX ma wiele przypadków użycia. Nie są to tylko duże projekty z wieloma zależnymi, współdzielonymi bibliotekami, ale też sprawdza się przy małych projektach.

Do czego można użyć tego narzędzia?

Nowe monorepo z NX

Do utworzenia nowego workspace wystarczy tak naprawdę tylko zainstalowany menedżer pakietów npm i polecenie: npx create-nx-workspace@latest, które utworzy dla nas strukturę. Pod tym linkiem znajdziesz wszystko, czego potrzebujesz. Po tej komendzie otrzymasz dostęp do wszystkich funkcjonalności z NX.

Integracja monorepo Lerna z NX

Integracja Lerna z NX pozwoli nam na:

Wystarczy zaktualizować Lerna do najnowszej wersji i w pliku konfiguracyjnym lerna.json ustawić flagę useNx na true - wideo pokazujące migrację.

Migracja z pojedynczej aplikacji Angular do NX workspace

Wystarczy zainstalować CLI poleceniem npm i @nrwl/cli -D, i wykonać w drugim kroku migrację poleceniem npx nx init.

Tworzenie pojedynczej aplikacji Angular lub w innej technologii

W tym przypadku NX daje na start projektu gotową konfigurację testów Jest, ESLint i Prettier, zapewnia mechanizm cachowania operacji oraz ograniczenia budowania kodu tylko do miejsc, w których było coś zmieniane.

Aby stworzyć dowolną aplikację wystarczy uruchomić polecenie npx create-nx-workspace@latest –preset=angular. Jeżeli chcesz wygenerować aplkację w React lub innej wspieranej przez NX technologii, to musisz podmienić wartość preset w następujący sposób: preset=react.

Tu jest lista aktualnie wspieranych technologii:

Tworzenie dowolnego projektu JS z package.json

W tym przypadku możemy skorzystać tylko z mechanizmu cachowania skryptów. Wystarczy zainstalować CLI poleceniem npm i @nrwl/cli -D.

Od tego momentu każdy skrypt skonfigurowany w pliku package.json może być cachowany przez NX, wywołując go w taki prosty sposób: npx nx [nazwa].

Core NX features

Twórcy wyszczególniają takie funkcjonalności jak:

Możliwość korzystania z dodatkowych skryptów (task executors)

Otrzymujemy wsparcie oraz konfigurację zadań w obrębie poszczególnych projektów, jak i całego monorepo. Task executors służą do automatyzacji różnych procesów, takich jak budowanie aplikacji, testowanie, aktualizowanie zależności i wiele innych.

Przykładowo możemy wywołać polecenie: nx affected:build, budujące tylko te moduły, które zostały zmodyfikowane od ostatniego buildu.

Jeżeli chcemy wywołać testy e2e w oparciu o zmienione pliki, możemy wywołać polecenie: nx affected:e2e.

Również polecenie: nx affected:lint uruchomi lintowanie tylko dla plików, które zostały zmodyfikowane od ostatniego buildu.

Te przykłady pokazują, jak task executors mogą przyspieszyć procesy developerskie poprzez skupienie się tylko na konkretnych elementach projektu, które zmieniły się od ostatniego buildu lub testowania.

Dodatkowo NX udostępnia paczkę npm @nrwl/nx-plugin, która daje nam możliwość stworzenia własnego task executora. Dzięki temu, możemy rozszerzyć funkcjonalność narzędzia NX i dostosować do własnych potrzeb.

Przechowywanie rezultatów budowania w cache (caching tasks results)

NX używa pamięci podręcznej, aby nie budować wielokrotnie kodu, który już był budowany. W kontekście tego narzędzia, współdzielenie cache oznacza, że różne biblioteki lub skrypty, które są używane w projekcie, mogą wykorzystać ten sam cache, przechowując informacje o kompilacji, skanowaniu plików, itp. Dzięki temu procesy te nie muszą być powtarzane dla każdej biblioteki czy skryptu, co przyspiesza proces budowy i zwiększa wydajność.

Jak cache działa w praktyce? Przed uruchomieniem danego zadania NX oblicza hash danej biblioteki. Jeżeli hash jest taki sam, jak w poprzednim wywołaniu, to ponownie nie wykonuje zadania, tylko bierze rezultat poprzedniego wywołania.

Jak można zoptymalizować obsługę cache?

Source code hash inputs - można określić szczegółowo, jakie pliki będą brane pod uwagę podczas budowania hash.

Runtime hash inputs - można określić dodatkowe parametry, które będą podstawiane podczas uruchamiania zadania, na podstawie których będzie budowany hash.

Współdzielenie cache (cache sharing)

Pamięć podręczna może być współdzielona pomiędzy wielu programistów, jak i narzędzia CI, w ramach usługi self-hosted oraz w chmurze NX Cloud.

Wystarczy tylko połączyć się z chmurą NX Cloud poleceniem:npx nx connect-to-nx-cloudi z wyników naszych zadań może skorzystać każdy członek zespołu.

Graf NX

Graf ten pozwala na wizualną eksplorację zależności w projektach, bibliotekach i zadaniach, które są w ramach monorepo.

Wystarczy tylko wywołać polecenie: npx nx graph.

Spowoduje to otwarcie przeglądarki i wizualizację zależności w projekcie. Przeglądanie całego wykresu może być trudne przy dużych rozwiązaniach. Dlatego NX udostępnia dodatkowe filtry, które pozwalają na zawężenie widoczności zależności. Można przetestować działanie takiego grafu pod adresem: https://nrwl-nx-examples-dep-graph.netlify.app/

Współdzielenie zasobów podczas zadań (distribute task execution)

Jest to wsparcie do delegowania zadań na wiele agentów i zrównoleglenie wykonywania ich do jeszcze efektywniejszej pracy. Funkcjonalność ta minimalizuje czas wykonywania procesów CI, wraz z zachowaniem odpowiedniej kolejności wykonywania.

Rozproszone wykonywanie zadań może działać na dowolnym dostawcy CI. Programista jest tylko odpowiedzialny za konfigurowanie zadań w swoim CI. Następnie NX Cloud koordynuje sposób, w jaki te zadania współpracują z sobą.

Integracja z IDE - NX Console jest to UI dla NX, które jest udostępniane w formie pluginów dla takich IDE, jak VS Code, WebStorm, czy Neovim.

Tu linki do wspomnianych pluginów:

https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console

https://plugins.jetbrains.com/plugin/15000-nx-webstorm

https://plugins.jetbrains.com/plugin/15101-nx-console-idea

Te pluginy nie są rozwijane przez NX Team, tylko przez kontrybutorów!

Automatyczna aktualizacja zależności

NX CLI ma polecenie migrate, które pozwala na szybką aktualizację NX i zależności takich jak Angular, React , itd.

Polecenie te przygotowuje skrypt migracyjny do wszystkich technologii, które są do aktualizacji. Następne polecenie wykonuje migracje. Na koniec wystarczy tylko usunąć plik migracyjny i zaktualizować zależności główne.

Cała migracja to tylko 4 kroki:

Wymuszenie granic zależności

Odpowiednia konfiguracja pozwala na utworzenie reguł pozwalających, lub blokujących korzystanie z danych bibliotek lub grup bibliotek przez inne.

Cała koncepcja polega na odpowiednim otagowaniu bibliotek i aplikacji:

Następnie trzeba rozpisać reguły w pliku konfiguracyjnym ESLint:

Po skonfigurowaniu reguł wystarczy wykonać polecenie nx lint, albo skonfigurować je w ramach CI i możemy być bezpieczni o odpowiednie wstrzykiwanie zależności w naszym projekcie.

Takimi grupami mogą być warstwy, albo moduły danego rozwiązania.

Podsumowanie

NX jest potężnym narzędziem do zarządzania dużymi projektami JavaScript, ale też sprawdza się przy małych projektach. Zapewnia zestaw funkcji do szybkiego i łatwego tworzenia, budowania, testowania i wdrażania aplikacji. Jest to rozwiązanie monorepo. Dzięki temu narzędziu programiści mogą szybko i łatwo opanować duże złożoności JavaScript, dzięki sprawdzonym metodom zaproponowanych przez zespół NRWL.

Jeżeli się podobało, pamiętaj odwiedzić nas na Linkedin, gdzie regularnie wrzucamy content z programowania.