Niedawno Angular wypuścił niezależną funkcję "eksperymentalną" o nazwie Zone.js. Chociaż funkcja jest nadal eksperymentalna, zespół Angular pracuje nad tą ważną innowacją od dawna. Responsywne prymitywy stają się coraz ważniejsze dla deweloperów, co wskazuje, że Angular wkracza w kolejną nową erę. Zależności kątoweZalety Signals i Rxjs są jeszcze bardziej widoczne, eliminując potrzebę ciągłego nasłuchiwania zmian, od których Zone.js zależna, i ostatecznie pełnił rolę pośrednika podczas produkcji.
Angular będzie nadal odważnym i potężnym frameworkiem w przyszłości, rozpoczynając nową transformację.
Przede wszystkim, mój artykuł nie ma na celu niczego nauczyć. Mam nadzieję, że moi czytelnicy nie poczują, że zasługują na taką bierność. Staram się dzielić swoimi doświadczeniami i naukami jak najwięcej i otwierać się na dyskusje. Ważne jest, aby wspólnie dyskutować, wymieniać się pomysłami i oceniać na podstawie krytycznego myślenia. Nie należy zapominać, że wciąż istnieje pewne zamieszanie co do tego, jak dokładnie działają, zwłaszcza gdy technologie omawiane w tym artykule są nadal doświadczane, a nawet mechanizm wykrywania zmian może powodować pewne zamieszanie wśród zespołu Angular.
Czym jest Zone.js i co robi?
Zone.js to niewielka biblioteka stworzona przez Briana Forda w 2010 roku pod nazwą "Zones" do zarządzania pracą asynchroniczną w JavaScript. Zainspirowany językami takimi jak Erlang i Dart, ma na celu wprowadzenie strukturalnej współbieżności do środowiska jednowątkowego JavaScript. Zespół Angular zyskał na popularności, gdy w Angular 2 wprowadził Zones jako mechanizm wykrywania zmian, a zespół Angular zaczął wnosić go w formie Zone.js, zapewniając szerszy udział społeczności i dalszy rozwój. Obecnie, choć nadal jest ściśle powiązany z Angularem, można Zone.js uznać za potężne narzędzie do monitorowania i interwencji w zadania asynchroniczne, umożliwiając analizę wydajności, możliwości obsługi błędów oraz wiele wątpliwych funkcji.
Dlaczego więc Angular porzucił Zone.js?
Wykorzystując zdolność AI do bezwysiłkowego przekształcania naszych wyimaginowanych obrazów w rysunki, użyliśmy metafory "gąbki pod łóżkiem", aby stworzyć obraz ułatwiający zrozumienie.
Wyobraź sobie łóżko na powyższym zdjęciu, które nie jest położone na podłodze, lecz na dużej gąbce. Zone.js jest jak gąbka w aplikacji Angular. Ta gąbka zapewnia, że łóżko leży na wygodnej, wspierającej podstawie, zapewniając jednocześnie względny komfort śpiącemu. Gąbka pochłania każdy ruch łóżka, uniemożliwiając ruchowi wewnątrz odbicia się na zewnątrz.
Monkey łata Zone.js słuchać wszystkich asynchronicznych API w przeglądarce, takich jak: zdarzenia, zobowiązania, observables, setTimeout, setInterval itd.
Słuchając tych elementów, aplikacja Angular może wykrywać wszelkie zmiany i aktualizować interfejs użytkownika, podobnie jak podstawa wspornika gąbk, Zone.js pozwala na płynne działanie aplikacji Angular. W takim przypadku mogą wystąpić problemy z wydajnością, których nie odczuwamy w bardzo dużych projektach.
Z drugiej strony ta złożona struktura zdaje się uniemożliwiać nam dostrzeganie pewnych konkretnych zmian w czasie. Każda poprzednia cecha i rozwój, wraz z własnym wewnętrznym rozwojem i zmieniającymi się potrzebami, nagle stają się przeszkodą dla kolejnego i rozwoju.
Gdy wyciągamy gąbkę spod siebie, widzimy, że naturalna swoboda ruchu zaczyna się pojawiać, gdy łóżko styka się bezpośrednio z ziemią. Gdy efekt gąbki ograniczający komfort zaczyna się zużywać, oznacza to, że ruch na łóżku odbija się bezpośrednio na ziemi.
Taka metafora może oznaczać, że gąbka zapewnia strefę komfortu i zapewnia stosunkowo wygodniejszy sen. Zone.js jak ta gąbka, zapewnia poważną strefę komfortu, która pozwala nam odczuwać każdą zmianę na powierzchni. Jednak z czasem ta złożona struktura może uniemożliwić nam dostrzeganie pewnych konkretnych zmian. Ból dolnej części pleców może pojawić się, gdy wyciągniemy gąbkę spod siebie, a te dolegliwości wskazują, że zeszliśmy z sztucznego do naturalnego gruntu, i choć to doświadczenie przejścia może być nieco bolesne, ostatecznie z prostą dolną częścią pleców, wygodniejszym snem, lepszym krążeniem i zdrowszą sprawnością fizyczną i umysłową. Przejście na strefę bezstrefową, czyli ból pleców i stawów spowodowany spaniem w łóżku bez gąbki, jest dobrym znakiem, że przechodzimy z podłoża sztucznego na naturalne. Choć to doświadczenie przejścia jest trochę bolesne, ból przejściowy również znika, gdy dolna część pleców zaczyna się przekształcać do pierwotnego stanu, zapewniając lepszą krążenie; Przykład przejścia tutaj odpowiada eksperymentalnemu Zoneless, który słyszeliśmy w Angular v18.
Uważa się, że Zone.js dodaje dodatkowe obciążenie, ponieważ śledzi operacje asektronowe i przekazuje je mechanizmom detekcji kątowych, takim jak wywołania, zdarzenia, błędy itp. Dziś, jeśli chodzi o wydajność Angulara, nie widzimy ani nawet nie czujemy dodatkowego obciążenia. Zone.js można by dalej rozwinąć i rozwiązać niektóre problemy z debugowaniem, ale podstawą jest tutaj mapa drogowa Angulara. Widzimy, że własne, wewnętrzne prymitywy Effects Effects przez Angular Zone.js teraz przeszkadzają w realizacji przyszłych planów Angulara. Struktura Sygnałów jest bardzo przydatna pod względem mechanizmów wykrywania i dobra pod względem wydajności, łatwa w obsłudze i wydajna, Zone.js nie jest już potrzebna, ale nie jest to biblioteka, którą można porzucić z dnia na dzień.
Rozumiemy, że Angular nie chce ograniczać swoich marzeń, lecz chce zbudować bardziej elastyczną i niezawodną aplikację z bardziej samowystarczalnymi ramami, eliminując procesy pośrednie tak bardzo, jak to możliwe. Widzimy, że Angular zmierza w stronę bardziej praktycznego stanu i próbuje wykorzystać okazję, by ponownie wejść w trend wzrostowy w przyszłości. Niestety, z obecnego badania StateofJS nie możemy powiedzieć, że jest to taki trend, ale widzimy też, że Angular jest otwarty na wszelkie możliwe innowacje.
Jak przełączyć się na tryb bezstrefowy w Angular 18?
Angular 18 ma krok, który pozwala przełączyć się na tryb bezzonowy i pozbyć się gąbki. Jak pokazano poniżej, możemy teraz zapewnić to doświadczenie, korzystając z mechanizmu wykrywania zmiany strefy w fazie bootstrap.
Po dodaniu powyższej funkcji do dostawcy możemy teraz użyć polecenia npm uninstall zone.js aby usunąć zone.js zdefiniowanego w poniższej tablicy polyfills z angular.json.
Teraz możemy używać Angular Zoneless!
Jakie są zalety Zoneless?
Zoneless zapewnia bardziej uproszczony ekosystem dla naszych aplikacji, eliminując niepotrzebne operacje odsłuchowe. Oznacza to szybsze renderowanie, wyższą wydajność, szybsze ładowanie stron, mniejsze rozmiary pakietów i łatwiejsze debugowanie.
Weź klasyczny test, w którym dodajesz licznik klikając przycisk i chcesz zwiększyć tę liczbę po kliknięciu przycisku. W tym przypadku widzimy, że zmieniona wartość jest renderowana po wyzwalaniu każdej funkcji, a ta wartość zmienia się w HTML. Ponieważ to już funkcja i wyzwalamy ją bezpośrednio, jest renderowana tutaj. Ale co się stanie, jeśli ta wartość zmieni się pod wpływem zewnętrznych czynników i chcemy zobaczyć jakąkolwiek zmianę bez ręcznego wywoływania jej? Jeśli pojawi się Zone.js, nieustannie nasłuchuje wszystkich zmian i powiadamia Angular w naszym imieniu. Jednak ponieważ obecnie nie ma takiego mechanizmu, musimy albo uruchomić mechanizm wykrywania zmian po jakiejś operacji asynchronicznej, albo użyć bezpośrednio Signals lub RxJS, aby zmiana była wykrywana bezpośrednio z powodu tej reaktywności.
Zniknięcie Sponge uczy nas, że nie tylko Zone.js znika, ale także "strefa komfortu".
Jeśli użyjemy Zone.js jako modułu z czystym JavaScriptem, będzie to wyglądać tak.
W Angularze nie musimy się z takimi sytuacjami zajmować; W ngZone te operacje już działają równolegle z mechanizmem wykrywania.
Na przykład w przypadku bezpośredniego DOM, nasłuchiwaczy zdarzeń, obserwables i zobowiązań, żądań HTTP oraz synchronicznych przepływów sterowania, musimy ręcznie uruchomić mechanizm wykrywania zmian dla operacji asynchronicznych.
Ponieważ Signals lub R xjs automatycznie wykrywają zmiany, nie ma potrzeby uruchamiania mechanizmu wykrywania zmian.
Przykład sygnału:
Teraz napiszmy aplikację testującą mechanizmy wykrywania zmian Zoneless i Angular i zobaczmy, jak działają.
Po rozpoczęciu powyżej zdefiniowanego przedziału jako standardowego widzimy, że zaczyna działać, ale DOM nie jest odświeżany i zmiany nie są odzwierciedlane. Gdy używamy interwału startu sygnału, widzimy, że działa on bez wyzwalania mechanizmu wykrywania zmian w Angular. Jak widać, gdy rozpoczyna się zdarzenie kliknięcia i interwał sygnału, Angular zauważa zmianę, natychmiast rejestruje zmianę w naszym standardowym interwale i ją zwalnia.
Gdy wysyłamy wartość zmiennej do komponentu nadrzędnego, okazuje się, że jest ona postrzegana inaczej zarówno w przypadku push, jak i domyślnego.
Gdy przypisujemy wejście po lewej, zmiana jest odzwierciedlona, gdy nie ma żadnego obszaru, i podobnie widzimy, że zmiana odbija się po kliknięciu z powodu obietnicy.
Tutaj widzimy, że po wywołaniu HTTP bez wykrywania zmian, zmiany nie są odzwierciedlane, tylko wtedy, gdy wyzwalamy je ręcznie. Oczywiście, Signals łatwo odbija nowicjuszy na wybrany ekran. Część kodu jest następująca:
app.component.ts
change-detection-demo.component.ts
Aplikacja została opublikowana na Stacklibitz i możesz zobaczyć pozostałe testy. Możesz też śledzić wyniki w interfejsie przez kod.
Stackblitz:Logowanie do linku jest widoczne.
GitHub:Logowanie do linku jest widoczne.
Poniżej znajduje się też przykładowa aplikacja pokazująca, jak działa mechanizm wykrywania zmian w Angular, i możesz ją tam wypróbować.
Logowanie do linku jest widoczne.
Rzeczy, które należy rozważyć przy przełączaniu na tryb bez regionu
Warto zauważyć, że, jak sama nazwa wskazuje, ExperimentalZonelessChangeDetection jest nadal eksperymentalny.
Podczas testów zauważyliśmy pewne dziwactwa w mechanizmie wykrywania zmian. Na przykład, gdy niektóre zmiany nie są wyzwalane ręcznie, nie widzimy żadnych zmian w DOM, a stan nie jest odświeżany. Jednak gdy inny sygnał lub zmienna reakcji działa poza mechanizmem detekcji zmian i powoduje odświeżenie DOM, możemy zauważyć, że stan wcześniej nieodświeżony również jest odświeżany.
Jeśli chcesz wdrożyć tę funkcję w istniejącym projekcie, powinieneś dokładnie przetestować wszystkie działania i zachowanie aplikacji. W szczególności biblioteki firm trzecich mogą polegać na Zone.js, co może prowadzić do błędów i problemów z renderowaniem.
Oryginał:Logowanie do linku jest widoczne. |
Opublikowano 2024-12-30 11:02:42
|
|
|
|
Ziemianin|
Opublikowano 30.12.2024 11:04:13
|
