Astro to innowacyjny framework webowy, który zdobywa coraz większą popularność wśród społeczności programistów webowych. Jego głównym celem jest przyspieszenie tworzenia stron internetowych skoncentrowanych na treści. W tym artykule przyjrzymy się bliżej Astro, jego unikalnym cechom i zaletom, a także podzielimy się naszym doświadczeniem z korzystania z tego frameworka.
Wprowadzenie do Frameworka
Zanim zagłębimy się w nasze doświadczenia z Astro, przyjrzyjmy się kilku ogólnym aspektom tego frameworka.
Framework MPA
Astro jest frameworkiem strony internetowej typu Multi-Page Application (MPA). Co to dokładnie oznacza? Oznacza to, że Astro renderuje strony na serwerze, więc podczas przeglądania witryny otrzymujemy ciągłe przesyłanie tych stron. Jest to przydatne dla stron skoncentrowanych na treści, ponieważ nie wymagają one interaktywności na każdej stronie. Nie martw się jednak, Astro może leniwie ładować JavaScript po stronie klienta za pomocą swojej architektury Island ale o tym poniżej.
MPA różnią się od aplikacji typu Single-Page Application (SPA), ponieważ w przypadku SPA HTML jest renderowany lokalnie przez framework lub bibliotekę. React jest biblioteką SPA, która renderuje HTML na podstawie reprezentacji wirtualnego drzewa DOM, określając, co i kiedy powinno być renderowane. Jeśli chcesz dowiedzieć się więcej o React, zapraszamy do zapoznania się z naszym dokumentem o historii React.
Co czyni Astro wyjątkowym?
Astro reklamuje się jako wyjątkowy framework, ponieważ używa JavaScriptu zarówno jako języka serwerowego, jak i języka uruchomieniowego. Osobiście cieszę się z tej możliwości, ponieważ przełączanie kontekstu jako deweloper full-stack może być trudne, gdy używa się wielu języków.
Framework pozwala również na przyniesienie własnych technologii (BYOT). Nie ma żadnego problemu, jeśli wolisz mieć prosty blog, który używa tylko czystego JS i CSS, ale jeśli chcesz dostarczyć więcej atrakcji, możesz to zrobić. Dzięki łatwemu w użyciu interfejsowi wiersza poleceń Astro możesz dodać React, Vue i inne integracje!
Wreszcie, chciałbym wspomnieć o jednym z głównych punktów sprzedaży Astro. Dostarcza on mniej kodu JavaScript! Dzięki temu spełniają swoje obietnice "szybkości domyślnej".
Architektura Island
Wynalezienie architektury Island przypisuje się Katiemu Sylor-Millerowi, architektowi frontendu Etsy. Jeśli myślisz o swojej aplikacji jako o obszarach statycznych i dynamicznych, to możesz sobie wyobrazić, jak działa architektura Island. Jeśli użyjesz mojej strony głównej https://cskl.pl/ jako przykładu:
Kilka elementów interaktywnych wymaga JavaScriptu, podczas gdy wszystko inne jest statyczne. Idea wysp polega na tym, że statyczne elementy interfejsu użytkownika (obrazy, tekst itp.) mogą być renderowane na serwerze i dostarczane bez JavaScriptu, a komponenty interaktywne, które wymagają JavaScriptu do interakcji, są określane jako "wyspy". Określając ich priorytet, można upewnić się, że interaktywność ładowana jest w pierwszej kolejności, podczas gdy drugorzędne elementy mogą być ładowane podczas przeglądania przez użytkownika.
Kiedy go używać?
Ogólnie rzecz biorąc, programiści wybierają aplikacje typu Single-Page Applications, gdy potrzebują dużej ilości interaktywności i logiki po stronie klienta. Gmail lub Kalendarz Google to świetne przykłady. Te bardzo złożone aplikacje internetowe wymagają JavaScriptu dla najlepszego doświadczenia użytkownika. Porównując Gmail z moją stroną firmową https://cskl.pl/, łatwo można zobaczyć, dlaczego mogę używać frameworka MPA w porównaniu do wymagań interaktywnych znanej usługi pocztowej Google.
Strony skoncentrowane na treści z mniejszą ilością interakcji klienta doskonale pasują do MPA, ponieważ możemy leniwie ładować te części, które wymagają JavaScriptu. Oznacza to szybsze renderowanie stron z serwera, z inkrementalnym dodawaniem JavaScriptu, gdy jest to potrzebne, przy użyciu architektury Island.
Doświadczenie z Astro
Moja przygoda z Astro jest ograniczona do przeczytania dokumentacji, przetestowania samouczka, stworzenie bloga z samouczka aż wkoću przepisanie strony firmowej z użyciem Astro. Framework skupia się na wysyłaniu mniej kodu JavaScript domyślnie i ułatwia tworzenie wydajnych stron z architekturą Island. Czas pokaże, jak dobrze Astro zostanie przyjęte; z mojego doświadczenia mogę stwierdzić, że Astro zasługuje na uznanie za to, jak łatwo się go uczy. Dla stron skoncentrowanych na treści, które nie wymagają JavaScriptu na każdym kroku, Astro oferuje łatwe w użyciu, silne doświadczenie deweloperskie i podejście do tworzenia czegoś niesamowitego. Ja jestem zachywcony Astro i widzę go jako alternatywę lub nawet konkurent NextJs.
Podoba się Tobie artykuł? Chcesz mieć szybką stronę jak ta? Zapraszam do zakładki kontkt po darmową wycenę.