Photogrammétrie avec le Parrot Anafi et Pix4D Capture

Préparation du vol

La planification du vol est très simple grâce à l’interface intuitive dePix4D Capture. Le plan de vol est prêt en quelques minutes et tout les réglages indispensables sont présents.

Il est possible de télécharger les maps (Mapbox ou Apple) pour une utilisation offline une fois sur site au cas où il n’y ait pas d’accès internet. Pour cela, il suffit d’ouvrir Pix4d et de se rendre sur la zone que l’on souhaite mettre en cache et d’attendre que la carte soit correctement chargée (que toutes les tuiles de la carte soient apparues dans leur meilleurs résolution possible)

Pendant le vol

Le vol s’est très bien passé et même si le drone n’est pas allé très loin (pas plus de 300 mètres) le retour vidéo était assez stable malgré quelques freezes d’une seconde quand le drone passait derrière le bâtiment et un retour vidéo très basse définition de temps en temps (mieux que les freezes), globalement le vol s’est déroulé à merveille, il est facile de switcher entre la carte et le retour vidéo pour voir la progression du drone et les éventuels obstacles qui se présenteraient sur la route. D’autant plus que l’Anafi est programmé par Pix4D pour garder le « nez » vers l’avant.

Il faudra tout de même faire attention en touchant l’écran du téléphone de ne pas toucher les sticks de la radio-commande ce qui aurait pour effet de repasser en mode pilotage manuel et de mettre la mission en pause. Pas très grave puisqu’il suffit d’appuyer sur « Resume » pour reprendre le vol automatique.

Le retour vidéo ne fait pas d’écran noir a chaque déclenchement mais Pix4D indique les photos prises sur la carte, enfin presque, Pix4D affiche la position à laquelle la commande de déclenchement à été envoyée mais l’app ne reçoit pas de feedback confirmant que la photo à bien été prise.

Photogrammetry with Parrot Anafi and Pix4D Capture video feedback

A l’atterrissage, il faut penser à orienter la caméra vers le ciel pour la protéger de tout ce qui va voler quand le drone se posera en particulier si c’est sur du sable ou des graviers. Pix4D n’ajoute pas de waypoint « Caméra à +90° » avant l’atterrissage. même si on touche la gâchette d’inclinaison de la nacelle l’atterrissage poursuivra sont cours et l’Anafi ne repassera pas en mode pilotage manuel.

Pendant le vol on peut suivre toutes les infos sur le statut de l’Anafi : Pourcentage de la batterie, vitesse, altitude, nombre de satellites, espace dispo sur la carte SD et distance au point home ou smartphone. Pour afficher toutes ces infos il est préférable d’avoir un écran de plus de 4″, c’est un peu juste sur  un iPhone 5S et certaines infos sont cachées.

Photogrammetry with Parrot Anafi and Pix4D Capture flight hidden informations on iPhone 5S

Après le vol

L’Anafi s’est posé avec 23% de batterie après un vol de 19 minutes et 51 secondes minutes à 3°c

Avec les réglages par défaut de Pix4D Capture le téléchargement des photos vers le téléphone est lancé automatiquement dès l’atterrissage. Il y’a eu un léger bug pendant le téléchargement des images mais qui a bien repris ensuite et toutes les images ont bien été copiées.

Penser à garder de la batterie pour le transfert des photos. Pour 359 photos (1,96 Go, moyenne 5,46 Mo / photo) avec un iPhone 5S il faut compter une bonne vingtaine de minutes. Ca devrait passer large la plupart du temps mais si on pose à 2% pas sûr. Le transfer automatique des photos peut être désactivé dans les réglages de l’application.

 

Photogrammetry with Parrot Anafi and Pix4D Capture downloading images after flight

