W trakcie tworzenia aplikacji z wykorzystaniem frameworka Astro, naturalnym jest poszukiwanie efektywnych metod zarządzania stanem aplikacji oraz jego współdzielenia między różnymi komponentami i frameworkami. Nano Stores jawi się jako jedno z optymalnych rozwiązań w tej dziedzinie, oferując kompatybilność z popularnymi bibliotekami, takimi jak React, Preact, Svelte, Solid, Lit, Angular, a także z czystym JavaScript.
W niniejszym artykule zgłębimy tajniki zarządzania stanem w projektach Astro. Poprzez realizację prostego projektu aplikacji do notowania, zademonstrujemy, jak wykorzystać Nano Stores do zarządzania stanem oraz jego wymiany pomiędzy komponentami stworzonymi w React i Solid.js.
Czym jest Astro?
Astro to framework, który umożliwia budowę aplikacji internetowych z wykorzystaniem znanych frameworków UI, takich jak React, Preact, Vue czy Svelte. Kluczową cechą Astro jest jego oparcie o architekturę komponentową, gdzie każda strona składa się z różnorodnych, niezależnych elementów.
Astro dąży do minimalizacji ilości kodu JavaScript po stronie klienta, co przekłada się na szybsze ładowanie strony. W tym celu wykorzystuje wstępne renderowanie stron po stronie serwera, a kod JavaScript jest wysyłany do przeglądarki tylko w przypadku elementów interaktywnych, i to w minimalnej potrzebnej ilości.
Astro jest szczególnie rekomendowane do tworzenia witryn zorientowanych na treść, takich jak blogi, strony docelowe, serwisy informacyjne oraz inne strony, gdzie interaktywność nie jest priorytetem. Dla elementów interaktywnych framework dostarcza jedynie niezbędne minimum kodu JavaScript, zapewniając tym samym optymalną wydajność.
Instalacja i przygotowanie środowiska
Jeśli posiadasz już skonfigurowany projekt Astro, możesz przejść do następnej sekcji.
W przypadku braku projektu Astro, konieczne jest jego utworzenie. Jedynym wymogiem jest posiadanie zainstalowanego środowiska Node.js na komputerze.
Aby rozpocząć nowy projekt, otwórz wiersz poleceń, przejdź do wybranego folderu i wykonaj poniższe polecenie:
npm create astro@latest
Potwierdź instalację Astro, wpisując „y”, a następnie podaj nazwę folderu, w którym ma zostać umieszczony projekt. W razie jakichkolwiek problemów, możesz skorzystać z oficjalnego poradnika konfiguracji Astro.
Po utworzeniu projektu, wykonaj następujące polecenie, aby dodać obsługę React:
npx astro add react
Na koniec zainstaluj bibliotekę Nano Stores dla React, używając poniższego polecenia:
npm i nanostores @nanostores/react
Wciąż pracując w terminalu, przejdź do głównego folderu projektu i uruchom aplikację, korzystając z jednego z poniższych poleceń (w zależności od używanego menedżera pakietów):
npm run dev
Lub:
yarn run dev
Lub:
pnpm run dev
Następnie otwórz przeglądarkę internetową i przejdź do adresu http://localhost:3000, aby zobaczyć podgląd strony.
Kolejnym krokiem po przygotowaniu projektu Astro jest utworzenie magazynu danych aplikacji.
Tworzenie magazynu notatek
W katalogu /src, stwórz plik o nazwie noteStore.js. W tym pliku, za pomocą funkcji atom() z biblioteki nanostores, utworzymy magazyn notatek:
import { atom } from "nanostores"export const notes = atom([])
export function addNote(note) {
notes.set([...notes.get(), note])
console.log("Added note: ", note.get())
}
Funkcja addNote() przyjmuje notatkę jako argument i zapisuje ją w magazynie notatek. Wykorzystuje operator rozpraszania do utworzenia nowej kopii tablicy, zapobiegając tym samym modyfikacji oryginalnych danych. Operator rozpraszania to wygodny sposób na kopiowanie obiektów w JavaScript.
Tworzenie interfejsu aplikacji do notowania
Interfejs użytkownika będzie prosty, składał się z pola tekstowego do wprowadzania notatek oraz przycisku, który po kliknięciu doda notatkę do magazynu.
W folderze src/components utwórz nowy plik o nazwie NoteAddButton.jsx i wklej do niego następujący kod:
import {useState} from "react"
import {addNote, notes} from "../noteStore"export default function NoteAdder() {
const [userNote, setUserNote] = useState('')
return(
<>
<label htmlFor="note">Add a note: </label>
<input type="text" name="note" id="note"
onChange={(event) => setUserNote(event.target.value)} />
<button onClick={() => addNote(userNote)}>Add</button>
<ul>
{
$notes.map((note, index) => {
<li key={index}>{note}</li>
})
}
</ul>
</>
)
}
Powyższy kod dodaje notatkę do stanu komponentu podczas wpisywania tekstu. Po kliknięciu przycisku, notatka jest zapisywana w magazynie danych. Pobiera on także notatki z magazynu i wyświetla je w postaci nieuporządkowanej listy. Dzięki takiemu podejściu, notatka pojawia się na stronie natychmiast po jej dodaniu.
Teraz w pliku Pages/index.astro, zaimportuj komponent NoteAddButton i umieść go w tagach
import NoteAddButton from "../components/NoteAddButton.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
</main>
</Layout>
Po odświeżeniu przeglądarki na stronie powinien pojawić się element wejściowy i przycisk. Wpisz tekst w polu i kliknij przycisk Zapisz. Notatka powinna pojawić się na stronie i pozostać tam, nawet po ponownym załadowaniu strony.
Współdzielenie stanu pomiędzy dwoma frameworkami
Załóżmy, że chcemy współdzielić stan pomiędzy komponentami React i Solid.js. W pierwszym kroku, dodaj obsługę Solid.js do swojego projektu, wykonując następujące polecenie:
npx astro add solid
Następnie, zainstaluj Nano Stores dla Solid.js, korzystając z polecenia:
npm i nanostores @nanostores/solid
Aby utworzyć interfejs użytkownika w Solid.js, przejdź do katalogu src/components i utwórz nowy plik o nazwie Notes.js. Otwórz plik i zdefiniuj w nim komponent Notes:
import {useStore} from "@nanostores/solid"
import {notes} from "../noteStore"
import {For} from "solid-js"export default function Notes() {
const $notes = useStore(notes)
return(
<>
<h1>My notes</h1>
<ul>
<For each={notes()} />
{(note) => <li>{note}</li>}
</For>
</ul>
</>
)
}
W tym kodzie importujemy notatki z magazynu, iterujemy po nich i wyświetlamy na stronie.
Aby wyświetlić powyższy komponent Notes, stworzony w Solid.js, przejdź do pliku Pages/index.astro, zaimportuj komponent NoteAddButton oraz Notes, a następnie użyj ich w tagach
import NodeAddButton from "../components/NoteAddButton.jsx"
import Nodes from "../components/Notes.jsx"
---
<Layout title="Welcome to Astro.">
<main>
<NoteAddButton client:load />
<Notes client:load />
</main>
</Layout>
Teraz, po powrocie do przeglądarki, wpisz tekst w polu i kliknij przycisk Zapisz. Notatka powinna pojawić się na stronie i być widoczna pomiędzy renderowaniami komponentów.
Inne funkcje Astro
Przedstawione techniki umożliwiają efektywne zarządzanie stanem aplikacji Astro i dzielenie się nim pomiędzy różnymi komponentami i frameworkami. Astro oferuje jednak wiele innych przydatnych funkcji, takich jak zbieranie danych, minifikacja kodu HTML oraz renderowanie równoległe, które warto zgłębić, aby w pełni wykorzystać potencjał tego frameworka.
newsblog.pl