Ten setup zniszczy Twój monolit – NX + Micro Frontendy w 2025 🤯

Siema, siema, Frontendowe Świry. Witamy Was na Frontendowej Siłowni. Ja nazywam się Aleksander Lubych. Ja nazywam się Jakub Pawlak. Zapraszamy. Po takim wstępie, Jakub, myślę, że wszystko jest jasne, prawda? Raczej nie. Nie. Dawaj. Rozumiem, o co chodzi. Pewnie, że nie. Słuchajcie, mieliśmy taki pomysł, żeby Wam zaserwować troszeczkę więcej... Masy. Masy, tak. Czyli więcej takiego contentu, który będzie bardziej treściwy, nie tylko przegadany. Białko. Samy białeczko, dokładnie, same białeczko. Nie ma upierdalania się. Ciebie iść na silownię. Tak jak już wspomnieliśmy w poprzednim odcinku, rozpoczynamy taką serię. Nie wiemy jeszcze, jak długo będzie trwać, ale prawdopodobnie siedem odcinków.

Aż siedem, bo tyle jest dni w tygodniu. Aż się zmęczymy. Proszę bardzo. Dokładnie. Siedem merytorycznych, proszę bardzo, merytorycznych odcinków. To się jeszcze okaże. Tak, zobaczymy po waszych komentarzach. Ale plan jest prosty. Chcielibyśmy przejść przez pewne zagadnienia, które nas jarają, ale troszkę głębiej. I dziś będziemy mieć rozgrzeweczkę w postaci postawienia NX-a, czyli Monorepo NX-owe, razem z Micro Frontendami. Oprócz tego, przejdziemy troszkę jeszcze przez to, jak wygląda NX-owy graf i spojrzymy sobie na ES linta Pretiera, czyli to, co nam NX daje od razu, a co jest dość potężne i dość ważne. Subiektywny Frontend.

To zanim przejdziemy do kodu, chcielibyśmy Wam pokazać tylko, do czego dążymy. Chcielibyśmy mieć Shella, czyli aplikację hosta i dwie aplikacje Micro Frontendowe. To przejdźmy do kodu. I tutaj zrobimy małe oszustwo, bo nie będziemy tego wywoływać, bo to chwilę trwa, a to jest wszystko dobrze udokumentowane, czyli jak postawić NXowe monorepo. Wystarczy w terminalu wpisać tą piękną komendę Create NX Workspace. Następnie zostaniemy zapytani o parę rzeczy i w zasadzie tutaj wybierajcie co chcecie. My oczywiście wybraliśmy sobie angularową aplikację plus Jesta, pominęliśmy testy end-to-end i wylądowaliśmy z takim oto projektem.

Warto zauważyć, mamy w kilku kliknięciach bardzo potężny setup, który tak naprawdę nie wymagał zbyt wiele od nas. To patrz teraz. Teraz wpiszemy magiczną komendę. Ciach. I generujemy cały setup Micro Frontendów. Tak. I zwróćcie uwagę, jak ta komenda wygląda. Wskazujemy tutaj, jakiej technologii ma być host. Automatycznie będzie taka sama technologia wybrana dla Micro Frontendów. Oczywiście wskazujemy, jak się ma nazywać host, czyli w naszym wypadku to jest Shell, a remote, czyli Micro Frontend, będą się nazywać Dashboard i Settings.

No i teraz wchodzimy sobie na naszą aplikację i wita nas Shell. I mamy tutaj Dashboard i mamy nasz Settings, czyli wszystkie Micro Frontendy działają. Tutaj widzicie po prawo Network, czyli Inspektor Chroma i przefiltrowujemy po czymś takim, co się nazywa Remote. To jest taki pliczek dla Module Federation, który zawiera w zasadzie definicję tego, co tam w tym naszym Micro Frontendzie siedzi. I możecie zauważyć, że jestem aktualnie na localhostie 4200, tak jak defaultowy localhost dla angularowej aplikacji, ale Remote Entry został załadowany z hosta. 4201, a kolejne Remote Entry 4202. I to są nasze Micro Frontendy.