Les images téléchargées par Pix4D Capture et sauvegardées sur le téléphone sont correctement géotaggées. Sur la carte SD de l’Anafi on retrouve presque exactement la même chose, les photos JPG géotaggées. Une seule petite différence, sur la carte SD il y’a 3 photos de plus, dont 2 prises après le vol, pendant le transfert des photos et la troisième supplémentaire, eh bien je ne sais pas… Probablement pendant le vol, c’est peut être dû a la pause involontaire pendant le vol automatisé quand j’ai touché un stick de la radio-commande par inadvertance.

Il est ensuite possible d’uploader les photos sur Pix4D cloud afin d’effectuer les calculs et le rendu directement sur les ordinateurs de Pix4D. L’upload des photos sur le cloud Pix4D nécessite une licence valide. Il est possible d’obtenir une licence d’essai de 15 jours en créant un compte Pix4D ici : https://account.pix4d.com/signup. Il faut ensuite télécharger le logiciel Pix4D et cliquer sur le bouton « Click for trial » en haut à droite de l’interface.

Photogrammetry with Parrot Anafi and Pix4D Capture upload images Pix4D cloud

Avec les paramètres par défaut, le téléchargement des photos depuis l’Anafi débute immédiatement après l’atterrissage

Pas de RAW

Pix4D ne sauvegarde que des JPG, le logiciel Pix4d Mapper ne sachant pas utiliser les RAW. C’est fort dommage on aurait aimé pouvoir récupérer les DNG de l’Anafi et les convertir en TIFF géotaggés que Pix4d Mapper sait lire. C’est paraît il la même chose avec les drones DJI. Mais même si c’était possible, il faudrait veiller à avoir une carte SD d’une bonne capacité puisque pour ce vol de 359 photos, si on considère que les DNG font en moyenne 48 Mo il faudrait 17,2Go pour stocker les photos et pourtant le vol aurait même pu faire quelques minutes de plus.

L’enregistrement des RAW est une fonctionnalité qui n’a pas encore été développée et qui ne serait d’ailleurs peut être pas si utilisée si on prend en compte qu’il faut entre 4 à 5 secondes pour que l’Anafi enregistre une photo DNG (~48 Mo), et qu’il faudrait donc diminuer la vitesse du vol, diminuer l’overlap ou augmenter l’altitude et donc diminuer la GSD. Sans compter qu’il faudrait énormément de temps supplémentaire pour le téléchargement des photos depuis le drone ainsi que pour l’upload des photos sur Pix4D cloud.

Mise à jour : il existe en fait un moyen (pas officiel) d’enregistrer les DNG avec Pix4D Capture

Qualité des photos

Il y’a un petit flou de mouvement sur une bonne partie des photos. Le vol s’est effectué à environ 2,7m/s mais la proximité du sol (30 mètres) et la faible luminosité ce jour là n’ont pas du aider.

D’après les Exif, on dirait que Pix4D laisse libre la vitesse d’obturation et les ISO, la focale étant fixe (f/2,4) sur l’Anafi. Ce qui est très bien puisque de toute façon on préfère bloquer l’ouverture pour la photogrammétrie afin de minimiser les variations de déformation d’objectif entre chaque photos.

    • Focale : f/2,4
    • Vitesse d’obturation entre : 1/25 et 1/100
    • ISO entre : 103 et 206

Photogrammetry with Parrot Anafi and Pix4D Capture photos EXIF geotagged

Pix4D Parrot Anafi photogrammetry photo JPG

Ouvrir l’ image pleine résolution (5344 × 4016 | 5,6 Mo) dans un nouvel onglet

Conclusion

