Jamstack Architecture

Presentation of Jamstack Architecture.

Transcript

1. JAMStack Le retour du web statique
2. JAMStack Une architecture de développement Web moderne basée sur du JavaScript qui s'exécute côté client, des API réutilisables, et un langage de balisage.
3. J... Javascript : Le langage de programmation qui permet de prendre en charge les composants dynamiques.
4. A... API : Les API réutilisables qui gèrent toutes les actions côté serveur et sont accessibles via les appels HTTPS avec Javascript.
5. M... Markup : La couche de présentation d’une application web écrite avec un langage de balisage (e.g. HTML).
7. Architectures
8. Début 1990 L’ère des pages Web HTML statiques. Les pages web dynamiques. L’introduction de Ajax. Historique 2010 Single page Applications 2015 Le retour du web statique. 1995 Création du JavaScript. Création des frameworks JavaScript.
9. SPA JAMStack - Une seule page HTML (rendu vide) - Un fichier JavaScript (HTML5 history API + JS framework) - Plusieurs pages HTML statiques - Plusieurs fichiers JavaScript Monolith - Plusieurs pages HTML dynamiques - Un ou plusieurs fichiers JavaScript Site grand public MPA Universelle Isomorphique SSR Statique SSG
10. SSR
11. SSG
12. SPA
13. MPA
14. Principes
15. ❏ Transformer ce qui est dynamique en pages statiques ❏ Chaque déploiement est un snapshot complet du site, ce qui rend les rollbacks faciles Generate static pages Push to GIT Server Deploy to CDN Developer Editor Headless CMS Ceci n'est pas adéquat pour le cas des données qui changent trop souvent ou d'une façon continue. Dans cette situation, nous aurons recours à l'utilisation des API. Build Webhook
16. Avantages
17. Sécurité ❏ Pas de code serveur à exécuter ce qui élimine la plupart des failles et exploits (plus besoin de se soucier des vulnérabilités du serveur ou de la base de donnée) et réduit la surface d’attaque. ❏ On suppose que les API tierces sont très sécurisées et bien entretenues.
18. Performance ❏ Pas de latence étant donné que le contenu des pages est pré- généré. ❏ Soit 10 fois plus rapide en terme de temps de chargement moyen.
19. Référencement ❏ Les pages délivrés rapidement sont mieux référencées par les moteurs de recherches. ❏ Les pages statiques sont vues par les moteurs de recherche. (avantage par rapport aux SPAs)
20. Coût Les fichiers Jamstack sont servis de manière statique à partir d'un CDN, l'hébergement est moins cher par rapport à l'architecture traditionnelle côté serveur.
21. Déploiement La livraison d’un site basé sur Jamstack est trivial. Pour un développeur, il n’a qu’à déployer les fichiers statiques pré-rendus dans un CDN qui va servir ces fichiers pendant le temps d'exécution de la requête.
22. Ecosystème
23. Site Generators Un générateur de site statique est un outil qui génère des pages HTML statiques basé sur des templates. https://jamstack.org/generators/
25. Headless CMS Un Headless CMS est un système de gestion de contenu (CMS) ayant uniquement du back-end qui rend le contenu accessible via une API RESTful ou GraphQL. https://jamstack.org/headless-cms/
27. Démo
28. Scully Scully est le premier générateur de site statique (SSG) dédié aux projets Angular apparu en 2019. Il est capable de transformer n'importe quelle application Angular en un site web ultra-rapide basé sur l'architecture JAMStack. Les versions supportées sont: ❏ Angular 9 et 10 ❏ Node.js 12 ou plus https://scully.io/
29. Comment ça fonctionne? Scully explore la structure de routage de l’application Angular et crée une liste de routes. Ensuite, il va générer un fichier index.html pour chaque route afin de créer une version statique de l’application. Si vous avez 1000 routes dans votre application, Scully va créer 1000 fichiers Index.html.
30. Liens
31. https://tsh.io/state-of-frontend/ https://2020.stateofjs.com/en- US/technologies/front-end-frameworks/ Les pages “State Of” 20,000 développeurs ont participé à l’enquête 4,500 développeurs ont participé à l’enquête
32. Q/A