Premiers pas avec Astro JS : un aperçu de son installation et de ses principales fonctionnalités

18 juillet 2023

Premiers pas avec Astro JS Une présentation de son installation et de ses principales fonctionnalités

La recherche est effectuée par Chris

Au début, les sites web HTML statiques étaient tout ce que nous avions. Aujourd'hui, Astro, un nouveau cadre d'application multi-pages JS, connaît un succès incroyable au sein de la communauté des développeurs web depuis quelques mois.

Le cadre Astro utilise principalement des technologies telles que Angular, React et Node.js pour créer des expériences web uniques pour les utilisateurs. Il est facile de commencer à utiliser Astro - il suffit d'avoir des connaissances de base en HTML, CSS et JavaScript (ou l'un des frameworks mentionnés).

Si vous souhaitez commencer à utiliser ce nouveau framework, cet article de blog vous donnera une vue d'ensemble du processus d'installation et de certaines des fonctionnalités principales.

C'est parti !

Qu'est-ce que l'Astro JS ?

Astro, le constructeur de sites web par excellence, est spécialement conçu pour créer des sites web captivants et riches en contenu. Astro vous couvre, que vous construisiez des sites de marketing, des applications à page unique, des sites de documentation, des blogs, des portfolios ou même des sites de commerce électronique !

D'un autre côté, la plupart des frameworks web modernes sont destinés à la création d'applications web. Ces différents frameworks sont parfaits pour créer ces expériences fantaisistes, semblables à des applications, directement dans votre navigateur.

Aujourd'hui, Astro adopte une approche différente. Astro fonctionne pour vous offrir des expériences de contenu époustouflantes. C'est pourquoi Astro crée certains compromis et offre des performances imbattables que les autres frameworks web axés sur les applications ne peuvent égaler.

Pourquoi utiliser Astro ?

En tant que cadre Javascript, Astro offre un certain nombre d'avantages par rapport à d'autres technologies de développement web. C'est pourquoi il est devenu populaire pour la création de sites web.

Si vous envisagez de créer un site web offrant une expérience utilisateur riche, Astro mérite d'être pris en considération. Voici quelques-uns des avantages que vous devriez connaître :

Sites web à chargement rapide

Astro est un outil puissant, qui fournit du contenu statique et du contenu rendu par le serveur, taillé sur mesure pour les sites Web dont le contenu est au premier plan et qui respectent les normes de référencement (SEO). Qu'il s'agisse d'un blog captivant, d'un didacticiel immersif ou d'un site marketing convaincant, Astro a tout prévu !

Startechup UI UX Design Service

Agnostique en matière d'interface utilisateur

Contrairement à Next.js, qui est limité à React, ou à Nuxt.js, qui exige une expertise Vue, Astro vous libère de toute contrainte de cadre d'interface utilisateur. Vous avez la liberté de n'en utiliser aucun, de créer le vôtre ou d'explorer la pléthore d'intégrations prises en charge.

Thèmes préfabriqués

Astro propose une gamme incroyable de thèmes et de modèles préconçus qui vous permettront de donner un coup de fouet à votre créativité en un rien de temps !

Facile à comprendre

Il n'est pas nécessaire de se plonger dans React ou Vue pour commencer votre voyage Astro. Avec son moteur de templating ressemblant à du HTML simple et la séparation nette du code de la présentation, vous pouvez commencer avec un projet vide et le construire à votre propre rythme.

Les piles sont incluses

Astro offre une série de fonctionnalités qui répondent à nos attentes en matière de framework JavaScript/TypeScript moderne. Il s'agit notamment des attentes de haut niveau, de la prise en charge de Markdown et de MDX, et de l'inclusion d'ESM.

Utilisation de l'architecture en îlots

L'architecture en îlot vous permet de mélanger de manière transparente du contenu statique, des composants rendus par le serveur et des composants rendus par le client sur une seule page, ce qui facilite la création de sites interactifs. De plus, vous pouvez même mélanger et assortir divers cadres sur la même page, ce qui ouvre des possibilités infinies pour créer des micro-frontends captivants.

Quand ne devriez-vous pas utiliser Astro ?

Même s'il s'agit de l'un des frameworks d'interface utilisateur les plus populaires, il existe certains scénarios dans lesquels l'utilisation d'Astro dans vos projets n'est pas appropriée.

Voici quelques situations à prendre en compte :

Petits sites web statiques

Si vous travaillez sur un petit projet composé de quelques pages statiques sans fonctionnalité complexe ni contenu dynamique, l'utilisation d'Astro peut entraîner une surcharge inutile. Dans ce cas, un générateur de site statique plus simple ou même un simple HTML/CSS pourrait être plus approprié.

Projets fortement dépendants du rendu côté serveur (SSR)