L’application est vraiment très bien conçue et agréable à utiliser, sans lire le mode d’emploi, sans créer de compte sans galérer a créer une mission sur un petit écran 4″ on obtient très facilement un résultat correct. En fait je crois que je n’avais jamais programmé un vol aussi simplement. Le passage de l’écran de retour vidéo à l’affichage carte se fait sans problème et tant mieux parce que c’est quelque chose qu’on fait fréquemment pendant le vol, il faut juste faire attention à ne pas toucher aux sticks de la radiocommande. C’est donc vraiment dommage que l’application n’enregistre pas les raw, seul reprorche qu’on puisse faire à Pix4D Capture. L’Anafi est également très agréable à utiliser, il est très compact, léger, on a vraiment pas peur de l’emmener n’importe où et vu la place qu’il prend ca serait dommage de se priver. La possibilité de recharger la batterie sur un chargeur allume cigare USB ou une batterie externe est également un plus. Le drone se fait très discret à quelques dizaines de mètres du sol.

C’est à mon goût la solution la plus simple, intuitive et portable qui soit aujourd’hui disponible dans le commerce pour faire des photos et de la photogrammétrie. Le drone faisant moins de 800 grammes on évite aussi pas mal de tracasseries administratives et c’est aussi plus rassurant à faire voler, d’autant plus qu’il n’est pas excessivement cher. Ca reste un capteur 1/2,4″ qui ne fera clairement pas le poids face au caméras embarquées sur des drones plus lourd mais disons qu’il s’agit d’une solution offrant un très bon ratio volume/poids/prix/qualité d’image.

 

Add-on Flight Plan pour FreeFlight

Je comptais un peu sur cet « in-app purchase » pour faire des plans de vol mais même si cet add-on Flight Plan de l’application FreeFlight qui permet de programmer des vols à l’air plutôt bien conçu pour les vidéos automatisées, il sera inutile pour la photogrammétrie, il faut créer tous les waypoints manuellement, ce qui serait un peu fastidieux dans le cas d’une grid avec 200 waypoint ou même d’un plan de vol circulaire de 30 waypoints.

 

Précautions

  • Prévoir plusieurs ou une grosse carte SD si on souhaite effectuer plusieurs vol, ca se rempli très vite (~2Go / vol).
  • Ne pas appuyer sur le bouton home du téléphone (en tout cas sur iOS). Même en relançant Pix4D rapidement, l’application aura perdue la connexion avec le drone et il faudra débrancher et rebrancher le câble USB qui relie le téléphone et la radio-commande pour la rétablir.

Prendre des photos en DNG (RAW) avec le Parrot Anafi et Pix4D Capture

Attention

– Il est possible que le changement d’application et la déconnexion du câble USB pendant le vol puissent perturber le bon fonctionnement du drone. Je n’ai pas eu de problème mais utilisez cette méthode à vos risques et périls.
– Ces essais on été effectués avec un Parrot Anafi 1.2.4, SkyController 1.2.0, un iPhone 5S sur iOS 12, l’application FreeFlight 6.2.1. YMMV.

L’application Pix4D Capture est très bien conçue pour préparer les plans de vols, que ce soit en grid, double grid, polygone ou circulaire. La préparation d’un plan de vol se fait très simplement, même sur un petit smartphone et tout les réglages importants comme le recouvrement ou l’inclinaison de la caméra sont présents. Seul petit bémol: Pix4D Capture n’enregistre que des JPG et c’est également le cas avec d’autres drones comme ceux de DJI.

