Case study migracji do Vue 3: przejście z Vue 2 na Vue 3

Od redakcji: To case study zostało pierwotnie opublikowane w 2023 roku, gdy Monterail migrował aplikację internetową Systems Engineering z Vue 2 do Vue 3. Zaktualizowaliśmy je w październiku 2026 roku, aby poprawić przejrzystość i strukturę. Szczegóły projektu i wnioski pozostają bez zmian.

W 2023 roku deweloperzy Monterail przenieśli rozbudowaną aplikację internetową Systems Engineering, opartą w dużej mierze na TypeScript, z Vue 2 do Vue 3. Zespół rozpoczął prace w czerwcu, kilka miesięcy przed końcem wsparcia Vue 2, który przypadał na 31 grudnia 2023 roku, i prowadził je stopniowo: wersja aplikacji w Vue 3 powstawała równolegle do tej działającej produkcyjnie, więc rozwój funkcji nie musiał się zatrzymywać. Efektem był czystszy, szybszy i łatwiejszy w utrzymaniu front-end oraz baza kodu gotowa na kolejne lata.

Od lat Monterail tworzy dynamiczne, wydajne aplikacje internetowe w Vue.js dla firm z różnych branż. Jako oficjalny partner Vue.js często jesteśmy zespołem, do którego organizacje zgłaszają się, gdy chcą przejść z Vue 2 na Vue 3. Zaczęliśmy od serii pytań i odpowiedzi, w której nasi eksperci wyjaśniali, kiedy i jak zaktualizować aplikację Vue. Ten artykuł rozwija tamten temat i pokazuje rzeczywistą migrację, którą przeprowadziliśmy dla naszego wieloletniego partnera, Systems Engineering. Niezależnie od tego, czy planujesz własną migrację, analizujesz korzyści, czy porównujesz wyzwania i rozwiązania związane z migracją do Vue 3 w różnych firmach, znajdziesz tu problemy, z którymi się mierzyliśmy, kroki, które podjęliśmy, i wnioski, które warto zabrać ze sobą.

Dlaczego firmy powinny przejść z Vue 2 na Vue 3?

Vue 3 jest szybsze i łatwiej je skalować oraz utrzymywać niż Vue 2, a od 31 grudnia 2023 roku to jedyna główna wersja Vue, która nadal otrzymuje aktualizacje. Vue 2 nie otrzymuje już aktualizacji, w tym poprawek bezpieczeństwa i zgodności z przeglądarkami. Dla każdej firmy, której aplikacje internetowe działają na Vue.js, aktualizacja oznacza większą wydajność aplikacji i wyższą produktywność deweloperów. Oto dlaczego firmy i konsultanci Vue.js rekomendują ten krok.

Szybsze renderowanie i lepsza wydajność działania

Vue 3 ma przebudowany silnik renderowania i ulepszone mechanizmy optymalizacji, które przekładają się na szybsze renderowanie i lepszą wydajność działania. Największe znaczenie ma to w aplikacjach ze złożonym interfejsem lub dużą skalą interakcji użytkowników, gdzie daje płynniejsze doświadczenie przy mniejszym narzucie.

Composition API i lepsza organizacja kodu

Composition API to nowy sposób pisania i porządkowania logiki komponentów. W Options API z Vue 2 kod komponentu jest podzielony według typów opcji. Composition API pozwala zamiast tego grupować powiązaną logikę razem, dzięki czemu baza kodu jest łatwiejsza do czytania, utrzymania i skalowania. To szczególnie cenna zmiana dla zespołów pracujących nad dużymi aplikacjami oraz dla deweloperów, którzy chcą współdzielić logikę wielokrotnego użytku między komponentami.

Mocniejsze wsparcie dla TypeScript

Vue 3 zostało przepisane w TypeScript, dlatego oferuje lepsze wnioskowanie typów, czytelniejsze typowanie i wygodniejszą pracę zespołom tworzącym aplikacje bezpieczne typowo. W miarę jak TypeScript staje się coraz powszechniejszy w tworzeniu aplikacji internetowych, takie wsparcie upraszcza pracę i zwiększa produktywność deweloperów.

Mniejsze bund­le i system reaktywności oparty na proxy

Modułowa architektura Vue 3 pozwala zmniejszyć rozmiar bundli, co bezpośrednio poprawia wydajność wszędzie tam, gdzie czas ładowania ma kluczowe znaczenie. System reaktywności został przebudowany w oparciu o proxy JavaScript, dzięki czemu stan reaktywny jest bardziej intuicyjny i wydajniejszy w obsłudze. To oznacza mniej pułapek, łatwiejsze debugowanie i sprawniejszą pracę nad aplikacją.

