Jak być może wiesz, w ciągu ostatnich kilku lat szybko pojawiło się wiele frameworków JavaScript. Ale ten wnosi do stołu zupełnie nowy paradygmat renderowania. To nikt inny jak Qwik.

Qwik jest, jak się wydaje, bardzo szybki. W tej chwili twierdzi, że jest najszybszą platformą front-end. Oferuje błyskawiczne czasy ładowania strony, niezależnie od rozmiaru i złożoności witryny. Jest uważany za złożoność O(1), ponieważ może osiągnąć spójną wydajność na dużą skalę.

Niedawno została wydana stabilna wersja Qwik 1.0. Jest to projekt typu open source na licencji MIT. Możesz to sprawdzić na ich oficjalnej stronie internetowej i publicznym repozytorium GitHub .

Tak więc ten artykuł ma na celu poprowadzenie Cię przez ten wspaniały framework, jego funkcje i strategię pod maską. Zanurzmy się.

Zanim przejdziemy do Qwik, najpierw musimy zrozumieć, jak renderowanie odbywa się w frameworkach JavaScript. Dostępne są dwie opcje renderowania: renderowanie po stronie klienta i renderowanie po stronie serwera.

Renderowanie po stronie klienta

Jak sugeruje jej nazwa, przeglądarka renderuje wszystkie dane w pliku HTML po stronie klienta w trybie renderowania po stronie klienta.

Gdy użytkownik odwiedza witrynę, przeglądarka wysyła do serwera żądania pobrania plików HTML, CSS i JS. Po otrzymaniu tych plików przeglądarka wykonuje te pliki i renderuje stronę. Aby użytkownicy mogli zobaczyć i wchodzić w interakcje z treścią.

Obejmuje to wykonanie całej logiki, pobieranie danych, routing i tworzenie szablonów po stronie klienta. Użytkownicy zwykle widzą pustą stronę, dopóki cały ten proces nie nastąpi.

Znaczącą wadą tego podejścia jest to, że wraz z rozwojem aplikacji wydłuża się czas renderowania strony początkowej.

Renderowanie po stronie serwera

Podczas renderowania po stronie serwera serwer wysyła wyrenderowany kod HTML jako odpowiedź.

Zamiast tracić czas na wykonywanie plików JavaScript, jak w przypadku renderowania po stronie klienta, przeglądarka może natychmiast wyświetlić witrynę za pomocą tej odpowiedzi.

To znacznie przyspiesza czas wstępnego renderowania. Dzięki temu użytkownicy mogą szybko przeglądać zawartość witryny bez wpatrywania się w pusty ekran.

Jednak strona jest tylko widoczna i nie jest interaktywna, dopóki pliki JavaScript nie zostaną załadowane do modelu DOM. Po załadowaniu JS strona będzie interaktywna z użytkownikiem.

Proces hydratacji

Jak omówiliśmy powyżej, strona, którą początkowo pokazuje nam przeglądarka, nie jest jeszcze interaktywna. Aby wchodzić w interakcje ze stroną internetową, JavaScript musi zostać załadowany do DOM. Ten proces nazywa się hydratacją.

Obejmuje to dołączanie detektorów zdarzeń, przywracanie stanu aplikacji i przebudowę całego drzewa komponentów od podstaw.

Ta technika jest obecnie używana przez prawie wszystkie metaframeworki, takie jak Next.js, Nuxt.js, Angular itp. (Z wyjątkiem Astro — używa częściowego nawodnienia)

Wadą tego procesu hydratacji jest to, że chociaż strona jest renderowana na ekranie użytkownika, nie jest interaktywna, dopóki kod nie zostanie pobrany i ponownie wykonany.

Gdy trzeba wykonać znaczną ilość kodu JavaScript, może to spowodować spowolnienie aplikacji internetowej.

Większość tych frameworków JavaScript pobiera i wykonuje cały kod jednocześnie. W rezultacie czas ładowania (czas interakcji) staje się wolniejszy i następuje po liniowym przebiegu O(n).

Tak więc frameworki oparte na tej technice zaobserwują opóźnienie w interakcji ze stroną internetową.

To jest dokładnie ten problem, który rozwiązał Qwik.

Dlaczego Qwik jest taki szybki?

Głównym powodem, dla którego Qwik jest superszybki, jest usunięcie tego procesu nawodnienia.

Wprowadza do stołu zupełnie nowy paradygmat renderowania o nazwie Resumability , który całkowicie eliminuje potrzebę nawodnienia. (Zerowe nawilżenie)

Co to jest wznowienie?

Możliwość wznowienia odnosi się do możliwości wstrzymania wykonywania na serwerze i wznowienia go na kliencie bez konieczności ponownego odtwarzania lub pobierania całej logiki aplikacji.

Aplikację Qwik można w pełni serializować jako HTML. W dowolnym momencie możesz wykonać akcję i przechwycić wszystkie dane i zamknięcia w aplikacji i przedstawić je jako ciąg HTML.

Następnie przeglądarka może rozpocząć pracę w miejscu, w którym serwer ją przerwał, bez konieczności wykonywania jakiegokolwiek kodu JavaScript.

Tak więc między Qwikiem a innymi frameworkami będzie ogromna przerwa czasowa.

Omówmy szczegółowo, jak było to możliwe dzięki jego strategiom.

Strategie Qwika

Qwik osiąga ten cel za pomocą dwóch głównych strategii:

1. Opóźniaj wykonanie i pobieranie JavaScript tak długo, jak to możliwe. (oprócz kodu startowego)
2. Serializacja stanu wykonania aplikacji i struktury na serwerze i wznowienie ich na kliencie. (Uwaga — Qwik serializuje tylko te dane, które są potrzebne dla bieżącej strony).

W Qwik wszystko jest ładowane z opóźnieniem:

• Komponent na renderowaniu (blok inicjalizacji i blok renderowania)
• Komponent na zegarku (efekty uboczne, pobierane tylko w przypadku zmiany danych wejściowych)
• Słuchacze (pobierani tylko podczas interakcji)
• Style (pobierane tylko wtedy, gdy serwer ich jeszcze nie udostępnił)

Przewodnik po kodzie

Przyjrzyjmy się przykładom kodu, aby lepiej zrozumieć ładowanie z opóźnieniem i serializację.

Stworzyłem podstawowy komponent, który ma tylko przycisk, który po kliknięciu wyświetli moje imię. Nie musisz się martwić o składnię w Qwik, ponieważ jest on bardzo podobny do Reacta.

Znasz Reacta? Znasz Qwika.

— Oficjalne dokumenty

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

Zauważysz tutaj szczególną rzecz. Tak! Znak dolara.

Co to jest $?

Qwik ma Optymalizator. Jest podobny do kompilatora. Ten symbol dolara mówi Optymalizatorowi, że następująca po nim funkcja powinna być ładowana z opóźnieniem.

Oznacza to, że JS nie zostanie załadowany, dopóki nie klikniemy przycisku. Ten ładowany z opóźnieniem pakiet JS zawiera kod, który chcemy wykonać.

Ponadto ma dostęp do środowiska leksykalnego w celu aktualizacji stanu, który może być współdzielony przez inne komponenty pochodzące z innego pakietu ładującego się z opóźnieniem.

Qwik zajmuje się całym tym dzieleniem kodu i leniwym ładowaniem od razu po wyjęciu z pudełka. Jest to bardzo korzystne, ponieważ jako programiści nie musimy nawet o tym myśleć. Jest to domyślne zachowanie Qwik.

Co dzieje się pod maską?

Teraz jesteś świadomy możliwości wznowienia. Ale jak to naprawdę działa? Zagłębmy się w to głębiej.

Jeśli przejdziesz do zakładki HTML z poprzedniego przykładu, zobaczysz dużo q dwukropków. (Q:)

Qwik umieszcza dodatkowe informacje w kodzie HTML. Jest to znane jako serializacja informacji w kodzie HTML. By móc później podejmować decyzje.

Qwik serializuje detektor zdarzeń do DOM w następującym formacie:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

Robi to Qwik Optimizer. Jak opisałem wcześniej, Qwik Optimizer jest w pewnym sensie kompilatorem.

Pobiera kod, który napisałem (te pliki JS), sprawdza go i tworzy nowe pliki na podstawie kodu. Następnie tam, gdzie pozostawiono nasz kod, zastępuje go odwołaniem do tego nowego pliku.

Ten optymalizator został napisany w języku Rust i można go zobaczyć tutaj . Sprawdź parse.rsplik w folderze core src. Wskazuje, jak przebiega parsowanie.

Następnie mamy Qwik Loader .

Gdy mamy już wszystkie te oddzielne pliki, które są gotowe do leniwego załadowania, musimy mieć możliwość reagowania na zdarzenia wykonywane przez użytkownika, a następnie leniwe ładowanie tych plików.

To właśnie robi Qwik Loader.

Dodaje globalne detektory zdarzeń i szuka zdarzeń użytkownika w dowolnym miejscu dokumentu.

Po uruchomieniu zdarzenia on-click importowany jest odpowiedni plik chunk.js.

Następnie będzie miał moduł z częścią nazwy symbolu. (#handler_symbol) Jest leniwie ładowany w osobnym pliku. Więc moduł ładujący przyniesie ten plik i wykona go.

Stan/wartości zostaną powiązane zgodnie z qwik/jsonrefs. (patrz powyższy załącznik)

W ten sposób została uruchomiona funkcja zdarzenia on-click. To zachowanie modułu ładującego można znaleźć w repozytorium GitHub tutaj .

Zainstaluj i uruchom Qwik w środowisku lokalnym

Zainstalujmy tę małą bestię na naszej maszynie.

Wymagania wstępne — Powinieneś mieć zainstalowany Node.js ≥v16.8.

Możesz użyć Qwik CLI, aby łatwo uruchomić aplikację Qwik.

npm create qwik@latest

W porządku. Zbudujmy to za pomocąnpm run build

Teraz zauważysz mnóstwo małych kawałków mniejszych niż jeden kilobajt zamiast jednego ogromnego pakietu. To jest leniwa procedura ładowania. Zapewnia to Qwik możliwość nieskończonego skalowania tak dużej ilości kodu JavaScript, jak to tylko możliwe.

W porządku! Teraz możesz uruchomić aplikację za pomocą npm run devDomyślna strona internetowa jest dostępna pod adresemhttp://localhost:5173/

Zobaczmy, jak ładuje pakiet JS zdarzenia po kliknięciu w przycisku Time to świętować za pomocą inspect.

Jeśli otworzymy zakładkę network, znajdziemy tylko początkowe pakiety JS. Po kliknięciu przycisku załaduje się pakiet JS odpowiedni dla przycisku.

Ponadto Qwik jest przyjazny dla programistów, ponieważ możemy nacisnąć Alt i kliknąć w dowolnym miejscu, aby otworzyć jego kod z ulubionego IDE.

Bonus — Jeśli pójdziesz do http://localhost:5173/demo/flower?pride=true, zobaczysz obracający się kolorowy kwiat.

Qwik umożliwia dodawanie integracji, aby ułatwić łączenie się z narzędziami i usługami, takimi jak React, Tailwind CSS itp. za pomocą npm run qwik addpoleceń. Obsługiwane integracje są wymienione w ich oficjalnych dokumentach tutaj .

Qwik oferuje również doskonały interaktywny samouczek , który pomoże Ci lepiej zapoznać się z ich koncepcjami. Mam nadzieję, że możesz go użyć do szybkiej nauki Qwik.

Zasoby

• Oficjalna strona —https://qwik.builder.io
• Qwik GitHub —https://github.com/BuilderIO/qwik
• Dokumenty —https://qwik.builder.io/docs/overview/
• Demo StackBlitz —https://stackblitz.com/edit/qwik-todo-demo

Nowe innowacyjne podejście Qwik (Resumability) oferuje nową drogę naprzód dla front-endowych frameworków JavaScript.

Z pewnością będzie to rama zmieniająca gry dla świata. Ciekawie będzie zobaczyć, dokąd zmierzają sprawy.

Mam nadzieję, że ten artykuł pomógł Ci zrozumieć podstawowe zasady platformy Qwik. Czekamy również na aktualizacje Qwik w nadchodzących artykułach.

Dziękuję za przeczytanie, zostaw komentarz na Qwik. Szczęśliwego kodowania!

Kodowanie na wyższym poziomie

Dziękujemy za bycie częścią naszej społeczności! Zanim pójdziesz:

• Klaskajcie za relację i śledźcie autora
• Zobacz więcej treści w publikacji Level Up Coding
• Bezpłatny kurs rozmowy o kodowaniu ⇒ Zobacz kurs
• Śledź nas: Twitter | LinkedIn | Biuletyn