Heureusement il est possible de déjouer cette limitation. Pour cela il faut :

  1. Allumer l’Anafi et connecter le smartphone au SkyController3
  2. Ouvrir Pix4D Capture et créer un plan de volPix4D Parrot Anafi record RAW DNG photos with Pix4D Capture
  3. Cliquer sur le bouton « Start » en bas à droite  dans Pix4D Capture. Passer l’écran qui demande de se connecter au drone. On arrive sur la checklist, c’est à ce moment là que l’app écrit le plan de vol sur l’Anafi. Cliquer sur Cancel.

    Pix4D Parrot Anafi record RAW DNG photos drone takeoff checklist

    Une fois que « Mission uploaded to drone » est en vert, appuyer sur « Cancel »

  4. Lancer l’application FreeFlight et accéder à l’écran de pilotage.Pix4D Parrot Anafi record RAW DNG FreeFlight Pix4D switch

    Pix4D Parrot Anafi record RAW DNG FreeFlight not connected

    FreeFlight affichera cet écran tant que le câble n’aura pas été reconnecté

  5. Reconnecter le smartphone à la radio-commande avec le câble USB.
  6. Modifier les paramètres photos : DNG/JPG, Style, iso, shutter speed. Vous pouvez choisir tous les paramètres qui vous conviennent, ils seront ensuite utilisés pedant le vol automatique.Pix4D Parrot Anafi record RAW DNG choose photo settings
  7. Débrancher le câble USB qui relie le smartphone à la radio-commande.
  8. Repasser sur l’application Pix4D Capture
  9. Rebrancher le câble USB
  10. Attendre que pix4D se re-connecte à l’Anafi puis ré-appuyer sur « Start » en bas à droite de l’écran. Et cette fois, sur l’écran « Drone take off checklist », on ne va pas cliquer sur Cancel mais sur Start. L’Anafi décolle immédiatement et commence son vol automatique.Pix4D Parrot Anafi record RAW DNG photos drone takeoff checklist

Voila ! L’Anafi prendra toutes les photos suivantes en DNG+JPG avec les réglages que vous avez choisis dans FreeFlight.

Pix4D Parrot Anafi record RAW DNG exif ISO 3200 shutter speed 1-4000

On a bien un temps d’exposition à 1/400 et l’ISO à 3200 comme précédemment défini dans FreeFlight

Pix4D Parrot Anafi record RAW DNG gallery

Les photos DNG dans l’explorateur de carte SD de FreeFlight

Après le vol, il ne sera pas possible de continuer avec le workflow Pix4D, l’application ne saura pas télécharger les photos depuis l’Anafi après la mission, ce qui est tout à fait normal puisqu’elle n’a pas été conçue pour le faire.

Pix4D Parrot Anafi record RAW DNG photos arror when uploading images

Pix4D Capture ne pourra pas récupérer les photos si on force l’Anafi en DNG, l’application n’est pas prévue pour ça

Mais il restera bien sûr possible de récupérer les DNG géotaggés sur la carte SD de l’Anafi, de les convertir en TIFF puis de les utiliser dans Pix4D ou n’importe quel autre logiciel de photogrammétrie.

Malheureusement l’Anafi n’est pas capable d’enregistrer les DNG aussi vite que les JPG, il lui faudra entre 4 et 5 secondes entre chaque photo. Il faudra donc modifier certains réglages :

  • Réduire la vitesse de vol (et donc augmenter le temps du vol et probablement diminuer la surface couverte)
  • Diminuer l’overlap (ce qui n’est pas recommandé, les paramètres par défaut de Pix4D 80% ↕ et 70%↔  sont adaptés à la plupart des projets, les diminuer pourrait compliquer ou rendre impossible le travail de reconstruction du logiciel de photogrammétrie)
  • Augmenter l’altitude (et donc diminuer la GSD et augmenter légèrement la durée du vol)

Ou un mélange des 3 qu’il est possible de définir selon un savant calcul. On perd donc certains avantages de l’application Pix4D qui en fonctionnement normal abstrait totalement ce genre de problèmes.

Pix4D Parrot Anafi record RAW DNG HoudaGeo Pix4D Capture

24 photos on été prises au lieu des 44 initialement prévues à cause du temps d’enregistrement des DNG (4 à 5 secondes)

Pix4D Parrot Anafi record RAW DNG HoudaGeo Exif timestamp

En examinant les exif, on constate qu’il faut entre 4 et 5 secondes à l’Anafi pour enregistrer les photos en DNG

Gatsby, le générateur de site statique basé sur React et GraphQL

