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, Lit, 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 et des pages dynamiques
• Intégrer un framework frontend interactif parmi : React, Vue, Lit, Solid ou Svelte
• Créer un point d'entrée d'API avec Astro

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, Lit, 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
• Ordinateur portable à apporter

Le programme de la formation Astro

Jour 1 : Découverte d'Astro

• Introduction
  • Définition d'un méta-framework
  • L'innovation d'Astro : rendu serveur et ilôts d'interactivité
  • L'écosystème Astro : Discord, GitHub, documentation
• Coder une landing page performante
  • Créer une application Astro avec une première page
  • Écrire du CSS
  • Charger du JavaScript
• Coder plusieurs pages et naviguer entre elles
  • Le routeur fondé sur les fichiers
  • Les liens dans Astro, SPA versus MPA
• Créer un layout
  • Particularités de la notion de layout dans Astro

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

Jour 2 : contenu et interactivité

• Un micro-blog en markdown
  • Créer une page en markdown
  • Créer une collection de pages
  • Mettre en place le rendu statique (SSG)
• Installer une librairie JavaScript
  • Intégrer votre librairie favorite dans Astro : React, Vue, Lit, Svelte ou Solid
  • Utiliser MDX pour charger un composant dans du markdown
• 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 micro-blog en markdown
- Configurer getStaticPaths() pour le rendu statique
- Créer un bouton de copier-coller du lien d'un blog avec une librairie frontend
- Intégrer des vidéos YouTube dans un fichier markdown/mdx
- Utiliser des transitions de vues lors du passage d'un article à un autre

Jour 3 : Data fetching et API

• Créer un point d'entrée d'API
  • Créer des points d'entrées d'API dans Astro pour servir des données et gérer des formulaires
• Data fetching lors du rendu
  • Consommer une API côté client
  • Consommer des données côté serveur
  • Principe du Backend For Frontend
• Du contexte avec Astro.locals
  • Éviter le props drilling avec Astro.locals

Mise en pratique : créer un système de likes avec une API et un backend
- Créer deux points d'entrée : liker un article, et récupérer le nombre de likes
- Utiliser l'API pour afficher le nombre de likes
- Utiliser directement la base de 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

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é

A propos de Human Coders

Human Coders c'est un centre de formation pour développeurs avec :

• une certification Qualiopi, indispensable pour que vous puissiez obtenir des aides au financement via votre OPCO
• de nombreux clients qui nous font confiance depuis des années
• un manifeste pour garantir des formations à taille humaine, des formateurs passionnés, de véritables workshops...
• 120 formations au catalogue, 1555 sessions depuis nos débuts en 2012 avec une moyenne de satisfaction de 4,6/5
• la possibilité de vous proposer un accompagnement personnalisé ou du conseil après la formation