Co te zmiany oznaczają dla biznesu?

Migracja do Vue 3 to nie tylko nowe funkcje. Chodzi o to, by twoja technologia nadążała za nowoczesnym tworzeniem aplikacji internetowych i pozwalała ci utrzymać konkurencyjność.

Czym zajmuje się Systems Engineering i dlaczego potrzebowali migracji do Vue 3?

Systems Engineering to duńska firma, która tworzy produkt pozwalający łączyć wszystkie dyscypliny inżynieryjne w jednej wspólnej strukturze systemu. Do 2023 roku Monterail współpracował z nią już od czterech lat, a zbliżający się koniec wsparcia Vue 2 sprawił, że migracja aplikacji internetowej stała się priorytetem.

Firma zaczynała jako zespół konsultantów realizujących projekty z zakresu inżynierii systemów. Z czasem stworzyła i wprowadziła na rynek własną aplikację. O tworzeniu tego produktu pisaliśmy w osobnym case study Systems Engineering, pokazując, jak Monterail przepisał firmowy prototyp w Ruby na gotową do działania w chmurze aplikację klasy enterprise, z platformą internetową w Vue.js i aplikacją mobilną w React Native.

Korzystanie z produktu wymaga intensywnej komunikacji między członkami zespołu, tak aby wszyscy mogli współpracować nad tą samą strukturą systemu. Ta struktura jest następnie wizualizowana w oprogramowaniu dla konkretnych dyscyplin, takim jak schematy elektryczne czy narzędzia do rysunku 3D, a wszystko trafia do jednej całości w aplikacji Systems Engineering.

Dlaczego migracja ruszyła w czerwcu 2023 roku?

Vue 2 osiągnęło koniec wsparcia 31 grudnia 2023 roku, po czym przestało być rozwijane i wspierane. Systems Engineering zwróciło się do Monterail po konsultacje dotyczące migracji do Vue 3, aby przygotować aplikację na przyszłość. Zespół rozpoczął prace w czerwcu 2023 roku, by zachować jak największy wpływ na decyzje i zostawić sobie odpowiednio dużo czasu przed grudniowym terminem. Po stronie Monterail dostępne były odpowiednie zasoby, więc można było od razu ruszać.

Migracja była też okazją, by zająć się wymaganiami technicznymi i poprawić jakość oraz skalowalność produktu.

Jakie wyzwania techniczne pojawiły się przy migracji z Vue 2 do Vue 3?

Na prace techniczne wpłynęły trzy kwestie: rozbudowana baza kodu TypeScript, ekosystem, który musiał być w pełni zgodny z Vue 3, oraz wzorce z czasów Vue 2, takie jak portale, które Vue 3 zastępuje natywnie. Każda z nich okazała się równie dużą szansą, co wyzwaniem.

Duży produkt mocno oparty na TypeScript

Systems Engineering to rozbudowany produkt cyfrowy, w dużej mierze oparty na TypeScript. Na szczęście wsparcie dla TypeScript to jedna z największych zalet Vue 3, więc zespół wiedział, że ten obszar migracji będzie dobrze zaopiekowany.

Przejście do ekosystemu wyłącznie dla Vue 3

Jednym z największych wyzwań technicznych, a zarazem szans, było to, że po migracji aplikacja musiała korzystać wyłącznie z ekosystemu Vue 3, razem z jego bibliotekami i komponentami. Dotyczyło to także Vuetify, frameworka open source z komponentami UI dla Vue, który niedawno został przepisany tak, by działał z Vue 3. Zależności zostały przepisane specjalnie pod Vue 3, aby zapewnić zgodność. Vue 3 wprowadza też kilka zmian w mechanice renderowania DOM, które mogą łatwo poprawić wydajność każdej aplikacji.

Zastąpienie portali natywnym Teleportem z Vue 3

Aplikacja Systems Engineering intensywnie korzysta z portali. Vue 3 ma natywny komponent Teleport, który renderuje część szablonu komponentu w węźle DOM znajdującym się poza hierarchią tego komponentu. Dzięki temu zespół mógł zrezygnować z portali i usunąć kolejną zależność. Bez dodatkowej paczki do pobrania bundle są zwykle mniejsze, a aplikacja w mniejszym stopniu opiera się na zewnętrznych zależnościach.

