Formation Astro

Dans cette formation, vous apprendrez à créer des applications web complètes et performantes avec Astro.

Vous découvrirez les concepts qui font d'Astro une technologie très puissante :
- rendu serveur (SSR) et statique (SSG) pour maximiser le SEO et les performances d'affichage,
- méta-framework pour sortir de la guerre des frameworks front-end,
- îlots d'interactivité et transitions de vue pour une expérience utilisateur optimale,
- les bases de la programmation full-stack pour pouvoir créer des API simples en autonomie.

Durant toute la formation, nous suivrons ensemble le projet fil rouge : créer votre propre portfolio développeur avec Astro !

Cette formation s'adresse à des développeurs et développeuses, ayant des connaissances de base en développement web avec une librairie JavaScript moderne : React, Vue, Solid et Svelte sont les bienvenus ! Une connaissance basique du développement Node.js ou d'un autre langage serveur est suffisante.

Les objectifs

• Créer des pages web performantes avec Astro
• Structurer un site de contenu (blog, ecommerce...) à l'aide des collections de contenus
• Intégrer un framework frontend interactif parmi : React, Vue, Lit, Solid ou Svelte
• Mobiliser les fonctionnalités backend d'Astro : API, SSR/SSG, actions serveur

Pré-requis

• Maîtriser les bases du développement HTML/CSS/JavaScript : savoir créer une page web simple
• Maîtriser les bases d'un environnement de développement JavaScript avec npm
• Maîtriser les bases d'au moins un framework frontend parmi React, Vue, Solid ou Svelte : savoir créer un composant interactif, gérer son état, récupérer des données
• Maîtriser les bases du protocole HTTP : connaître le principe de requête/réponse, savoir créer une API très simple avec Express.js ou équivalent
• Ordinateur portable à apporter

Le programme de la formation Astro

Jour 1 : Découverte d'Astro

• Introduction
  • Pourquoi le framework Astro a-t-il été conçu ?
  • L'écosystème Astro
• Coder une landing page performante
  • Structure des applications et des composants Astro
  • Créer une application Astro avec une première page
  • Écrire des styles CSS
  • Exécuter du JavaScript côté client
  • Découverte des innovations d'Astro : SSR, méta-framework, îlots d'interactivité
• Coder plusieurs pages et naviguer entre elles
  • Le routeur fondé sur les fichiers
  • Compositions avec les slots et spécificités des layouts dans Astro
  • Les liens dans Astro, SPA versus MPA
• Optimiser les images
  • Découverte du composant "Image" fourni par le framework

Mise en pratique : créer les premières pages de notre portfolio
- Initialiser une nouvelle application Astro
- Créer la page d'accueil de votre portfolio développeur
- Créer une page pour lister vos expériences et un lien vers cette page
- Créer un layout avec un pied de page
- Optimiser une image d'en-tête

Jour 2 : contenu et interactivité

• Un micro-blog en markdown
  • Créer une page en markdown
  • Créer un ensemble de pages structurées avec une collection
• Installer une librairie JavaScript
  • Intégrer votre librairie favorite dans Astro : React, Vue, Svelte ou Solid
  • Créer un composant interactif chargé en tant que "client island"
• Des animations avec les transitions de vue
  • Principe des transitions de vue et de la navigation SPA

Mise en pratique : ajouter un blog à notre portfolio
- Créer une page de mentions légales en markdown
- Créer un blog en markdown
- Créer un bouton de copier-coller du lien d'un blog avec une librairie frontend
- Utiliser des transitions de vues lors du passage d'un article à un autre

Jour 3 : Data fetching et API

• Backend For Frontend
  • Découverte du principe du BFF
  • Mettre en place le rendu statique (SSG) d'une page dynamique
• La mise en production
  • Compiler une application Astro
  • Mettre en place un adaptateur serveur
  • Bilan rendus serveur et statique
• API et fonctionnalités backend
  • Créer des points d'entrées d'API dans Astro
  • Consommer des données pour les afficher (data fetching)
  • Actions serveurs pour gérer les envois de formulaires

Mise en pratique : créer un système de likes avec une API et un backend
- Configurer getStaticPaths() pour le rendu statique d'un micro-blog
- Créer deux points d'entrée : liker un article, et récupérer le nombre de likes
- Consommer les données pour afficher le nombre de likes
- Créer un point d'entrée d'incrément du nombre de likes
- Créer un composant interactif pour liker un article en utilisant les server actions

Télécharger le programme

Le(s) formateur(s)

Eric BUREL

Eric est ingénieur diplômé de l'ENSIMAG et vit à Montpellier. Développeur et consultant indépendant au sein de sa société LBKE, il a participé à l'émergence de plusieurs startups technologiques.

Eric est investi dans le monde de l'open source, en tant que membre du collectif Devographics qui organise les enquêtes annuelles State of JavaScript, State of CSS, HTML, GraphQL et React. Il développe les applications Next.js et Astro de Devographics.

Il a formalisé et rendu public un pattern de programmation innovant pour la Jamstack, le rendu statique personnalisé, qui réduit la consommation des applications web et qu'il sera ravi de vous présenter au cours des formations.

Depuis 2020, Eric donne le cours d'introduction au développement web aux élèves-ingénieurs de l'EPF Montpellier.

Il partage régulièrement ses connaissances sous la forme d'articles sur Smashing Magazine.

Retrouvez Eric sur GitHub, son blog ou encore Twitter.

Voir son profil détaillé

FAQ

8 raisons de participer à une formation Human Coders

• Satisfaction client élevée : Un taux de statisfaction de 4,6/5 depuis 2012 (sur 1646 sessions réalisées). 99% des participants se disent satisfaits de nos formations
• Approche pédagogique unique : Des formations en petit groupe, des formateurs passionnés et expérimentés, de véritables workshops... (Plus d'infos sur notre manifeste)
• Catalogue de formations complet : 170 formations au catalogue, de quoi vous accompagner sur tout vos projets
• Écosystème dynamique : Nous accompagnons les dev depuis 13 ans avec des initiatives comme Human Coders News, les Human Talks, le podcast ou encore notre serveur Discord
• Financement facilité : Organisme certifié Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• Références clients prestigieuses : De nombreux clients qui nous font confiance depuis des années
• Accompagnement sur mesure : Nous vous proposons un accompagnement personnalisé par nos consultants pour vous aider dans vos projets au-delà de la formation
• Valorisation professionnelle : Remise d'un diplôme, d'une attestation et d'une certification, suivant les formations effectuées, que vous pourrez afficher sur vos CV et réseaux sociaux