Cette série d'articles a pour but de présenter la stack front-end qui fait tourner ce blog et d'en profiter pour parler de diverses techniques que vous pourriez avoir envie d'utiliser. Ce premier article est purement introductif et va servir a ce que tout le monde s'y retrouve plus tard.
Vous pouvez trouver le code du blog ici si ça vous intéresse: https://github.com/zaratan/zarablog-next
React
React est un framework front qui permet de créer des sites web en JS. Ce framework simplifie la gestion de l'état du site/app et les interactions utilisateur.
J'avais un peu présenté ça par le passé à deux reprises:
- Un article un peu vieux maintenant: React basics
- Une série de vidéos sur Youtube: Browser Extension
NextJS
NextJS est une "fine" sur-couche par dessus React qui gère certaines choses automatiquement. On aura l'occasion de revenir sur certains de ces points au cours des différents articles de cette série, mais en vrac ça gère:
- Le routing
- Le code spliting
- La configuration Babel/Webpack/TypeScript
- Plein d'optimisations pour React
Vercel
Vercel est la compagnie qui produit NextJS. Auparavant appelée Zeit, son principal produit permet de:
- Déployer facilement un projet Front
- Déployer des routes de Serverless APIs
- Gérer ses domaines DNS
C'est avec ce produit que ce blog est déployé.
MDX
Le MDX c'est comme le MarkDown mais étendu. Un des points majeurs qui est utile ici est qu'il supporte l'ajout de composants React.
TypeScript
TypeScript est un langage qui sera compilé vers le Javascript. Il ressemble trait pour trait au JS à la différence notoire qu'il ajoute un "type" au différentes choses (fonctions, paramètres, objects). Les types seront check à la compilation pour éviter certaines erreurs en prod.
Articles de la série
- Comment charger une font proprement
- Comment gérer un thème clair/sombre (avec du scss)
- MDX et colorisation syntaxique
- Outils de dev et déploiement (Eslint, etc…)
- Internationalisation (à venir)
- Travailler avec un budget (à venir)
- CSS-in-JS avantages et inconvénients (à venir)
- Les pattern que j'utilise souvent en React (à venir)
- Pourquoi et comment NextJS (à venir)
- Pourquoi et comment TypeScript (à venir)
- …