Funkcja Flutter Hot Reload: objaśnienie korzyści i wydajności

Flutter Hot Reload to bardzo pożądana funkcja platformy Google, która umożliwia programistom wprowadzanie zmian w kodzie i niemal natychmiastowe sprawdzanie wyników – bez ponownego uruchamiania aplikacji. Ta funkcja ułatwia szybką iterację i udoskonalanie projektu aplikacji, eksperymentowanie z różnymi układami i konfiguracjami interfejsu użytkownika, naprawianie błędów i, co najważniejsze, znaczne skrócenie czasu programowania. W rezultacie Hot Reload może przynieść ogromne korzyści firmie zajmującej się tworzeniem aplikacji Flutter, umożliwiając zmiany kodu w czasie rzeczywistym i natychmiastowe aktualizacje, dzięki czemu proces tworzenia oprogramowania jest bardziej wydajny i oparty na współpracy.

Funkcja Flutter Hot Reload umożliwia programistom natychmiastowe zobaczenie zmian, jakie wprowadzają w kodzie, odzwierciedlonych w emulatorze lub urządzeniu, bez konieczności pełnego ponownego uruchamiania aplikacji. Ten artykuł ma na celu odpowiedzieć na pozornie proste pytanie: Co oznacza „prawie natychmiastowe” w przypadku Hot Reload? Innymi słowy, jak szybko działa ta funkcja Flutter w projektach o różnej wielkości? Czego należy się spodziewać pracując nad większymi projektami, a co z mniejszymi? Czy funkcja Hot Reload działa dobrze we wszystkich tych scenariuszach? Dowiedzmy Się!

Zrozumienie Flutter Hot Reload

Zacznijmy od podstaw i niezbędnych zastrzeżeń. Opisując funkcję Hot Reload warto podkreślić, że Dart VM wykorzystuje kompilator JIT (Just-in-Time) do konwersji kodu na natywny kod maszynowy, co następuje tuż przed wykonaniem programu. JIT opiera się na przewidywaniu kodu, ponieważ ma dostęp do dynamicznych informacji o czasie wykonywania, co prowadzi do rozwiązań oszczędzających czas, takich jak informowanie programistów, że dana funkcja nigdzie nie została użyta.

Funkcja Hot Reload odbudowuje drzewo widżetów, ale zachowuje dotychczasowy stan aplikacji. Podczas korzystania z funkcji Hot Reload funkcje `main()` i `initState()` nie są wywoływane. Jeśli chcesz odbudować te funkcje, powinieneś użyć Hot Restart lub Full Restart:

• Hot Restart: narzędzie, które powoduje ponowną kompilację kodu źródłowego aplikacji projektowej, zaczynając od stanu domyślnego/początkowego, w którym stan zachowany ulega zniszczeniu. To narzędzie jest znacznie szybsze niż Pełny restart, ale zajmuje więcej czasu niż Hot Reload.
• Full Restart: narzędzie budujące projekt aplikacji od podstaw, zwane także „Cold startem”.

Dodatkowo od czasu do czasu programiści muszą użyć funkcji Hot Restart zamiast Hot Reload, na przykład:

• Jeśli aplikacja pozostaje w tle zbyt długo i/lub ma zostać zabita,
• Jeśli typ wyliczeniowy w pliku Dart zostanie zmieniony na normalne klasy i odwrotnie,
• Jeśli kod natywny zostanie zmieniony,
• Po zmianie deklaracji typu ogólnego.

Flutter Hot Reload można wykonać tylko w trybie debugowania. Inne tryby kompilacji, takie jak: tryb profilu i tryb wydania, nie obsługują funkcji Hot Reload.

Skala projektu a wydajność Flutter Hot Reload

Projekty Flutter różnią się wielkością w zależności od ilości dołączonych bibliotek, architektury aplikacji, plików multimedialnych lub funkcji aplikacji. Do niedawna Flutter był uważany za idealne rozwiązanie dla MVP i PoC. Jednakże w miarę jak projekty Flutter na dużą skalę, takie jak Google Pay, eBay, Nubank, Rive czy Maya Bank liczący 47 milionów użytkowników, nabierają tempa, istotne jest również zbadanie możliwości Flutter w przypadku złożonych aplikacji.

Funkcję Hot Reload Flutter można wykorzystać zarówno w aplikacjach Proof of Concept (PoC), jak i produktach cyfrowych na poziomie przedsiębiorstwa. Pozostaje jednak pytanie, czy jego wydajność będzie zadowalająca w przypadku złożonych projektów i czy Flutter dla aplikacji korporacyjnych to opłacalny wybór. Zbadajmy to dalej!

Eksperyment z wydajnością gorącego ponownego ładowania

Po pierwsze, aby określić przybliżoną, średnią wydajność Hot Reload w różnych przypadkach użycia, zdecydowałem się zbadać 5 projektów testowych zawierających określoną liczbę bibliotek:

• Projekt testowy 1: 1 000 bibliotek
• Projekt testowy 2: 5 000 bibliotek
• Projekt testowy 3: 10 000 bibliotek
• Projekt testowy 4: 25 000 bibliotek
• Projekt testowy 5: 50 000 bibliotek

Rozumiem, że jest bardzo mało prawdopodobne, aby projekt miał tak dużą liczbę bibliotek, ale wykorzystujemy to jako test do śledzenia trendów w pięciu konkretnych projektach.

Przeprowadzono eksperyment z następującymi specyfikacjami urządzenia:

• MacBook Pro, czterokodowy procesor Intel Core i5 2–3 GHz, 16 GB 2133 MHz LPDDR3, karta graficzna Intel Iris Plus 655 1536 MB,
• Kod Visual Studio, wersja: 1.68.1,
• Symulator: Iphone 12 Pro Max – iOS 15.5 (wersja Xcode: 13.4.1),
• Flutter SDK (stabilny kanał, 3.7.0).