Gatsby est un générateur de site statique (SSG) basé sur React. Il s’agit d’un projet openSource (GitHub) né en en mai 2015 auquel ont contribués plus de 1350 développeurs en 7000 commits à ce jour. Debut 2018 Kyle Mathews crée Gatbsy Inc pour soutenir le développement du projet. L’entreprise à levé 3,8 millions de dollars de seed money en mai 2018.

Les données peuvent provenir de nombreuse et diverses sources : fichiers Markdown, CMS Headless, API WordPress, fichiers Google docs, etc. grâce à de nombreux plugins.s

Plugins

L’écosystème Gatsby est déjà riche de plus de 500 plugins. Il y’en pour tous les goûts, que ce soit pour afficher un feed Instagram, configurer Google Analytics ou se connecter sur un CMS headless.

Parmi eux certains sont quasiment indispensables et on les retrouvera dans la plupart des projets.

Gatsby images

Le plugin gatsby-image est un composant clef de Gatsby qui simplifie l’experience dévelopeur pour servir des images optimisées.

Utilisation d’images WebP pour les navigateurs le supportant

Réservation l’emplacement des images pour éviter les saccades lorsque les images sont chargées

Chargement de l’image optimale en fonction de la taille d’écran et de la résolution.

srcset

Génération de multiples version d’une image automatiquement grace à srcset. La taille adéquate est utilisée automatiquement par le navigateur en fonction de la taille de l’écran.

Lazy loading

Le lazy loading est intégré dans gatsby-image par défaut, il n’y a rien a configurer, ca fonctionne. Les images ne sont pas requêtées par le navigateur au chargement de la page mais uniquement lorsqu’on scroll vers le bas. Et ça améliore aussi grandement la performance d’un site.

Blur-up ou tracedSVG en un fragment.

Les fragments ce sont des briques de GraphQL qu’on peut créer et réutiliser par la suite, Blur up reprend une idée popularisée par la plateforme de blogging Medium et consiste à généré des versions floues et donc très légères des images affichées sur un site. Au chargement de la page c’est d’abord les images floutées qui seront afiichées enattendant que les images originales soient téléchargées. Le rendu est beaucoup plus agréable même si on ne distingue pas le contenu de l’image, on sait au moins qu’il y’a une image, le contenu ne sautera au moment du chargement puisque l’image est déjà en lace. Rien de révolutionnaire mais c’est tellement à mettre en place avec Gatsby qu’il serait dommage de s’en priver. TracedSVG fonctionne sur le même principe sauf qu’a la pace d’une version floutée de l’image on va cette fois la remplacer par une version vectorisée à l’aide du programme open source Potrace, automatiquement. Et le résultat est magnifique.

Un article très intéressant sur le préchargement et l’optimisation et des images : How to use SVG as a Placeholder, and Other Image Loading Techniques

TracedSVG placeholder Gatsby image optimisation

 

Vous pouvez également observer de véritables placeholder SVG dans leur habitat naturel sur ce site que j’ai réalisé pour découvrir Gatsby : https://waterscap.es. Très inspiré de gatsby-starter-gcn. Plus d’infos ici : Waterscap.es un site statique réalisé avec Gatsby.

Themes

Il y’a bien évidement beaucoup moins de thèmes que pour les gros CMS et ils ont moins de fonctionnalités mais on commence cependant à en voir apparaitre quelques un intéressant.

Gatsby JS themes

Showcase

Gatsby a beau être jeune, nombreux sont ceux qui l’utilisent déjà en production, parmi eux :

Gatsby sites Showcase

Déploiement en un clic

Pour deployer son site, la commande gatsby serve s’en charge. Le site est envoyé directement chez l’hébergeur, Netlify ou Github pages par exemple et si le site est sur un repo Git il est aussi possible de configurer des webhooks qui déclencheront une compilation à chaque commit. Les webhooks peuvent aussi être configurés lors de la modification du contenu si celui ci est hébergé sur un CMS headless le supportant comme Contentful ou DatoCMS.

Performance

