Debuter avec Astro

Démarrer avec Astro : un tutoriel approfondi pour les développeurs intermédiaires

Pourquoi Astro ?

Astro est une nouvelle génération de frameworks Front-end qui vise à rendre la création d'applications web plus rapide, plus énergétique et plus performante. Dans un contexte réel, un développement quotidien peut être saturé de problèmes comme des temps de chargement lents, des performances médiocres ou une difficulté à maintenir le code propre.

Un cas d'usage concret : Imaginez que vous travaillez sur une application e-commerce qui doit être rapide et performante. Avec Astro, vous pouvez construire des composants réutilisables, optimiser les images et les ressources, et utiliser un système de routing dynamique pour améliorer la vitesse de chargement de chaque page.

Prérequis

• Connaissance avancée de JavaScript ES6+
• Familiarité avec HTML5 et CSS3
• Installation de Node.js (v14.0+)
• Installation de npm (Node Package Manager)

Astro utilise une structure de projet moderne et est basé sur le principe de composants, ce qui nécessite des connaissances en programmation réactive.

Concepts fondamentaux

1. Composants (Components)

Les composants sont les blocs de base d'une application Astro. Ils sont des fichiers avec une extension .astro. Chaque composant peut contenir du HTML, du JavaScript et du CSS.

---
// Exemple d'un composant Astro
---

<button class="btn">Cliquez-moi</button>

<style>
.btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
}
</style>

2. Pages (Pages)

Les pages sont des composants spécifiques qui définissent les routes de votre application. Elles sont généralement situées dans le répertoire src/pages.

---
// Exemple d'une page Astro
title: Accueil
---

<h1>Bienvenue sur mon site</h1>

<style>
h1 {
  font-size: 2em;
}
</style>

3. Routage (Routing)

Astro utilise un système de routage basé sur les fichiers. Chaque fichier dans le répertoire src/pages crée une route correspondante.

## src/pages/index.astro
// Accueil

## src/pages/about.astro
// À propos

4. API (API)

Astro permet de créer des APIs rapidement et facilement en utilisant les composants de type .api.

---
// Exemple d'une API Astro
export async function get() {
  return new Response(JSON.stringify({ message: "Hello, World!" }), { status: 200 });
}

5. Environnements (Environments)

Astro supporte l'importation conditionnelle de modules en fonction de l'environnement.

---
// Exemple d'utilisation des environnements
import config from "./config";

const env = import.meta.env.NODE_ENV;
if (env === "development") {
  console.log("Mode développement");
} else if (env === "production") {
  console.log("Mode production");
}

Mise en pratique : projet fil rouge

Mini-projet : Un gestionnaire de tâches (Task Manager)

Dans ce mini-projet, nous allons créer un simple gestionnaire de tâches avec Astro. Nous aurons une page d'accueil qui affiche une liste de tâches et un formulaire pour ajouter de nouvelles tâches.

Étape 1 : Création du projet

npx astro create task-manager
cd task-manager

Étape 2 : Structure des fichiers

• src/pages/index.astro : Page d'accueil
• src/components/TaskList.astro : Composant pour afficher la liste de tâches
• src/components/AddTask.astro : Composant pour ajouter une nouvelle tâche

Étape 3 : Composant TaskList

---
// src/components/TaskList.astro
---

<ul>
  {tasks.map(task => (
    <li>{task}</li>
  ))}
</ul>

<script>
export let tasks = [];
</script>

Étape 4 : Composant AddTask

---
// src/components/AddTask.astro
---

<form on:submit={handleSubmit}>
  <input type="text" bind:value={newTask} placeholder="Ajoutez une tâche" />
  <button type="submit">Ajouter</button>
</form>

<script>
import { createSignal } from "solid-js";

let newTask = "";
const [tasks, setTasks] = createSignal([]);

function handleSubmit(event) {
  event.preventDefault();
  if (newTask.trim() !== "") {
    setTasks([...tasks(), newTask]);
    newTask = "";
  }
}
</script>

Étape 5 : Page d'accueil

---
// src/pages/index.astro
title: Gestionnaire de tâches
---

<AddTask />
<TaskList tasks={tasks} />

<style>
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 5px;
}
</style>

<script>
import { createSignal } from "solid-js";
import AddTask from "../components/AddTask.astro";
import TaskList from "../components/TaskList.astro";

let tasks = [];
</script>

Erreurs fréquentes et debugging

1. SyntaxError: Unexpected token '<'

## ❌ Mauvais
<div>Hello, World!</div>

## ✅ Correct
<h1>Hello, World!</h1>

2. ReferenceError: tasks is not defined

## ❌ Mauvais
<TaskList tasks={tasks} />

## ✅ Correct
<script>
import { createSignal } from "solid-js";
import TaskList from "../components/TaskList.astro";

let [tasks, setTasks] = createSignal([]);
</script>

<TaskList tasks={tasks()} />

3. TypeError: Cannot read property 'map' of undefined

## ❌ Mauvais
<ul>
  {tasks.map(task => (
    <li>{task}</li>
  ))}
</ul>

## ✅ Correct
<script>
import { createSignal } from "solid-js";

let tasks = [];
</script>

<ul>
  {() => tasks().map(task => (
    <li>{task}</li>
  ))}
</ul>

Pour aller plus loin

1. Utiliser des hooks de React

Astro est compatible avec les hooks de React, ce qui permet une grande flexibilité et la réutilisation des composants.

Documentation sur les hooks de React

2. Optimisation du rendu côté serveur (SSR)

Astro offre un support natif pour le rendu côté serveur, ce qui améliore significativement les performances des premiers chargements.

Documentation sur SSR

3. Intégration avec des bases de données

Astro peut être utilisé en conjonction avec diverses bases de données pour stocker et récupérer des données dynamiques.

Intégration avec Prisma

Défi pratique : Créer une API de blog

Construisez une simple API de blog qui permet d'ajouter, lire et supprimer des articles. Utilisez Astro avec un système de fichiers pour stocker les articles et affichez-les sur la page d'accueil.