Astro se concentre principalement sur la génération de sites statiques et le rendu côté client (CSR). Astro n'est peut-être pas la meilleure solution si votre projet repose fortement sur le rendu côté serveur, par exemple pour le contenu dynamique généré par le serveur ou les opérations spécifiques au serveur. D'autres frameworks ou bibliothèques spécialisés dans la RSS, comme Next.js ou Nuxt.js, pourraient être plus appropriés.

Intégration étroite avec les frameworks backend

Si votre projet implique une intégration étroite avec un framework backend ou s'appuie sur des technologies côté serveur comme Node.js, Express.js ou Django, l'approche de génération de sites statiques d'Astro peut ne pas s'aligner sur les exigences backend. Dans ce cas, les frameworks qui offrent une forte intégration backend, comme Next.js, peuvent être un meilleur choix.

Applications critiques en termes de performances

Bien qu'Astro s'efforce de fournir un rendu efficace et des performances optimales, certaines applications critiques en termes de performances et présentant des exigences spécifiques peuvent nécessiter un contrôle de niveau inférieur sur les optimisations. Si vous avez une application application avec des critères de performance stricts ou des besoins de rendu uniques, les abstractions d'Astro peuvent limiter votre capacité à affiner les optimisations de performance.

Projets avec intégrations tierces étendues

Si votre projet s'appuie fortement sur des bibliothèques, des frameworks ou des plugins tiers qui ne sont pas compatibles avec Astro ou qui ne prennent pas en charge le système de construction d'Astro, il peut en résulter des conflits ou des problèmes de compatibilité. Assurez-vous que l'écosystème autour de votre projet supporte Astro avant de vous engager.

Comment installer Astro JS ?

La façon la plus simple d'appréhender Astro est de s'y plonger et de commencer à l'utiliser. Si vous ne savez pas par où commencer, voici un guide rapide sur l'installation et l'utilisation d'Astro.