Sans aucune optimisation, même pas la moindre directive cache-control, la plupart des sites développés avec Gatsby se chargeront incroyablement plus rapidement qu’un site équivalent (qui affiche la meme chose) développé avec WordPress. D’autant plus que la plupart des hébergeurs de site statique fournisse le HHTPS, HTT2 et le CDN par défaut. Et tout cela gratuitement. Etant statique, un site Gatsby n’aura aucun soucis à supporter une montée en charge due à un plus grand nombre de visiteurs.

GraphQL

GraphQL et Gatsby fonctionnent quasiment main dans la main même si il reste possible d’utiliser ce que Gatsby appel des données déstructurées. L’utilisation de GraphQL est un vrai bonheur pour le développement, on demande l’information que l’on souhaite et le serveur nous la renvoi. Si vous utilisez Gatsby vous passerez surement pas mal de temps dans GraphiQL (prononcé Graphiqeule), la web app de GraphQL qui permet de tester une requête ou une mutation avec la possibilité d’utiliser des variables et même avec de l’autocomplétion sur les champs disponibles !

SEO

Gatsby est SEO friendly. Rien que le fait qu’un site static se charge rapidement boost sa position dans les SERP. Côté lecture par les robots, puisque les pages du site sont crées au build avant le déploiement du site, on ne retrouve pas les problèmes des SPA puisque tout est là, aisément lisible dans un seul fichiers par page. Et pour les metadata ? C’est l’indispensable plugin gatsby-plugin-react-helmet qui s’en charge.

Multiplatformes ?

Un site Gatsby est avant tout un site React et ça peut être bien pratique dans le cas où l’on souhaite developper une application qui reprend certaines fonctionnalités du site (ou vice versa). Grâce au concepts de React où tout est « componentisé », il va être possible de récupérer ces composants pour les réutiliser dans une app 1. Et c’est encore plus vrai et plus simple si on utilise GraphQL pour récupérer des données à partir d’une API. Ca commence à devenir vraiment très multi-platformes :)

JAMstack, statique, CMS Headless : Le renouveau du développement web

Sites statiques

A l’origine du web tous les sites étaient statiques. C’est le web de Tim Berner Lee . De simples fichiers html demandés par un client et envoyés tels quels par le serveur. Et puis on a eu besoin de plus de fonctionnalités, besoin de donner la possibilité modifier le contenu d’un site sans être développeur web. Alors on ajouté des bases de données, on a compilé les pages dynamiquement à l’aide de languages comme PHP pour offrir un contenu sur mesure au visiteur d’un site. De fabuleux CMS tel que WordPress on pu voir le jour. Aujourd’hui c’est plus de 30% des sites internets qui utilisent WordPress.

