Polymer JS v3
- Durée
- Durée :3 jours
- Niveau
- Niveau :Intermédiaire
- Certification
- Certification :Non
Intra uniquement
Aucune session prévue
Astro JS : Développez des sites web modernes, rapides et ultra-optimisés
Apprenez à créer des sites web performantes avec le framework JavaScript moderneDescription de la formation Astro JS
Qu'est-ce que la formation Astro JS ?
Astro est un framework JavaScript moderne conçu pour développer des sites web rapides, statiques ou dynamiques, tout en utilisant une syntaxe simple et des composants issus de plusieurs bibliothèques front-end. Sa philosophie repose sur le principe « Island Architecture », rendant les sites plus performants et moins dépendants du JavaScript côté client.
Pourquoi suivre une formation Astro JS ?
Astro JS est aujourd’hui l’un des frameworks les plus prometteurs pour le développement web moderne. Il permet aux développeurs de produire des sites rapides, facilement indexables, tout en optimisant les performances SEO et l'expérience utilisateur. Cette formation est idéale pour les professionnels du web souhaitant maîtriser une technologie à la fois performante, intuitive et compatible avec des outils comme React, Vue ou Svelte.
Programme de la formation
Objectif opérationnel :
Savoir développer en autonomie des sites web statiques et dynamiques performants avec le framework Astro.
Objectifs pédagogiques :
À l'issue de cette formation Astro JS, vous aurez acquis les connaissances et compétences nécessaires pour :
- Comprendre les fondamentaux et l’architecture d’Astro
- Créer des composants Astro et les intégrer à des pages HTML
- Utiliser des composants React, Vue ou Svelte dans Astro
- Maîtriser le routage, le rendu côté serveur (SSR) et la génération statique
- Intégrer une logique côté client de manière optimale
- Gérer les données dynamiques avec Markdown, API ou CMS
Jour 1
Comparaison avec d'autres frameworks (Next.js, Nuxt, SvelteKit...).
Installation de Node.js, Astro CLI et création d’un premier projet.
Structure de fichiers et compréhension du fichier astro.config.mjs.
Pourquoi Astro est-il particulièrement performant sur le plan SEO et UX ?
Création de composants réutilisables.
Injection de données via frontmatter et scripts set:html.
Ajout de styles scoped et gestion des assets.
Comment séparer la logique serveur et client dans Astro ?Travaux pratiquesObjectif : Créer un site statique avec des composants Astro.
Description : Mise en place d’un projet avec une page d’accueil composée de plusieurs composants Astro réutilisables. Validation par rendu dans l’environnement de développement local.Jour 2
Création de pages statiques et dynamiques avec paramètres ([slug].astro).
Mise en place d’une navigation entre pages avec <a> et <Astro.client>.
Utilisation de layouts globaux pour mutualiser des blocs HTML.
Quelles sont les bonnes pratiques pour une navigation fluide dans Astro ?
Importation et affichage de composants issus d’autres frameworks.
Utilisation des directives client:load, client:idle, client:visible.
Bonnes pratiques de performance avec les composants interactifs.
Pourquoi utiliser Astro comme "meta-framework" multi-librairies ?Travaux pratiquesObjectif : Construire un site multi-pages avec intégration de composants interactifs.
Description : Création d’un mini-site avec pages dynamiques, menu de navigation et intégration d’un composant React (ou autre). Validation par test fonctionnel du site.Jour 3
Utilisation de JSON local pour alimenter des composants.
Requêtes vers des API tierces côté serveur.
Affichage conditionnel et génération de routes dynamiques.
Comment Astro permet-il de gérer un blog ou un site de documentation ?
Introduction aux directives getStaticPaths et getStaticProps.
Bonnes pratiques de SEO avec balises méta et chargement progressif.
Optimisation des performances : lazy loading, script splitting, minification.
Quelles sont les étapes pour publier un site Astro professionnellement ?Travaux pratiquesObjectif : Finaliser et déployer un site dynamique Astro.
Description : Création d’un blog simple avec génération de pages via Markdown, intégration d’un menu dynamique, et déploiement sur Netlify. Validation par mise en ligne et test Lighthouse.
Comprendre Astro et initialiser un projet
Présentation du framework Astro et de ses principes clés (Island Architecture, rendu statique).Comparaison avec d'autres frameworks (Next.js, Nuxt, SvelteKit...).
Installation de Node.js, Astro CLI et création d’un premier projet.
Structure de fichiers et compréhension du fichier astro.config.mjs.
Pourquoi Astro est-il particulièrement performant sur le plan SEO et UX ?
Syntaxe Astro et création de composants
Introduction aux fichiers .astro et à la structure du code.Création de composants réutilisables.
Injection de données via frontmatter et scripts set:html.
Ajout de styles scoped et gestion des assets.
Comment séparer la logique serveur et client dans Astro ?Travaux pratiquesObjectif : Créer un site statique avec des composants Astro.
Description : Mise en place d’un projet avec une page d’accueil composée de plusieurs composants Astro réutilisables. Validation par rendu dans l’environnement de développement local.Jour 2
Gestion du routage et navigation
Comprendre la logique de routage basée sur le dossier pages.Création de pages statiques et dynamiques avec paramètres ([slug].astro).
Mise en place d’une navigation entre pages avec <a> et <Astro.client>.
Utilisation de layouts globaux pour mutualiser des blocs HTML.
Quelles sont les bonnes pratiques pour une navigation fluide dans Astro ?
Intégrer des composants React, Vue, Svelte
Installation de bibliothèques externes via @astrojs/renderer-*.Importation et affichage de composants issus d’autres frameworks.
Utilisation des directives client:load, client:idle, client:visible.
Bonnes pratiques de performance avec les composants interactifs.
Pourquoi utiliser Astro comme "meta-framework" multi-librairies ?Travaux pratiquesObjectif : Construire un site multi-pages avec intégration de composants interactifs.
Description : Création d’un mini-site avec pages dynamiques, menu de navigation et intégration d’un composant React (ou autre). Validation par test fonctionnel du site.Jour 3
Données dynamiques avec Markdown, JSON et API
Lecture de contenu depuis des fichiers Markdown avec Astro.glob.Utilisation de JSON local pour alimenter des composants.
Requêtes vers des API tierces côté serveur.
Affichage conditionnel et génération de routes dynamiques.
Comment Astro permet-il de gérer un blog ou un site de documentation ?
Déploiement, SEO et optimisation des performances
Préparation au déploiement sur Vercel, Netlify, GitHub Pages.Introduction aux directives getStaticPaths et getStaticProps.
Bonnes pratiques de SEO avec balises méta et chargement progressif.
Optimisation des performances : lazy loading, script splitting, minification.
Quelles sont les étapes pour publier un site Astro professionnellement ?Travaux pratiquesObjectif : Finaliser et déployer un site dynamique Astro.
Description : Création d’un blog simple avec génération de pages via Markdown, intégration d’un menu dynamique, et déploiement sur Netlify. Validation par mise en ligne et test Lighthouse.
Public cible :
Ce cours s'adresse aux développeurs web, intégrateurs, chefs de projet technique et toute personne souhaitant créer des sites performants avec des technologies modernes.
Prérequis :
Une bonne maîtrise du HTML, CSS et de JavaScript sont nécessaires pour suivre cette formation. Des connaissances de base en React, Vue ou un autre framework JS faciliteraient l'assimilation des concepts avancés d'Astro.
J'évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Date de mise à jour du programme : 23/02/2026
Dates et lieux
Période souhaitée
Lieux
Type d'affichage