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

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.

K***a, oczywiście, że tak. No dobra, no to idziemy dalej w takim razie. Shell Config w sumie jest fajnym komponentem, więc dodajmy go jeszcze do dashboardu, bo czemu by nie, skoro to jest Config. No i wszystko się share'uje, prawda? No właśnie, to Config jest w końcu. To config możemy używać w kilku różnych miejscach. No i... Proszę bardzo. Proszę bardzo. I wszystko jest. Więc NX Graph jest super fajnym narzędziem, tylko czy naprawdę shell config powinien być zależnością dla dashboarda? No dobra, no to może w takim razie spróbujmy zgłębić temat Module Boundaries. Module Boundaries to jest taki w zasadzie eslintowy plugin od NX-a.

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.

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!