Powody

• Dostępna jest nowa wersja Nuxta (Nuxt 3), która jest wygodniejsza i wymaga mniej konfiguracji
• Nuxt 3 wymaga Vue 3
• Oba poprawiają DX i łatwość konserwacji w czasie
• Ostatnie i ważniejsze: Vue 2 nie będzie już otrzymywać wsparcia od wersji 7

• Architektura
• Problem
• Strategia
• Przepływ pracy
• Inne uwagi

Zobaczmy, co mamy:

Jest to dość powszechna dystrybucja mikro-frontendu, składająca się z 3 warstw:

• Warstwa 1 lub warstwa główna udostępnia moduły użytkownikowi w jednym oknie.
• Warstwa 2 lub warstwa modułów zawiera różne domeny lub moduły z naszej aplikacji, płatności, blogów i tak dalej.
• Warstwa 3 lub warstwa wspólna jest odpowiedzialna za udostępnianie kodu wielokrotnego użytku w ramach modułów. Tutaj możemy znaleźć na przykład nasze systemy projektowe i narzędzia międzymodułowe.

Używamy federacji modułów (MF) , aby udostępniać i wykorzystywać kod między repozytoriami przy użyciu wzorca „zdalnego” i „hosta” , w którym zdalny udostępnia kod, a host używa go tak, jakby pochodził od siebie.

Problem

Chociaż Federacja Modułów ujawnia ogromny potencjał, ma również słabość: prowadzi nas do ściśle powiązanej architektury mikro-frontendu:

Jeśli zaktualizujemy wspólną zależność między dowolnym repozytorium, możemy zepsuć całą aplikację

Dzieje się tak zwłaszcza w przypadku korzystania z różnych wersji Vue, gdy przechodzimy z wersji 2 do wersji 3.

Strategia

Zobaczmy więc, jakie mamy opcje:

1. Udostępniaj komponenty na zdalnym komputerze jako komponenty sieciowe, aby host odbierał je jako kod natywny i niezależny od struktury.
2. Uaktualnij do Vue 3 i użyj pakietu kompatybilności, który obsługuje wewnątrz niego kod Vue 2.

• ułatwiają przyszłe aktualizacje bez konieczności ponownego pisania konfiguracji Web Component
• umożliwia aktualizację repozytoriów w warstwach 2 i 3 bez określonej kolejności
• pozwala na użycie różnych frameworków w razie potrzeby

Uwaga: Vue 3 rozwiązało problem stylów i tej opcji nie należy rezygnować z przyszłych aktualizacji

Biorąc to pod uwagę, proces należy podzielić na 2 etapy:

Scena 1

Użyj pakietu zgodności w każdym repozytorium od góry do dołu

Etap 2

Uaktualnij repozytoria od dołu do góry do stylu Vue 3 i usuń pakiety zgodności, gdy nie są wymagane

Przepływ pracy

W tym samym czasie, gdy pracujemy w procesie migracji, powinniśmy pozwolić innym zespołom na ciągły przepływ pracy nad ich normalnymi zadaniami, ponownie mamy 2 opcje:

1. dokonać migracji wewnątrz bieżącego repozytorium przez nową gałąź
2. stworzyć nowe repozytorium i stopniowo migrować nasz kod

Zalety

• Nie wymaga budowy nowej infrastruktury, ponieważ korzystamy z tego, co mamy

• gdy inne zespoły wprowadzają funkcje, jesteśmy skłonni poświęcić przyzwoitą ilość czasu na rozwiązywanie konfliktów, gdy przenosimy je do naszego oddziału migracji
• sprawdzamy czy działa dopiero gdy na końcu połączymy naszą gałąź
• jesteśmy odizolowani od pracy innych zespołów

Drugie podejście

Zalety:

• kiedy przenosimy kod do nowego repozytorium usuwamy go ze starego zmniejszając liczbę konfliktów
• zwiększenie współpracy: inne zespoły mogą realizować swoje zadania w nowym repozytorium
• szybko upewniamy się, że nasze nowe repozytorium działa, ponieważ używamy go równolegle ze starym

• wymaga odwrotnego proxy wskazującego na stare lub nowe repozytorium
• wymaga zbudowania nowego automatycznego potoku dla nowego repozytorium
• programiści powinni używać 2 repozytoriów dla tego samego projektu

W naszym przypadku jesteśmy wieloma zespołami pracującymi nad całą architekturą i mamy już zaimplementowane odwrotne proxy, więc dodatkowym wysiłkiem byłoby zbudowanie nowego potoku dla nowego repozytorium iz tego powodu jest to nasza droga.

Inne uwagi

Pakowacz

Używamy Webpack 5 we wszystkich naszych repozytoriach, ale w tej chwili w Internecie jest niewiele informacji o tym, jak go używać w aplikacji Nuxt 3. Ponieważ Vite jest opcją domyślną i oferuje lepsze wrażenia dla programistów, wybraliśmy tę.

Aktualizacja wersji węzła

Obecnie używamy Node 14, ale Nuxt i Vue 3 wymagają wersji 16 lub wyższej, będziemy używać wersji 18.

Wnioski

Ponieważ jesteśmy średniej wielkości zespołem i korzystamy z wielu zależności w naszej aplikacji, postanowiliśmy:

1. Użyj pakietu zgodności, aby zaktualizować nasz kod
2. Twórz nowe repozytoria, aby migrować stopniowo i wspólnie
3. W trakcie aktualizacji naszej wersji węzła i zastąpienia Webpacka Vite

• Vuemastery — kompilacja migracyjna Vue 3
• fingo — Strangler Pattern: jak udusić swój dotychczasowy system
• harlanzw — Uproszczona migracja Nuxt 3: Ściągawka
• Nuxt 3 — Rozpocznij
• Nuxt 3 — Przewodnik
• Nuxt 3 — API
• Vue 3 — Kompilacja migracyjna

Narzędzie typu open source firmy Bit pomaga ponad 250 000 programistów w tworzeniu aplikacji z komponentami.

Zmień dowolny interfejs użytkownika, funkcję lub stronę w komponent wielokrotnego użytku — i udostępnij go w swoich aplikacjach. Łatwiej jest współpracować i szybciej tworzyć.

→ Dowiedz się więcej

Podziel aplikacje na komponenty, aby ułatwić tworzenie aplikacji i cieszyć się najlepszymi doświadczeniami dla żądanych przepływów pracy:

→ Mikrofrontendy

→ System projektowania

→ Udostępnianie kodu i ponowne wykorzystywanie

→ Monorepo

Ucz się więcej: