Czym jest QwikJs?

Qwik jest kolejny frameworkiem który pozwala nam na pisanie stron internetowych oraz aplikacji webowych renderowanych po stronie serwera (SSR - Server Side Rendering), podobnie jak NextJs lub NuxtJs.

Różni się jednak od wyżej wymienionych narzędzi z uwagi na świeże podejście do tematu renderowania. Qwik wykorzystuje technikę “wznawiania” (resumable). Dzięki temu ilość kodu dostarczanego do naszych przeglądarek jest minimalna.

Qwik to framework stworzony przez grupę doświadczonych programistów, którzy cenią sobie optymalizację oprogramowania.

  • Miško Hevery: Twórca frameworku AngularJs
  • Manu Almeida: Twórca frameworku Gin dla języka Go
  • Adam Bradley: Twórca frameworku Ionic

Jak działa “Wznawianie”?

Większość aktualnych narzędzi wykorzystuje tzw. Hydrację do ładowania i aktualizowania strony. Polega ona na tym, że kiedy wchodzimy na stronę obsługiwaną przez framework korzystający z hydracji, pobiera on kod HTML strony, pliki JavaScript, wykonuje kod JS oraz przypisuje nasłuchy zdarzeń. Powoduje to większą paczkę kodu do pobrania przez naszą przeglądarkę, przez co nasza aplikacji lub strona może być mniej wydajna. Jeżeli piszemy stronę internetową, dla której ważne jest, aby wyświetlała się jak najwyżej w wyszukiwaniach w Google, to optymalizacja szybkości ładowania strony jest konieczna.

Optymalizacja szybkości ładowania

Jeżeli chcemy piąć się w rankingu Google’a, potrzebujemy, by nasza strona pozytywnie zdała testy optymalizacji pod względem szybkości ładowania strony, ale również zastosowania odpowiednich praktyk kodowania treści. Na ich podstawie wyszukiwarka ocenia, jak wysoko będziemy się wyświetlać.

Czym w takim razie jest “Wznawianie”?

Wznawianie to nowe podejście do problemu reaktywności aplikacji webowych. W odróżnieniu od pobierania i wykonywania kodu JS, nasz kod JavaScript pobierany jest dopiero, kiedy jest potrzebny.

Wzawianie

Jest to możliwe dzięki temu, że qwik dzieli nasz kod na małe paczki, które doładowuje w trakcie.

Qwik w praktyce

Do stworzenia szablonu projektu w QwikJs, potrzebujemy mieć zainstalowanego NodaJs w wersji 16.0 lub wyższej. Aby wygenerować szablon, wystarczy wpisać:

npm create qwik@latest

Po wpisaniu komendy do terminala powinniśmy zostać przeprowadzeni przez proces instalacji. Zostaniemy poproszeni o podanie nazwy projektu, typu projektu oraz czy automatycznie pobrać wszystkie zależności.

Proces instalacji

Czym jest QwikCity?

Jak możecie zauważyć, podczas instalacji wybraliśmy typ aplikacji jako QwikCity. W skrócie QwikCity odpowiada za takie rzeczy jak routing. Możemy powiedzieć, że QwikCity jest dla Qwika czymś jak NextJs jest dla Reacta.

Wznawianie w praktyce

Aby odpalić projekt, wystarczy wpisać:

npm run dev

Dzięki czemu odpala nam się wersja deweloperska aplikacji.

Przejdę teraz do folderu routes i w pliku index.ts zmodyfikuję kod w taki sposób:


export default component$( () => {

 const state = useStore({
   couter: 0
  })

 return (
   <div class=”root”>
     <button onClick$={() => state.counter++} > {state.counter} </button>
   </div>
  );
  
});

Teraz, jeśli przejdziemy na stronę główną naszej strony, pokaże nam się przycisk z numerem przedstawiającym liczbę kliknięć w przycisk:

Strona główna

Jeśli sprawdzimy pobrane przez przeglądarkę pliki, zobaczymy bardzo małą ilość JavaScriptu:

Mała ilosć skryptów

Jeżeli wciśniemy przycisk, wywołamy funkcję inkrementującą liczbę na przycisku. Funkcja ta zostanie doładowana.

Funkcja inkrementująca

Podsumowanie

Jak widzimy, QwikJs ma duży potencjał, aby podbić świat IT, z uwagi na innowacyjne rozwiązanie problemu dotyczące optymalizacji ładowania strony. Polecam sprawdzić dokumentację Qwika, by dowiedzieć się więcej o tym ciekawym narzędziu.

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up