Construction du site

Amélioration du site 13/07/2019 3 min

J’ai choisi Gatsby.js (un générateur de site statique basé sur React.js) pour la création du site.

En effet, depuis longtemps, je souhaite créer un site original avec le rendu HTML / CSS / JS, j’ai donc appris des langages de programmation sur le Web, PHP, Python, C, Ruby, JavaScript et je me suis orienté vers les Frameworks écrits en Ruby (par exemple HuGo ou Jekyll). Les Frameworks JavaScript me sont apparus comme une évidence, j’ai commencé par Angular 2, Vue.js et enfin React.js.

Pourquoi Gatsby et comment fonctionne-t-il ?

L’utilisation de Gatsby.js m’a apporté, bien sûr, son lot de problèmes avec la configuration de node-apis où les promise était un concept nouveau pour moi, mais aussi l’organisation des fichiers et l’écriture en TypeScript.

Pour ma part, je trouve Gatsby.js intéressant avec l’utilisation d’une base de donnée telle que GraphQL qui remplace MySQL, la base de données bien connue de PHP ou Ruby. GraphQL est facile à comprendre avec un peu de pratique. Gatsby automatisme les routes que l’on crée facilement dans le fichier "page/" ou "template/", il simplifie le rendu statique du site avec la création d’un dossier "src/public/" ou l’on retrouve tous les fichiers HTML, JavaScript, mais aussi les images redimensionnées, le logo et les fichiers de référencement qui seront déployés sur un serveur distant. De plus, le plug-in Helmet, une fois configuré, me permet de ne plus me soucier de l'optimisation des moteurs de recherche avec SEO (sur Google par exemple). J'y reviendrais dans d'autres articles sur Gatsby.

L’utilisation de la syntaxe Markdown pour écrire mes articles me permet d’écrire sans me soucier de la syntaxe HTML. En complément, j’utilise Mdx pour écrire du JavaScript dans des fichiers de type Markdown. Il existe aussi des systèmes des CMS (Content Management System) et API (application programming interface), avec par exemple Contentful ou Prismic qui vous simplifiera votre travail d’écriture avec une certaine configuration que j'expliquerais prochainement.

Il y a beaucoup de développeurs qui utilisent React.js avec beaucoup de tutoriels, d’articles, de commentaires, et la communauté est importante. Il existe aussi beaucoup de plug-ins qui vous simplifient la vie. L’apprentissage de Gatsby peut être réalisé en à peine une semaine sans avoir une réelle connaissance du développement Web et de React. Seul bémol : avoir une connaissance de JavaScript et TypeScript.

Il est vrai que depuis la sortie de TypeScript, le développement Front-end s’est beaucoup simplifié. Le compilateur Babel.js transforme des fichiers écrits en TypeScript vers JavaScript compatibles avec tous les navigateurs anciens.Webpack est un compilateur moderne de fichier JS vers HTML.

Autre aspect intéressant du Framework, l’écriture du CSS (Cascading Style Sheets) directement dans les fichiers JavaScript. J’ai par exemple écris du CSS en CSS-in-JS (une nouveauté du moment qui crée beaucoup de débats sur le Web). Ce que j’ai trouvé intéressant dans le CSS-in-JS est l'approche du style CSS écrit directement dans les balises HTML : il apporte un chargement plus rapide des pages HTML (ce qui reste bien évidemment relatif avec tout le JavaScript que le Framework comporte) et charge uniquement le style de la page courante.

Puisque l’on en vient à parler du chargement, parlons de l’optimisation des appareils mobiles. Le Framework Gatsby crée automatiquement une PWA (Progressive Web App). le principe est assez simple : pendant que vous visionnez une page qui vient de se charger, PWA se charge de terminer le chargement de toutes les vues des autres pages (images et fichiers HTML), ce qui apporte une vraie rapidité sur le chargement du site complet. Les images sont aussi optimisées grâce au plug-in gatsby-image qui redimensionne les images en fonction de la taille des écrans et permet surtout de visiter le site sans recharger le serveur distant, ce qui est une vraie révolution dans le domaine du Front-End.

Enfin, le déploiement du site peut être automatisé grâce à l’utilisation d’un dépôt Github, avec Netlify et OVH par exemple.

Liens utiles :

  • React.js — site officiel
  • Gatsby.js — générateur de sites statiques
  • Gatsby Template — exemple de sites réalisés avec Gatsby
  • GraphQL — rendu graphique d’une base de données
  • CSS-in-JS — site officiel
  • PWA — application Web progressive
  • SEO – optimisation de moteur de recherche
  • Markdown — écrire du texte pour des générateurs de sites
  • Mdx — écrire du JavaScript dans du Markdown
  • Github — communauté de dépôt
  • API — interface de programmation
  • Netlify — déploiement (gratuit) et CMS (payant)
  • OVH — hébergeur populaire des noms de domaine en France

Retrouver le site sur mon dépôt Github pour en apprendre plus. J’espère que cet article vous a plu, en espérant vous revoir prochainement.


Merci de votre patience. Voir d'autres articles dans la catégorie Amélioration du site

Suivant →

Biographie

Joël Lesenne
  • 👨‍💻Je suis un développeur et intégrateur Web.
  • 🇫🇷Je suis né près de Lille(59), je vis à Lyon(69) France.
  • 💻Je crée des interfaces UX/UI originale et moderne.

Rester en contact

M’écrire pour parler de votre projet contact@joellesenne.dev, voir mon CV, mon Laboratoire ou me trouver sur d'autres plateformes : Dribbble Instagram Github Codepen & Twitter