Nowy standard. Twoje centrum tworzenia inteligentnego, szybkiego i zrównoważonego oprogramowania AI
Gradido: Lepsza wydajność aplikacji internetowej dzięki migracji z Vue 2 do Vue 3
Gradido, organizacja non profit rozwijająca alternatywny model monetarny, stanęła przed wyzwaniem migracji swojej złożonej platformy waluty cyfrowej z Vue 2 do Vue 3. Celem projektu było przygotowanie platformy na przyszłe potrzeby, poprawa wydajności i dostosowanie jej do nowoczesnych praktyk tworzenia oprogramowania.
Firma i produkt
Gradido to unikalny system monetarny zaprojektowany tak, aby wspierać zrównoważoną gospodarkę dzięki samoregulującej się podaży pieniądza.
Platforma waluty cyfrowej Gradido wykorzystuje zaawansowaną technologię Distributed Ledger Technology (DLT), aby zapewnić bezpieczny, zdecentralizowany system zarządzania środkami. Użytkownicy mogą łatwo zarządzać swoimi portfelami cyfrowymi, śledzić stan środków i przeprowadzać transakcje. Gradido angażuje się w dobrostan społeczny i ekologiczny: platforma nagradza użytkowników za wkład we wspólne dobro dzięki unikalnemu systemowi bonusów. Jej samoregulująca się podaż pieniądza ma ograniczać nierówności majątkowe, a jednocześnie zapewniać stabilny przepływ gotówki i poziom cen.
Gradido, zbudowane na zdecentralizowanych podstawach, umożliwia zarządzanie przez społeczność i aktywny udział użytkowników w kształtowaniu systemu ekonomicznego. Decentralizacja wzmacnia zaufanie użytkowników i zwiększa odporność systemu. Dzięki intuicyjnemu, przyjaznemu interfejsowi aplikacja ułatwia tworzenie portfeli cyfrowych, śledzenie aktywności finansowej i angażowanie się w życie społeczności. Gradido zostało zaprojektowane tak, aby rozwijać się w kierunku kompletnego systemu walutowego wspierającego globalny dobrobyt i pokój.
Opinia klienta
)
Płynna migracja do Vue 3
Migracja tak złożonego projektu jak nasz z Vue 2 do Vue 3 uchodzi za ogromne wyzwanie. To niemal jak pisanie aplikacji od nowa. Dlatego zdecydowaliśmy się na współpracę z Monterail, uznanym partnerem Vue.js. Od pierwszego dnia imponowała nam rzetelność tej współpracy. Zespół idealnie wpasował się w nasz sposób pracy i stos technologiczny. To najlepsze doświadczenie outsourcingowe, jakie kiedykolwiek mieliśmy. Dziękujemy zespołowi Monterail za świetną pracę i liczymy na dalszą współpracę.
Zakres i najważniejsze elementy
Migracja do Vue 3
Migracja bazy kodu i testów
Testy jednostkowe i end-to-end
1k+
przepisanych testów, by zapewnić poprawne działanie aplikacji w nowym stosie technologicznym
400+
zaktualizowanych plików kodu pod kątem zgodności z Vue 3
3
członków zespołu
Wyzwanie
Głównym celem była migracja do Vue 3, która wymagała dostosowania frontendu i aplikacji administracyjnej do nowoczesnych praktyk, aby przygotować platformę na przyszłość i sprostać zmieniającym się standardom społeczności.
Migracja projektu do Vue 3 wiązała się z kilkoma kluczowymi wyzwaniami, zwłaszcza w obszarze zgodności krytycznych komponentów i bibliotek. Szczególnie wymagająca okazała się praca z BootstrapVue, ponieważ to rozwiązanie nie było już rozwijane i nie współpracowało z Vue 3. Aby ruszyć dalej, zespół sięgnął po wersję alpha biblioteki bootstrap-vue-next, co wiązało się z pewnym ryzykiem ze względu na jej wciąż trwający rozwój i konieczność pełnego przepisania wdrożenia. Ze względu na aktywny rozwój i wsparcie społeczności byliśmy jednak przekonani do bootstrap-vue-next, mimo wszystkich przeciwności.
Kolejnym ważnym tematem była migracja biblioteki vee-validate do wersji 4.0, która wprowadziła istotne zmiany w obsłudze formularzy i walidacji, więc wymagała zmiany naszego podejścia. Dzięki lepszemu wsparciu w vee-validate 4.0 zdecydowaliśmy się przejść z Options API na Composition API. Ta zmiana była zgodna z nowoczesnymi praktykami Vue 3, uprościła obsługę formularzy i poprawiła łatwość utrzymania kodu.
W ramach migracji przeprowadziliśmy też szerokie porządki w bazie kodu: usunęliśmy przestarzały kod, zrefaktoryzowaliśmy funkcje i uprościliśmy komponenty. Ujednoliciliśmy również praktyki programistyczne, wyeliminowaliśmy zbędne zależności i poprawiliśmy dokumentację. Dzięki temu sama migracja przebiegła sprawniej, a jakość i utrzymanie kodu wyraźnie się poprawiły.
Najważniejsze wyzwania
1.
Utrzymanie jakości i funkcjonalności kodu podczas migracji dzięki gruntownej standaryzacji.
2.
Dostosowanie nowych zależności i bibliotek przy zachowaniu pełnej funkcjonalności aplikacji.
3.
Dotrzymanie harmonogramu projektu było zagrożone przez przejście na Composition API w Vue 3 i refaktoryzację komponentów.
1.
Utrzymanie jakości i funkcjonalności kodu podczas migracji dzięki gruntownej standaryzacji.
2.
Dostosowanie nowych zależności i bibliotek przy zachowaniu pełnej funkcjonalności aplikacji.
3.
Dotrzymanie harmonogramu projektu było zagrożone przez przejście na Composition API w Vue 3 i refaktoryzację komponentów.
Proces
Migracja Gradido do Vue 3 przebiegała etapowo i według jasno określonego planu, aby zapewnić płynne przejście zarówno dla panelu administracyjnego, jak i frontendu aplikacji.
Proces migracji rozpoczął się od przygotowania dedykowanych środowisk deweloperskich i testowych, co pozwoliło sprawnie przeprowadzić cały proces. Zespół Monterail odtworzył repozytorium klienta, aby zapewnić spójność pracy po obu stronach. Następnie nasi deweloperzy zaktualizowali narzędzia, usuwając zależności @vue/cli-service i powiązane z nimi wtyczki. Bundler Webpack został zastąpiony przez Vite, co znacząco poprawiło komfort pracy deweloperskiej. W rezultacie zaktualizowaliśmy także wersję Node.js, aby obie aplikacje działały na tym samym wydaniu.
Niezgodne biblioteki, takie jak BootstrapVue, były aktualizowane, na przykład przez migrację do bootstrap-vue-next, albo w razie potrzeby zastępowane innymi rozwiązaniami. Trzymając się przewodnika migracyjnego, deweloperzy Vue z Monterail zajęli się ostrzeżeniami dotyczącymi zgodności i zmianami breaking changes, aby zapewnić płynną integrację. Na koniec przeprowadziliśmy kompleksowe testy, w tym ręczne QA, żeby potwierdzić prawidłowe działanie aplikacji z Vue 3 i zaktualizowanymi zależnościami.
Zespół skupił się na aktualizacji środowisk, unowocześnieniu narzędzi, usunięciu ostrzeżeń związanych ze zgodnością i przepisaniu testów, aby przejście do Vue 3 przebiegło płynnie, przy minimalnych zakłóceniach i z zachowaniem wysokich standardów platformy Gradido.
Tak to zrobiliśmy:
Rozwiązaliśmy problem niezgodności BootstrapVue z Vue 3, migrując do bootstrap-vue-next, czyli wersji tej biblioteki dla Vue 3.
Przeprowadziliśmy migrację biblioteki vee-validate do wersji 4.0, łącznie z przejściem z Options API na Composition API.
Uporządkowaliśmy zależności i wykorzystaliśmy najnowsze narzędzia dostępne dla Vue 3 (vue-timers i vue2-transitions zastąpiliśmy odpowiadającymi im bibliotekami dla Vue 3).
Skupiliśmy się na refaktoryzacji bazy kodu. Deweloperzy Vue ujednolicili obsługę kodu asynchronicznego, rezygnując z mieszania async/await i wywołań opartych na Promise na rzecz wyłącznego użycia async/await.
Zrzuty ekranu aplikacji Gradido
Głos zespołu
)
Udana migracja do Vue
Udział w migracji z Vue 2 do Vue 3 był jednocześnie dużym wyzwaniem i źródłem satysfakcji. Refaktoryzacja kodu oraz wykorzystanie możliwości Vue 3 znacząco poprawiły wydajność i łatwość utrzymania aplikacji. Bardzo mnie cieszyły zarówno pozytywne opinie klienta, jak i większa stabilność samej aplikacji. Cieszę się, że mogłam pomóc uczynić ją bardziej efektywną i skalowalną z myślą o dalszym rozwoju.
Efekt
Migracja platformy Gradido z Vue 2 do Vue 3 przyniosła wyraźną poprawę w kluczowych obszarach: wydajności, łatwości utrzymania i dostępu do nowych funkcji.
Wyższa szybkość renderowania i mniejsze zużycie pamięci wyraźnie zwiększyły responsywność platformy, co przełożyło się na krótszy czas ładowania i płynniejsze działanie zarówno panelu administracyjnego, jak i aplikacji frontendowej. Zespół deweloperów przepisał ponad 1 000 testów optymalizujących stos technologiczny i zaktualizował ponad 400 plików kodu, aby zapewnić zgodność z frameworkiem Vue 3.
Migracja uporządkowała też bazę kodu dzięki ujednoliceniu obsługi asynchroniczności i wprowadzeniu spójnego stylu programowania. To ułatwiło utrzymanie kodu i zmniejszyło dług techniczny, a tym samym uprościło dalszy rozwój funkcji i naprawianie błędów. Po migracji Gradido korzysta teraz z nowoczesnych możliwości Vue 3, takich jak Composition API, oraz obsługuje zaawansowane biblioteki, takie jak vee-validate, co otwiera drogę do bardziej rozbudowanych funkcji. Dzięki migracji platforma Gradido jest dziś stabilniejsza, wydajniejsza i lepiej przygotowana na przyszłość.
O sukcesie tego projektu przesądziły następujące czynniki:
Dokładne planowanie, jasno określony zakres i dobrze uporządkowany przebieg prac.
Skuteczne zarządzanie bibliotekami i aktualizacja narzędzi oparta na dogłębnej wiedzy deweloperów Vue.
Skupienie na jakości kodu i dobrych praktykach Vue, co poprawiło jego czytelność i łatwość utrzymania.
Przeczytaj więcej case studies
zobacz wszystkiezobacz wszystkie
Jak krok po kroku budować ekonomię daru
Monterail stworzył aplikację mobilną dla BuyNothing Project, aby przenieść ich ogromną społeczność opartą na ekonomii daru z Facebooka. Aplikacja zapewniła użytkownikom własną platformę do dawania, dzielenia się i budowania relacji, uwalniając organizację od ograniczeń Facebooka i otwierając drogę do dalszych innowacji.
Scale-up
USA
Organizacja non-profit
Aplikacje mobilne
Tworzenie MVP
Proof of concept
Python
React Native
Jak Monterail przebudował mobilną platformę fundraisingową organizacji non-profit, zwiększając konwersję i pomagając przekazać ponad 800 mln USD
GiveDirectly, organizacja non-profit przekazująca środki pieniężne bezpośrednio osobom żyjącym w skrajnym ubóstwie, korzystała z serwisu, który przestał nadążać za jej rozwojem. Monterail w ciągu czterech miesięcy przebudował ścieżkę darowizn na platformie, wykorzystując Vue.js i Nuxt na istniejącym po stronie klienta backendzie PHP i Python. Nowy moduł Donate dodał wsparcie dla czytników ekranu, pełną obsługę klawiaturą i landmarki ARIA, a także dodatkowe metody płatności, w tym czeki i akcje, oraz integrację z Salesforce do zarządzania danymi. Od tego czasu GiveDirectly przekazało już ponad 800 mln USD ponad 1,6 mln osób.
Duża firma
USA
Organizacja non-profit
Projektowanie produktu UX/UI
Aplikacje webowe
Nuxt.js
Python
Vue.js
Jestem tutaj, żeby zebrać twoje wymagania, odpowiedzieć na wszystkie pytania i jak najszybciej przeprowadzić twój pomysł do etapu tworzenia oprogramowania.
Grzegorz Hajdukiewicz | Chief Delivery Officer
Skontaktuj sięSkontaktuj się