Należy pamiętać, że określone czasy przeładowania będą się różnić w zależności od sprzętu lub systemu. Przeprowadzono eksperyment z następującymi specyfikacjami urządzenia. Ogólny trend i wnioski powinny jednak pozostać takie same.

Celem eksperymentu było pokazanie, ile czasu zajmuje wykonanie funkcji Hot Reload w każdym projekcie, w którym generowana jest odpowiednia ilość bibliotek do celów testowych. Każda biblioteka zawiera określoną klasę. W ten sposób ilość bibliotek odpowiada liczbie klas, które mają zostać przeładowane. Poniżej znajduje się przykład Projektu Testowego 3 zawierającego 10 000 klas. Każda biblioteka, zwana „placeholderX”.dart, zawiera prostą klasę Stateless Widge „placeholderX, która jest kontenerem:

Kolor kontenera to zmienna zadeklarowana w bibliotece „constants.dart” w klasie „Constants”, która jest po prostu połączona z następującymi wygenerowanymi do testowania bibliotekami „placeholder”.

Wyniki testu Flutter Hot Reload

Teraz, gdy ustaliliśmy wszystkie zmienne i cele eksperymentu oraz wyjaśniliśmy proces, czas podsumować wyniki. Zobaczmy efekty 5 testów wydajnościowych Flutter Hot Reload.

Test 1: Ponowne załadowanie 1 000 klas

Test 2: Ponowne załadowanie 5000 zajęć

Test 3: Ponowne załadowanie 10 000 zajęć

Test 4: Ponowne załadowanie 25 000 zajęć

Test 5: Ponowne załadowanie 50 000 klas

Poniższy wykres porównuje czas trwania Hot Reload w różnych skalach projektów:

Oczywiście średni czas funkcji Hot Reload dla danej skali projektu wzrasta ze względu na większą liczbę bibliotek (klas).

Jednak przyglądając się uważnie poniższemu wykresowi i biorąc pod uwagę tylko pierwsze 3 testy projektu, można zauważyć szczegółowe wartości poszczególnych zastosowań Hot Reload:

Wyjaśnienie wyników testu

Wyniki testu potwierdzają, że funkcja Hot Reload Flutter jest skuteczna przy przebudowie 1000 klas na raz, gdzie średni czas trwania oscyluje w granicach 1 sekundy, najczęściej nawet nie osiągając tej wartości zgodnie z wykresem. Dlatego w większości rzeczywistych przypadków Hot Reload z pewnością jest bezpiecznym wyborem, np. gdy:

• przeładowanie jednej klasy,
• przeprowadzanie spotkań na żywo z klientami (np. podczas testowania nowych pomysłów),
• podczas programowania w parach lub burzy mózgów.

Zanim przejdę do wniosków, chcę podkreślić jedną rzecz. Pamiętaj, że w moim teście ponownie załadowałem wszystkie wymienione biblioteki (klasy) na raz. Podczas przeciętnego procesu programowania prawie nigdy nie jest konieczne ponowne ładowanie takiej liczby bibliotek.

Z mojego doświadczenia programistycznego (i wyników testów) wynika, że ​​ponowne załadowanie mniejszej liczby bibliotek powinno pozwolić uniknąć problemów z opóźnieniami. Nie wspominając, że częste przeładowywanie bibliotek minimalizuje ryzyko niepożądanych błędów lub problemów z kodem i znacznie ułatwia monitorowanie zmian wprowadzanych w projekcie.

Flutter Hot Reload: objaśnienie wydajności

Funkcja Flutter Hot Reload to potężne i wydajne narzędzie, które przydaje się przy rozwiązywaniu problemów związanych z interfejsem użytkownika na etapie programowania. Jak udowodniono w powyższym eksperymencie, w większości przypadków działanie Hot Reload przebiega płynnie – pojedyncza zmiana interfejsu użytkownika zajmuje mniej niż sekundę, a średni czas przeładowania 1000 klas oscyluje wokół zaledwie 1 sekundy.

Co więcej, eksperyment udowodnił, że Flutter może przeładować duże projekty wielkości przedsiębiorstwa z tysiącami klas, gdzie średni czas Hot Reload wynosi mniej niż 8 sekund. Choć wydajność Hot Reload może nie być w pełni zadowalająca w przypadku gigantycznych projektów (scenariusz 50 000 klas), Flutter doskonale sobie z nimi radzi.

Bez wątpienia Flutter Hot Reload zwiększa efektywność pracy poprzez przebudowę widżetów w obrębie drzewa widżetów projektu, dzięki czemu łatwiej jest osiągnąć pożądane rezultaty w mgnieniu oka. Dzięki Hot Reload programiści Flutter są w stanie w odpowiednim czasie obsługiwać złożone zmiany projektowe (nawet te, które wpływają na całą aplikację).

I wreszcie, Hot Reload to tylko jeden z czynników wpływających na ogólną wydajność frameworka (stale weryfikowany przez społeczność Flutter i ulepszany przez Flutter Dev). Poznawanie najlepszych narzędzi programistycznych Flutter jest niezbędne do wydajnego tworzenia wysokiej jakości wieloplatformowych aplikacji mobilnych. Dlatego gorąco zachęcam do eksploracji wydajności we Flutterze – zarówno poprzez eksperymenty i testy, jak i w komercyjnych projektach klientów. To właśnie robimy w Miquido – stale rozwijamy nasze portfolio projektów PoC, zarówno PoC, jak i projektów tworzenia aplikacji wieloplatformowych klasy korporacyjnej.