Czyli mamy Settings i mamy Dashboard. Poszło bezproblemowo. No problemo. Dokładnie tak. Tutaj zapewne jakbyśmy weszli sobie teraz w nasz dashboard i Project JSON i sobie poszukamy porta. O, proszę bardzo, jest i port 4201. Czyli NX ogarnął sobie tym jednym servem od razu też nasze dependencje. Czyli jak widać, NX-owy CLI rządzi w jednych dwóch komendach w zasadzie. Po pierwsze postawiliśmy repozytorium, a potem mieliśmy już działający setup dla Micro Frontendowej architektury. A teraz chcielibyśmy zerknąć na to, czym jest NX Graph. No dobra, to odpalamy sobie nasz nowy, nową zakładkę w terminalu i odpalmy Grapha.

I co on robi, Aleksie? Module Boundaries pozwala nam blokować właśnie niechciane zależności, żeby jasno kontrolować, które warstwy, które rzeczy mogą od siebie zależeć. No dobra, no to wszedłem w nasz ESLint Config, który NX wygenerował dla mnie i widzę tutaj taką regułę NX i Enforce Module Boundaries. I to jest dokładnie to, o co nam tutaj chodzi. Mamy tutaj taki atrybut depconstraints i to, co będziemy chcieli teraz zrobić, to zablokujemy możliwość importowania shell configa w innych naszych remote'ach, ponieważ NX wygenerował nam trzy piękne aplikacje, ale jedna z nich jest hostem, a dwie pozostałe są remote'ami, czyli są micro frontendami i one nie powinny wiedzieć nic o sobie, ani też nie powinny wiedzieć nic o

Możemy dodać tutaj remote. Tak jest. To zróbmy jeszcze raz linter. No i dalej coś. Coś nam krzyczy. Coś nam krzyczy. Zobaczmy, co nam krzyczy. Dashboard, project, tag with remote, on remote. Zobaczmy. Nasz lint wykrył, że jest jakaś zależność w remoncie do liby, które są przeznaczone tylko dla shell'a. I to jest dokładnie to, dlaczego te module bundles robimy. Teraz spójrzmy na nasz graf. Tak jak Jakub wcześniej wspomniał, to nie jest to, do czego dążymy. Nie chcemy mieć circular dependencies, nie chcemy mieć ukrytych dependencji pomiędzy shell'em a micro frontend'em.

Stąd Taka dependencja powinna być usunięta. No dobra, no to usuwamy. Poszło. I robimy jeszcze raz lint. Ciach. Udało się. Naprawiliśmy nasze repo. Oczywiście ten komponent musi być stworzony w inny sposób, albo musi być zduplowany, albo musi być... I pamiętajcie, Zdublowanie kodu nie jest zawsze tragiczne, prawda? Szczególnie jak mamy takie przypadki, gdzie chcemy mieć niezależność i separację, odpowiedzialność. No dobra, no to w takim razie mamy NX Workspace, mamy Micro Frontendy, mamy Hosty, mamy Remoty, NX Graph, S-Lint.

Nie wspomnieliśmy o Pretierze, chociaż coś tam wspomniałem chyba, co nam wygenerował. No ale to w zasadzie po prostu mamy od NX-a dostajemy parę rzeczy, których NX-owy team uznał, że są istotne dla projektu. Znaczy to, co chcieliśmy właśnie wspomnieć, to jest to, że on jest dany od razu i można go sobie dokonfigurować bez żadnych ekstra konfiguracji, tak? Czyli po prostu on jest i nie trzeba w żaden sposób go zapinać. Tak. I nie ma sensu się kłócić, czy używamy pojedynczych cudzysłowów czy podwójnych. Więc warto Reitera używać. To tyle jeżeli chodzi o naszą rozgrzyweczkę na naszej Frontendowej Siłowni. Oczywiście będziemy robić to co miesiąc przez prawdopodobnie 7 miesięcy.

Co najmniej. Zobaczymy. Taki jest plan. No i zobaczymy oczywiście, jak to się spodoba i jak nam to będzie wychodzić. No i jeśli macie jakieś tematy, które chcecie rozwinąć, to to jest dobry moment, żeby wrzucić komentarz i na pewno to rozważymy. Nie powiem, że to zrobimy, ale na pewno spojrzymy na ten komentarz. Dokładnie. Tematy, które lubimy, to NX, Micro Frontendy, Module Federation, Single Spa. Tak, czyli wybierajcie dowolny temat, byle to był jeden z tych, co Alex wymienił. Dokładnie tak. Dzięki i do zobaczenia następnym razem. Dzięki, hej!

Siema mordeczki, dzisiaj wbijamy na Frontendową Siłkę. To samo. Słyszysz? A, to jest Subiektywny Frontend. To by było.