Voir la source de Jamstack

''contenu importé de [[2019-272]] et à remanier pour étude''

== 📚 Ouvrage ==

Le développement web moderne 

[[File:03BB662B-B43B-4A22-9CC0-92A3A0A72694.png|thumb|[[Mathias Biilmann]] & [[Phil Hawksworth]] (O’Reilly)]]

e-book de référence [https://app.sparkmailapp.com/web-share/lQFywB_E54F7udwdSO1nuMH44nXx5TvaiYAw7Az1 Epub]



=== motorisation [[11ty]] ===
* Mise à jour [[Eleventy]] en local : tutoriel facile sur https://www.11ty.io/docs/getting-started/ 


article à étudier : 

{{citation-fr
|author = [[Frank Taillandier]] - [[Jérôme Coupé]]
|url = https://jamstatic.fr/2019/09/07/site-multilingue-avec-eleventy/
|published = [[2019-250|2019-09-07]]
|title = Un site multilingue avec Eleventy
}}


=== CMS [[Forestry]] ===

* https://forestry.io/starters/ les kits de démarrage statique avec CMS Forestry et déploiement sur Netlify


----
{{stub-fr}}

; statut : étude avec [[jamstatic]]
 
''[[UX]] à étudier/tester avec [[Nicolas Hoizey]], le kit de démarrage [[11ty]] déposé sur https://indieweb.me'' 
<!--
* [[Hugo]] > https://www.keybits.net/post/publishing-workflow-for-teams-using-static-site-generators/ 
* Bouton [[UI]] [[Netlify]] > https://www.netlify.com/blog/2016/11/29/introducing-the-deploy-to-netlify-button/
-->
[[File:jamstackDOTorg-2016-12-29.png|400px]]

Source http://jamstack.org/


<p class="intro">
  La <dfn>pile JAM</dfn> est une nouvelle manière de bâtir des sites et des applications web performants, sécurisés et simples à mettre à jour.
</p>

JAM signifie JavaScript, APIs et Markup (JavaScript, APIs et balisage). C'est l'empilement de technologies qui progresse le plus rapidement quand il s'agit de bâtir des sites et des applications web : plus de serveurs, vous hébergez toute votre partie cliente sur des CDNs et utilisez des APIs pour les parties dynamiques.


''traduction automatique du site web à raffiner au calme''

== Javascript ==

With servers abstracted away by CDNs and APIs, sites are either database free (and generated up front) or consume hosted database services directly from the browser. JavaScript is in charge of any dynamic programming during the request/response cycle and runs entirely on the client.

Avec les serveurs abstraits par les CDN et les API, les sites sont soit libres de bases de données (et générés en front), soit consomment des services de base de données hébergés directement à partir du navigateur. JavaScript est en charge de toute programmation dynamique durant le cycle de requête / réponse et s'exécute entièrement sur le client.

== APIs ==

Today browsers are the operating system of the web, and are able to run complex applications completely client side. They are capable of consuming and interacting with an ever growing amount of APIs and services across domains and infrastructures.


Aujourd'hui, les navigateurs sont le système d'exploitation du Web, et sont capables d'exécuter des applications complexes complètement côté client. Ils sont capables de consommer et d'interagir avec une quantité toujours croissante d'API et de services entre domaines et infrastructures.

== Markup ==

The JAMstack uses markup languages like HTML, CSS and Markdown to format and style our content, client-side JavaScript to make it interactive and engaging and APIs to add persistence, real-time sync, real-world interactions, comments, shopping carts, and so on.

La JAMstack utilise des langages de balisage comme HTML, CSS et Markdown pour mettre en forme et personnaliser notre contenu, JavaScript côté client pour le rendre interactif et attrayant et les APIs pour ajouter de la persistance, la synchronisation en temps réel, les interactions réelles, les commentaires, les fonctions de e-commerce et ainsi de suite.



== Slides ==

<script async class="speakerdeck-embed" data-id="12e277868f5941d1ae08ee37ed08fd5b" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>




== traduction de frank taillandier ==

''traduction récupérée pour étude (fair use) sur le repo github de jamstack 

<p class="intro">
  La pile JAM est une nouvelle manière de bâtir des sites et des applications web performants, sécurisés et simples à mettre à jour.
</p>

JAM signifie JavaScript, APIs and Markup (JavaScript, APIs et balisage). C'est l'empilement qui progresse le plus rapidement quand il s'agit de bâtir des sites et des applications web : plus de serveurs, hébergez tout votre partie cliente sur des CDNs et utilisez des APIs pour les parties dynamiques.

Lorsque la pile LAMP a commencé à devenir proéminente à la fin des années 90, elle s'est développée suite à un ensemble de contraintes qui ne sont plus d'actualité. À l'époque les navigateurs étaient de simples lecteurs de documents et tout ce qui était dynamique, social ou interactif devait obligatoirement se passer côté serveur. La seule forme d'hébergement accessible était l'hébergement mutualisé. Les déploiements consistaient à envoyer des fichiers par FTP. Le versionnement était la plupart du temps absent des habitudes quotidiennes des développeurs web.

De nos jours les navigateurs sont les systèmes d'exploitation du web et sont capables de faire tourner des applications complexes entièrement côté client. Il sont capables de faire appel et d'interagir avec un nombre sans cesse croissant d'APIs et de services à travers différents domaines et infrastructures. Les CDNs (Content Delivery Network ou Réseau de diffusion de contenu) ne sont plus un luxe que seules les grandes entreprises peuvent se permettre, ils sont maintenant une évidence de réduire la vitesse d'accès au serveur (le Time to First Byte) pour les sites et les applications de toutes tailles. Les modèles de déploiement ont évolué : les transferts manuels et fastidieux ont cédé la place à des processus automatisés déclenchés par des systèmes de gestion de version de plus en plus présents.


La pile JAM décrit ce nouvel état de fait. Au lieu d'envoyer par FTP du code serveur sur un serveur mutualisé, nous poussons avec Git et notre code est immédiatement assemblé et distribué sur des réseaux de CDNs un peu partout à travers le monde. Au lieu de dépendre d'une base de donnée pour chaque requête que nous devons effectuer, nous utilisons des outils de _build_ pour mettre en production des sites et des applications prêts à tourner directement dans le navigateur. Au lieu de mélanger ensemble la persistance, la génération du HTML, les transactions bancaires, l'authentification, etc. nous séparons ces problématiques et faisons appel à des APIs bien précises depuis notre front-end.

La pile JAM utilise des languages de balisage comme HTML, CSS et Markdown pour formater et mettre en forme notre contenu, du JavaScript côté client pour rendre le tout interactif et engageant, des APIs pour ajouter de la persistence, de la synchronisation en temps réel, des interactions concrêtes, des commentaires, des paniers d'achat et ainsi de suite. and so on.

Les navigateurs sont le nouveau système d'exploitation. Les serveurs sont absorbés par les CDns et les APIs. Les sites sont ou dépourvus de base de données et générés en amont ou font appel à de services de bases de données hébergées  et servies directement depuis le navigateur. JavaScript est en charge de toute programmation dynamique pendant le cycle requête/réponse et tourne entièrement côte client.

Tapez la JAM !

== vidéo ==


<iframe src="https://player.vimeo.com/video/163522126?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/163522126">SmashingConf San Francisco 2016 - Mathias Biilmann: The New Front-end Stack. Javascript, APIs and Markup</a> from <a href="https://vimeo.com/smashingmagazine">Smashing Magazine</a> on <a href="https://vimeo.com">Vimeo</a>.</p>



== articles ==
* [https://snipcart.com/blog/jamstack-clients-static-site-cms JAMstack for Clients: Benefits, Static Site CMS, & Limitations] (snipcart,[[2017-005]])
* (...)
* [https://www.lemondeinformatique.fr/actualites/lire-jamstack-revolutionne-le-developpement-web-87215.html Jamstack révolutionne le développement web] (Le monde Informatique - 2022-06-28)

== Chantier en cours ==
* refactoriser travaux du [[2016-357]] sur l'apprentissage de netifly et autres [[CDN]] à la ligne de commande. 
* time-sheet : déploiement jekyll from scratch
* tester interfaces-utilisateur mobiles

== contrôle qualité ==
* [https://medium.com/@JeremyRaffin/site-web-statique-optimis%C3%A9-avec-github-pages-partie-3-optimiser-les-performances-et-la-s%C3%A9curit-2be5413b7b17#.i6ikp927w Optimisation sécurité sur instances statiques]

== en vrac ==
* marché de la sécurité : deviser une migration wordpress clés en mains avec https://wordpress.org/plugins/jekyll-exporter/