Si vous disposez de ces conditions préalables, vous pouvez utiliser Astro en un rien de temps :

  • Node.js - v16.12.0 ou supérieure. (à partir d'Astro v2.4.5)
  • Editeur de texte - Nous recommandons VS Code avec notre Extension Astro officielle.
  • Terminal - Astro est accessible via son interface de ligne de commande (CLI).

1. Lancer l'assistant d'installation

npm create astro latest

Après l'entrée, la commande Astro create vous guidera dans la configuration initiale :

2. Il vous demandera l'emplacement et le nom de votre projet. Par défaut, le nom du projet est aléatoire.

commande astro create

3. Il vous demandera ensuite si vous souhaitez utiliser un modèle, des fichiers d'exemple ou un projet vide.

nouveau nom de projet en Astro

4. Ensuite, il vous demandera si vous souhaitez installer des dépendances.

modèle astro

5. Ensuite, il vous demandera si vous avez l'intention d'écrire du Typescript. Dans l'affirmative, il vous demandera à quel point il est strict.

écrire en TypeScript

6. Enfin, il vous demandera si vous souhaitez initialiser un nouveau dépôt git.

initialiser un nouveau dépôt git
Réponse du dépôt git

7. Vous pouvez maintenant exécuter le projet sur votre ordinateur local :

npm run dev

Les caractéristiques d'Astro Pages

Astro n'est pas un framework JS pour site web comme les autres. C'est un outil performant qui place le contenu au premier plan et adopte une approche agnostique de l'interface utilisateur.

Examinons quelques-unes des principales caractéristiques qui permettent à l'Astro de se démarquer de la concurrence :

Modèles

Il fournit des modèles pour ceux qui veulent commencer à coder tout de suite et sauter le processus d'installation. Il y a quelques options comme un site de blog, un modèle de documentation, un portfolio ou un modèle vide. 

Modèles astro

Thèmes

À l'instar de WordPress ou d'autres CMS, Astro dispose d'une poignée de thèmes que vous pouvez utiliser gratuitement. Grâce aux contributions de sa communauté grandissante, vous ne serez jamais démodé.

thèmes astro

Intégrations

Astro Integrations vous permet d'améliorer les fonctionnalités et le comportement de votre projet sans effort. Avec la plus grande facilité, vous pouvez créer une intégration sur mesure, tirer parti des intégrations officielles ou exploiter la puissance créative des intégrations créées par la communauté.

astro intégrations

Voici les intégrations officielles que vous pouvez utiliser :

Structure

Comme pour les autres frameworks Javascript, la racine de chaque projet Astro doit inclure les répertoires et fichiers suivants :

  • src/* - Le code source de votre projet (composants, pages, styles, etc.)
  • public/* - Vos actifs non codés et non traités (polices, icônes, etc.)
  • package.json - Un manifeste de projet.
  • astro.config.mjs - Un fichier de configuration Astro. (recommandé)
  • tsconfig.json - Un fichier de configuration TypeScript. (recommandé)

Composants Astro

Un composant Astro utilise l'extension de fichier : .astro

Il s'agit de composants de modélisation HTML uniquement, sans exécution côté client. Tout comme les autres frameworks, les composants Astro sont réutilisables.

Un composant Astro est constitué de deux parties principales : le script du composant et le modèle du composant.

Script du composant

  • Vous pouvez utiliser le script du composant pour écrire tout code JavaScript nécessaire au rendu de votre modèle. Astro utilise trois tirets (-) entre le code JavaScript pour le différencier du contenu. Ce code est écrit au début du fichier.

Modèle de composant

  • Le modèle de composant se trouve sous le script de composant et détermine la sortie HTML de votre composant. Vous pouvez utiliser des balises HTML, des composants importés, des directives Astro et des expressions Javascript.

Les composants réutilisables sont appelés "layouts". Par convention, nous utilisons le terme "layout" pour les composants Astro qui fournissent des éléments d'interface utilisateur communs à plusieurs pages, tels que les en-têtes, les barres de navigation et les pieds de page. Les composants de mise en page sont généralement placés dans un répertoire src/layouts dans votre projet pour des raisons d'organisation, mais ce n'est pas une obligation.

Accessoires

Un composant Astro peut définir et accepter des accessoires. Ces accessoires sont ensuite mis à la disposition du modèle de composant pour le rendu HTML. Les accessoires peuvent être récupérés à l'aide de Astro.props.

Machines à sous

L'élément est un espace réservé pour le contenu HTML externe, ce qui vous permet d'injecter des éléments enfants provenant d'autres fichiers dans votre modèle de composant.

Pages

Les pages sont des fichiers qui se trouvent dans le sous-répertoire src/pages/ de votre projet Astro. Elles sont responsables du routage, du chargement des données et de la mise en page générale de chaque page de votre site web.

Types de fichiers pris en charge : .astro, .md / .mdx, .html, .js / .ts

Astro utilise une stratégie de routage appelée routage par fichier. Chaque fichier de votre répertoire src/pages/ devient un point d'accès sur votre site en fonction de son chemin d'accès. Par exemple, si vous avez une page About, about.astro, vous pouvez y accéder automatiquement en utilisant www.example.com/about.

En savoir plus Routage dans Astro.

Comment migrer vos projets vers Astro

Astro dispose d'une poignée de guides pour migrer votre projet existant d'une autre plateforme ou d'un autre framework vers Astro.

Voici les cadres et les plateformes avec les guides disponibles : 

guides astro

D'autres seront disponibles au fur et à mesure des contributions de la communauté Astro.

Consultez les guides sur la migration ici !

Si vous choisissez de passer à Astro, vous devrez procéder à quelques ajustements, et les thèmes que vous aviez sur l'autre plateforme ne seront pas transférés sur Astro. Au lieu de cela, vous devrez créer un nouveau projet Astro et choisir parmi les modèles ou thèmes disponibles fournis par la communauté et Astro.

Vous pouvez utiliser ces commandes pour utiliser les modèles ou les thèmes :

commandes astro

Bien que le passage à Astro soit un changement considérable, il vous apportera de nombreux avantages à long terme, notamment en termes de référencement, de vitesse du site et de résultats sur les pages Google.

Besoin d'une équipe astro pour votre projet ?

Astro dispose d'une communauté croissante de développeurs, d'ingénieurs et de professionnels de la conception qui peuvent vous aider à créer le site web idéal. Avec leur aide, vous pouvez créer un site adapté à vos besoins spécifiques.

StarTechUP est un réseau de professionnels expérimentés spécialisés dans les projets Astro. Du design personnalisé à la création de sites web complets, notre équipe vous aidera à créer quelque chose qui a de l'allure et qui fonctionne comme un charme.

Nous offrons également une gamme complète de services pour logiciel personnalisé, backend et ingénierie frontaleet DevOps. Quels que soient les besoins de votre projet, notre équipe est là pour vous aider à le mener à bien !

Contactez nous aujourd'hui pour plus d'informations sur la façon dont nous pouvons vous aider à créer quelque chose d'extraordinaire avec Astro.

A propos de l'auteur : Andrea Jacinto - Rédacteur de contenu

Rédactrice de contenu dotée d'une solide expérience en matière de référencement, Andrea a travaillé avec des spécialistes du marketing numérique de différents domaines pour créer des articles optimisés qui sont informatifs, digestes et agréables à lire. Aujourd'hui, elle écrit pour StarTechUP afin de présenter les derniers développements technologiques aux lecteurs du monde entier. Vue sur Linkedin

PLUS D'INFOS