Les éditeurs affectionnent les facilité d’édition d’articles et de pages grâce aux éditeurs WYSIWYG (bien que cela puisse être contesté étant donnée la multitude d’appareils et de tailles d’écrans https://www.quaternum.net/2018/10/18/markdown-comme-condition-d-une-norme-de-l-ecriture-numerique/).
Les développeurs l’apprécient pour sa facilité d’utilisation, l’installation se fait en quelques clics et en quelques de minute on a nouveau site prêt à être utilisé. On l’aime pour son vaste écosystème d’extensions qui permettent de parer à toute éventualité. Le client à besoin d’afficher sur le homepage un agenda qui se met à jour en même temps qu’un Google Calendar ? D’un système de réservation et de paiement en ligne ? D’ajouter une boutique en ligne ? D’afficher une carte des bureaux de l’entreprise à travers le monde ? Il y’a toujours un plugin à disposition et s’il n’yen a pas, il est relativement aisé d’en développer un.

Mais les sites dynamiques ont aussi apporté leurs lot de complications. La compilation des fichiers et le fonctionnement d’une base de donnée requiert plus de ressources que l’hébergement de simples fichiers HTML et qui dit plus de ressources dit plus gros serveurs avec plus de RAM, plus de CPU, plus d’espace disque et donc un coût d’hébergement plus élevé qu’il faudra l’ajuster en fonction de la fréquentation du site ou « loadbalancer » sur plusieurs serveurs. La sécurité est devenue plus délicate à gérer en raison de la nature dynamique de languages comme PHP et des bases de données, sensibles à de nombreuses attaques tel que les failles d’injection, XSS (cross-site scripting) ou CSRF (Cross-Site Request Forgery).

Et puis il y’a les problèmes de performance, le serveur doit executer du code pour générer les pages. Ce code, il doit être bien écrit, il doit être efficient, il ne doit pas provoquer de fuites de mémoire et même si tout fonctionne parfaitement, le code sollicitera toujours le processeur et la mémoire pour s’exécuter. C’est comme ça qu’on arrive à des usine à gaz, des sites WordPress équipés de dizaines d’extensions, des pages qui prennent 10 secondes à charger, des sites hackés ou les articles du blog remplacés par des contenus pas très intéressants.

WordPress et autres CMS comme Drupal ou Prestashop sont remarquables, ils font économiser un temps précieux et offres des milliers de possibilités, le ça gratuitement et c’est une vraie chance de pouvoir profiter de cet écosystème.

Mais depuis quelque temps une nouvelle mouvance apparaît. Le retour des sites statiques. Ils n’ont bien sur jamais disparus mais ont connu leur période de désuétude. Relancé notamment en 2008 par Jekyll, le générateur de site static développé par Tom Preston-Werner (fondateur de Github), le statique reprend depuis quelques années de l’ampleur et on voit fleurir un peu partout de nouveaux générateurs de site statiques :

  • Jekyll
  • Hugo (nodejs)
  • Gatsby (react)
  • Hexo (nodeks)
  • Nuxt (vujs)
    Et bien d’autres…

Oui parce qu’un site static ça se génère. La génération c’est la compilation de plusieurs ressources en fichiers HTML à l’aide module bundlers comme Webpack.
« Ah bon !? De la compilation, je croyais que c’était justement l’un des inconvénients des sites dynamiques ? »
Oui, sauf que cette fois la compilation s’effectue uniquement lorsqu’une modification est effectuée sur le site, que ce soit son contenu ou son code. La compilation peut s’effectuer n’importe où (sur son ordi perso par exemple) puis les fichiers HTML sont envoyé sur le serveur.

Headless CMS

L’une des beautés des sites statiques c’est le fort découplage entre contenu (le texte d’une page par exemple) et l’affichage de ce contenu (marge de 15 pixel à droite pour le texte du premier paragraphe par exemple). Dans un CMS, par le biais de son interface d’administration, l’éditeur qui n’est la plupart du temps pas un développer à le pouvoir de décider de l’affichage du contenu et peux insérer directement du code javascript dans la page et encore une fois c’est la l’une des grandes forces des CMS qui offre même à un débutant la possibilité de créer une page sans connaissance en développement à l’aide d’éditeurs WYSIWYG toujours plus avancés.
Mais le découplement du contenu et de son affichage à ses avantages. Premièrement celui d’être « platform agnostic ». Ca signifie que le contenu crée pour le site n’est pas forcément crée que pour ce dernier. Il pourra par exmeple être réutilisé dans une application mobile. Deuxièmement, l’éditeur d’une page ne peut plus faire n’importe quoi, comme par exemple insérer un code de suivi AdWords sur une page contact. Ce qui est censé être le travail du développeur. Les rôles sont ainsi mieux définis et l’éditeur ne peut plus provoquer de bugs sur le site, qu’il s’agisse de simple bugs d’affichage ou plus graves. Le contenu, c’est la partie Markup du JAMstack.

Ces CMS offre des APIs qui permettent d’accéder à son contenu. Il est même possible d’effectuer les requêtes avec GraphQL !

Un article plus approfondi sur les CMS headless : CMS headless: avantages, inconvénients & comparatif des 5 leaders

APIs et Functions as a Service

Mais les sites statiques ont aussi leurs inconvénients. Leur manque de dynamisme peut être problématique pour certains usages et il convient de bien étudier les besoins. Un système de commentaire par exemple, qui est fourni d’office avec WordPress, n’est pas natif avec un site statique, il faut alors utiliser un système de commentaire externe comme Disqus ou Commento. Ces systèmes fonctionnent très bien mais il faut être prêt à héberger ses commentaires chez de tierces parties, à moins d’héberger soit même son système de commentaires sur un autre serveur (PHP + BDD nécessaires).
Les formulaires de contact ne sont également pas aussi simples et nécessitent là aussi des services tiers (avec tout ce que ça implique en terme de GDPR) comme Formspree ou faire appel à une fonction hébergée ailleurs, chez AWS Lambda par exemple. On comprend alors un peu mieux l’émergence du mouvement Serverless et des Functions as a Service comme AWS Lambda.
Ces services sont le A pour API de l’acronyme JAMstack.

Javascript

Toutes les interactions dynamiques côté client se font à l’aide de Javascript (évidement puisqu’il n’y a pas de PHP). C’est le J de JAMstack, J pour Javascript.

Avantages

  • Le site peut être entièrement hébergé sur un CDN puisqu’il n’as pas besoin de code serveur.
  • Le site est versionnable à l’aide des systèmes de gestion de versions comme Git ou SVN
  • Ne générer qu’a la modification permet d’utiliser les outils du développement web moderne comme Webpack, Babel ou PostCSS.
  • En configurant des Webhooks côté Headless CMS et côté repo Github, le site se met à jour automatiquement. Que ce soit lors d’une mise à jour du code ou une mise à jour du contenu.
  • Un site statique n’a pas besoin d’être sécurisé, il l’est par défaut.
    Il n’a pas besoin d’être optimisé, le temps de chargement d’un site statique est largement moindre que celui d’un site dynamique (à site comparable).
  • La base de donnée n’a pas besoin d’être finetuné, nettoyée ou optimisée.
  • Il n’est pas nécessaire de passer des heures à configurer des plugins de cache qui poseront des problèmes d’invalidations du cache. Il n’est pas non plus nécessaire d’installer Redis ou Varnish pour accélérer le temps de chargement.
  • Il faut toutefois continuer à optimiser les images mais les plugins de générateur comme Gatsby et les API des CMS headless comme Contentful rendent la tâche tellement plus simple et plus élégante.
  • Il n’y a pas se configuration de VHOST, d’ajout de directives, de configuration de SSL, si vous hébergez chez Netlify par exemple votre site est HTTPSisé HTTP2isé et CDNisé par défaut. Et l’hébergement est gratuit. Bien que j’héberge plusieurs sites chez Netlify, je ne saurais même pas vous dire si c’est Apache, NGINX ou nodejs qui sert les fichiers. On enlève la partie Devops du dévelopeur web Fullstack qui peut maintenant se reconcentrer sur la partie front. Il reste bien sûr possible de faire des redirections ou de l’authentification HTTP Basic à l’aide de fichiers de configuration toml par exemple.

Exemple de workflow de l’agence web New Yorkaise Carrot Creative

Conclusion

Voila pour un premier tour d’horizon de l’état de l’art du développement Web statique en 2018. Les sites statiques ont indéniablement le vent en poupe et de beaux jours devants eux et l’écosystème de thèmes et d’extensions s’accroit de jour en jour. Le web statique et le JAMstack ne sont évidement pas la solution à tous les problèmes et il convient de choisir judicieusement les outils en fonction du projet. Dans de nombreux cas un site dynamique est l’unique solution mais c’est indéniablement un vent de fraicheur qui souffle sur le développement web.

 

Quelques liens pour plus d’infos :