Ponowne wykorzystanie kodu dzięki Composition API

Dzięki Vue 3 zespół mógł też oprzeć się na Composition API, by ponownie wykorzystywać fragmenty kodu, co uprościło utrzymanie aplikacji.

Jakie korzyści biznesowe przyniosła migracja do Vue 3?

Korzyści z migracji wykraczały daleko poza samą zgodność. Systems Engineering zyskało czystszą bazę kodu, wydajniejszy produkt i front-end przygotowany do skalowania. Była to też dla zespołu okazja, by zrobić krok wstecz, ocenić istniejącą bazę kodu i wprowadzić usprawnienia, które bezpośrednio przełożyły się na wartość biznesową.

Rzadka okazja, by przejrzeć cały front-end

W większości produktów deweloperzy skupiają się na dostarczaniu funkcji pod presją krótkich terminów, co może prowadzić do kompromisów w jakości kodu albo narastania długu technicznego. Migracja dała zespołowi rzadką okazję, by przejrzeć każdy element front-endu aplikacji. Wykorzystali ją, aby:

• Zidentyfikować niespójności: Ujednolicili bazę kodu między komponentami i sprawili, że stała się bardziej przewidywalna.

• Naprawić długo istniejące błędy: Namierzyli i usunęli mniejsze błędy oraz problemy, które w codziennej pracy nad produktem były pomijane albo odkładane na później.

• Przeprowadzić refaktoryzację kodu legacy: Zastąpili starsze, mniej wydajne wzorce kodu nowoczesnym podejściem możliwym dzięki Vue 3, takim jak Composition API i nowy system reaktywności.

Wymierna poprawa jakości produktu

Dzięki przejściu na wydajniejszy framework i stosowaniu dobrych praktyk migracji do Vue 3 zespół osiągnął:

• Lepsze doświadczenie użytkownika: Mniejsze bundle i zoptymalizowany silnik renderowania poprawiły wydajność aplikacji, skróciły czas ładowania i zapewniły płynniejsze interakcje użytkownikom końcowym. To bezpośrednio wpłynęło na satysfakcję i retencję użytkowników.

• Funkcje przygotowane na przyszłość: Composition API pozwoliło zespołowi wprowadzić lepiej uporządkowany kod, który łatwiej wykorzystywać ponownie, dzięki czemu kolejne funkcje i aktualizacje można dodawać prościej.

Długoterminowe korzyści biznesowe

Modernizacja architektury front-endu pozwoliła przygotować produkt do utrzymania konkurencyjności w szybko zmieniającym się krajobrazie technologicznym:

• Skalowalność: Composition API umożliwia modularny, skalowalny kod, który może rosnąć razem z produktem, nie stając się nadmiernie złożony. Aplikacja może przyjmować większe obciążenie lub nową funkcjonalność przy minimalnym wysiłku.

• Efektywność deweloperów: Lepsze wsparcie dla TypeScript i nowoczesna składnia przyspieszyły tworzenie oprogramowania i zwiększyły jego przewidywalność, dzięki czemu zespół mógł szybciej wdrażać aktualizacje i robić to z większą pewnością. To przyspieszyło rozwój funkcji i obniżyło koszty debugowania oraz długu technicznego.

• Lepsze narzędzia i integracja z ekosystemem: Vue 3 jest zgodne z nowoczesnymi standardami webowymi i współpracuje z najnowocześniejszymi narzędziami, takimi jak Vite, które przyspiesza kompilację. Dzięki temu zespół zyskał dostęp do najnowszych technologii, co poprawiło zarówno jego sposób pracy, jak i sam produkt.

Jak zespół krok po kroku przeprowadził migrację z Vue 2 do Vue 3?

Zespół podzielił migrację na cztery etapy i prowadził ją stopniowo, równolegle z bieżącym rozwojem, co pozwoliło działać szybko. Jeden z deweloperów zespołu wewnętrznego przygotował zarys przejścia. Dobrze napisana instrukcja migracji od zespołu Vue sprawiła, że deweloperom Monterail i Systems Engineering łatwo było przejść przez cały proces.

1. Audyt bazy kodu: Oszacowali złożoność produktu i zaplanowali prace.

2. Compat build dla Vue 3: Uruchomili aplikację na migration buildzie Vue 3, co pomogło im pozbyć się błędów kompilatora i błędów pojawiających się na etapie budowania.

3. Aktualizacja zależności: Upewnili się, że każda zależność będzie działać z Vue 3.

