Astro 1.0, czyli SSR nie z tej galaktyki – Frontend Weekly vol. 100

1. Astro 1.0

Astro to framework do Server Side Renderingu, który w wersji beta dostępny był już od ponad roku. W minionym tygodniu wreszcie ukazał się Astro 1.0, w którym twórcy zadeklarowali się ostatecznie ustabilizować publiczne API. O tym jak interesującym narzędziem jest Astro najlepiej świadczy fakt, że firmy takie jak Google, The Guardian, czy IKEA zdecydowały się korzystać z niego jeszcze zanim zostało ono określone jako “gotowe dla produkcyjnych aplikacji”.

Astro, podobnie jak opisywany przez nas kilka tygodni temu Fresh, oparty jest o architekturę wysp. Zakłada ona, że na tworzonej przez nas stronie/aplikacji wśród morza statycznej treści (np. menu nawigacji, artykuł) znajdują się małe wyspy interaktywnych komponentów (np. formularz zapisu do newslettera). Takie podejście pozwala wyrenderować całą aplikację po stronie serwera, a do klienta wysyłany jest tylko niewielkich rozmiarów kod komponentów-wysp.

Architektura wyspowa w Astro pod jednym względem przerasta tą zaimplementowaną w Fresh. Astro umożliwia dokładne zdefiniowanie kiedy dana wyspa ma podlegać hydracji. Taka funkcjonalność daje programistą dużą elastyczność w definiowaniu priorytetów. Dostępne dyrektywy specyfikujące priorytet to:

• `client:load` – komponent powinien być interaktywny najszybciej jak to możliwe
• `client:idle` – komponent będzie interaktywny dopiero gdy przeglądarka zakończy ładowanie strony
• `client:visible` – komponent będzie interaktywny dopiero kilka chwil po tym jak pojawi się na ekranie
• `client:media` – umożliwia hydrację komponentu tylko kiedy spełnione są odpowiednie Media Query.
• `client:only` – komponent nie będzie renderowany po stronie serwera, a po stronie klienta wyrenderowany zostanie z najwyższym priorytetem

Nietrudno domyślić się, że nie wszystkie aplikacje nadają się do wdrożenia architektury wyspowej. Przykładowo, mocno interaktywne aplikacje takie jak Figma, Miro czy Facebook charakteryzują się raczej morzem interaktywnych komponentów i wyspami statycznych fragmentów. Dla takich aplikacji lepiej sprawdzi się klasyczne podejście do Server Side Renderingu zakładające, że cała aplikacja podlega procesowi hydracji po stronie klienta. Architektura wyspowa sprawdzi się natomiast idealnie na wszelakich Landing Page’ach, blogach czy dokumentacjach.

Nawigacja w Astro, podobnie jak w Next.js, opiera się o strukturę katalogów. Do tworzenia stron wykorzystywane są pliki Markdown lub komponenty Astro. Te drugie są ciekawą wariacją na temat czystego HTML-a i JSX-a. Plik z takim komponentem możemy podzielić na dwie części: skrypt i szablon. Obie części oddzielone są od siebie czymś co twórcy nazywają płotkiem.

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Część skryptowa komponentów wykonywana jest zawsze po stronie serwera. Z jej poziomu możemy zaimportować inne komponenty lub pobrać wymagane dane. Tutaj dochodzimy do kolejnego wyróżnika Astro. Importowane komponenty mogą być zaimplementowane w dowolnym frameworku (obecnie wspierany jest  React, Preact, Svelte, Vue, SolidJS i Lit). Jedyne ograniczenie występuje w przypadku komponentów wysp, gdzie po wejściu do świata jednego frameworka nie możemy go już opuścić.

—
import HomeLayout from '../layouts/HomeLayout.astro'
import MyReactComponent from '../components/MyReactComponent.jsx';
import MySvelteComponent from '../components/MySvelteComponent.svelte';

const data = await fetch('API_URL').then(r => r.json());
---
<HomeLayout>
  <MyReactComponent client:load name={data.name}>
    <!-- This will work because Astro will render MySvelteComponent to pure HTML and pass it to React component -->
    <!-- If you want MySvelteComponent to be interactive you need to rewrite it to React -->
    <MySvelteComponent avatar={data.avatar}/>
  </MyReactComponent>
</HomeLayout>

Źródła:

https://astro.build/blog/astro-1/

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

2. Nowa komenda `npm query`

Mieliście kiedyś (nie)przyjemność debugować zależności z `node_modules`? Jeśli tak, to mamy dla Was dobrą wiadomość. Do npm v8.16 trafiła nowa komenda `npm query`, która umożliwia przeszukiwanie dependencji przy pomocy selektorów do złudzenia przypominających te znane z CSS.

Wyświetl wszystkie zależności:

npm query "*"

Wyświetl wszystkie wersje biblioteki moment i date-fns w projekcie:

npm query "#moment, #date-fns"

Wyświetl wszystkie wersje biblioteki moment, które nie są zadeklarowane jako peer-dependency:

npm query "#moment:not(.peer)"

Źródło:

https://github.blog/changelog/2022-08-03-introducing-the-new-npm-dependency-selector-syntax/

3. Angular dostanie swoje hooki?

Paweł Kozłowski jest jednym z bardziej rozpoznawalnych członków zespołu rozwijającego Angulara. Kilka dni temu w jednym z twitterowych wątków zapowiedział, że zespół pracuje nad RFC dla `computed values`, a dosłownie dzisiaj opublikował on swoją propozycję API.

Z jednej strony rozumiem potrzebę pojawienia się `copmuted values` w Angularze. Kilka tygodni temu w weekly dzieliliśmy się analizą porównawczą bliźniaczego kodu napisanego w różnych frameworkach. Przygotowałem wtedy coś na wzór `copmuted values` w oparciu o rxjs i widzę teraz zaproponowane API mogłoby uprościć to rozwiązanie. Z drugiej strony trochę przeraża mnie ten miraż klasowego cyklu życia z architekturą hooków. Z ostatecznymi wyrokami poczekam jednak na pełne RFC, które na pewno poruszy sporo nurtujących mnie przypadków brzegowych.

Odkryj więcej treści IT dopasowanych do Ciebie

W aplikacji Vived znajdziesz artykuły moderowane przez developerów.
Zainstaluj teraz i czytaj tylko dobre teksty!

Bonus: Krótka historia czytników ekranu

Na potrzeby procesu edytorskiego Vived, przeglądam codziennie sporo artykułów o tematyce około frontendowej. Rzadko zdarza się, żeby któryś przyciągnął mnie tak bardzo jak przygotowana przez The Verge krótka historia czytników ekranowych. Pełny osobistych historii i ciekawostek artykuł czyta się niczym powieść przygodową. Jeśli szukacie krótkiej lektury na długi weekend to zdecydowanie polecam!

Źródła:

https://www.theverge.com/23203911/screen-readers-history-blind-henter-curran-teh-nvda