4. Testy i QA: Przetestowali zaktualizowaną wersję aplikacji, a potem naprawili wszystkie wykryte błędy.

Jak zespół uniknął zakłóceń w bieżącym rozwoju produktu?

Zespół nie chciał, aby migracja zakłócała bieżące prace, dlatego zastosował podejście stopniowe i utrzymywał równolegle dwie wersje aplikacji. Wersja w Vue 3 miała zastąpić wersję w Vue 2, gdy będzie gotowa do wdrożenia. To podejście pozwoliło utrzymać tempo prac rozwojowych, a jednocześnie położyć fundamenty pod bardziej solidny i wydajniejszy system.

Co było największym wyzwaniem?

Największym wyzwaniem było zbadanie problemów z wydajnością w kilku komponentach. Ta praca zmieniła ogólne podejście zespołu do tworzenia nowych komponentów oraz do obsługi zmian właściwości i wartości obliczanych. Zespół testował też jak najwięcej, by mieć pewność, że nowy system działa wydajnie i zgodnie z założeniami.

Jakie wnioski z migracji do Vue 3 mogą wykorzystać inne zespoły?

Zacznij wcześnie, bądź otwarty na zmiany, dokładnie testuj i nie spiesz się. Oto wnioski z migracji Systems Engineering, które można zastosować w niemal każdym projekcie przejścia z Vue 2 na Vue 3:

• Rozpocznij migrację jak najwcześniej. W 2023 roku ekosystem Vue 3 wciąż był jeszcze w budowie, ale najważniejsze biblioteki już istniały i były gotowe do użycia, podobnie jak wsparcie dla Vue 3.

• Bądź otwarty na zmiany w swoim stosie technologicznym. Nasz zespół zaleca też, by uważnie obserwować możliwe zmiany w obecnym stosie technologicznym i pozostawać na nie otwartym, bo to one mogą kształtować jego przyszły wygląd.

• Testuj, aby chronić kluczowe funkcje biznesowe. Testowanie pozwala zadbać o jakość i wydajność funkcji biznesowych. W momencie pierwotnej publikacji aplikacja Systems Engineering przechodziła serię testów manualnych i automatycznych, by ocenić, czy zespół powinien podjąć dodatkowe kroki w migracji.

• Działaj etapami. Kluczowe było, by nie spieszyć się z przejściem, tylko kończyć kolejne etapy po kolei.

• Wykorzystaj migrację do spłaty długu technicznego. Przegląd całego front-endu ujawnił niespójności, błędy i wzorce kodu legacy, które codzienna praca nad funkcjami spychała na dalszy plan.

Czy migracja do Vue 3 jest opłacalna dla twojej firmy?

Tak. Przejście z Vue 2 na Vue 3 to znacznie więcej niż ćwiczenie techniczne. To strategiczna szansa, by ulepszyć aplikację, usprawnić tworzenie oprogramowania i przygotować produkt na przyszłość. Mniejsze bundle i szybsze renderowanie poprawiają wydajność, a nowoczesne praktyki, takie jak Composition API i lepsze wsparcie dla TypeScript, pomagają zespołom tworzyć bardziej skalowalne, łatwiejsze w utrzymaniu i bardziej konkurencyjne produkty.

Case study Systems Engineering pokazuje, że przemyślane podejście, właściwe planowanie, dokładne przeglądy kodu i stopniowe aktualizacje sprawiają, że przejście przebiega płynnie i przynosi realną wartość biznesową. Jeśli twoja aplikacja nadal działa dziś na Vue 2, termin już minął. Pytanie nie brzmi już czy migrować, ale jak zrobić to bezpiecznie. Współpraca z konsultantami Vue.js pomaga ograniczyć ryzyko i utrzymać działanie aplikacji przez cały proces. Niezależnie od tego, czy przygotowujesz migrację, czy rozważasz Vue 3 w nowym projekcie, ta aktualizacja nie służy tylko nadążaniu za technologią. Chodzi o budowanie z myślą o przyszłości.

Co Systems Engineering i Monterail opowiedzieli o migracji?

Jak wygląda w praktyce migracja z Vue 2 do Vue 3? Dlaczego ma tak duże znaczenie? Czego nauczył się zespół? Harald Hersted, Concept Specialist w Systems Engineering, oraz Mateusz Michałowski, Principal Frontend Engineer w Monterail, odpowiedzieli na te pytania podczas wydarzenia o Vue, które zorganizowaliśmy w październiku 2023 roku. Poniżej znajdziesz nagranie tej rozmowy na żywo.