N.B., Bab, le titre du mois dernier devrait être remplacer par AMP, tout simplement !!
Earlier this month, I went to the AMP Roadshow as it arrived in my city. It took place at the local Google headquarters, and was dedicated to new features coming to AMP, as well as the newer features that had already dropped. It included keynotes (with examples) as well as a codelab segment with a variety of tutorials. As such, I wanted to use my article this month to cover some of the things I learned.
Plus tôt ce mois-ci, je suis allé à l'AMP Roadshow qui arrivait dans ma ville. Il s'était installé dans les bureaux locaux de Google et était dédié aux nouveautés prochaines d'AMP ainsi qu'aux nouvelles fonctionnalités qui avait déjà été mises sur le marché. Des points presse étaient prévus (avec des exemples) tout comme une section « codelab » (labo de codage) avec tout un ensemble de tutoriels. Ainsi, je voulais utiliser cet article pour présenter certaines choses que j'ai apprises.
Learning by Example There are a few websites that offer examples and guides for getting started with AMP. The two best ones I’ve used are: • https://ampbyexample.com/ - A collection of individual element examples (eg. a navbar example). • https://ampstart.com/ - This site offers complete templates that you can download and use as a starting point. According to a keynote at the AMP Roadshow, the website should be updated with a customization option soon. The best way to approach this would be to find a template you like from AMP Start, and then add elements from AMP By Example (or AMP Start) until you reach the layout you want. Ideally, having a goal in mind before you start will make the process go faster (such as converting an existing site).
Apprentissage par l'exemple
Il y a quelques sites Web qui offrent des exemples et des guides pour démarrer avec AMP. Les deux meilleurs que j'ai utilisé sont : • https://ampbyexample.com/ - Un ensemble d'exemples individuels par élément (par exemple, la barre de navigation). • https://ampstart.com/ - Ce site offre des modèles complets que vous pouvez télécharger et utiliser comme point de départ. D'après une note de presse d'AMP, le site Web devrait bientôt être mis à jour avec une option de personnalisation.
La meilleure façon d'approcher ceci serait de trouver dans AMP Start un modèle qui vous plaît, puis d'ajouter les éléments à partir d'AMP by Example (AMP par l'exemple) jusqu'à ce que vous arriviez à la disposition que vous voulez. Idéalement, le fait d'avoir un but en tête avant de commencer (comme convertir un site existant), vous permettra d'accélérer le processus.
Do I have to manually write all the HTML? No. If you want to use a static site generator (such as Grow), you can embed the CSS directly into the page (required by AMP), and can set up predefined HTML structures to drop content into. If you’re instead looking for a plugin for a CMS, there are apparently plugins for Wordpress or Drupal. There’s also a project on GitHub called amp-library, which is intended to convert normal HTML to AMP HTML. The project can be found here: https://github.com/Lullabot/amp-library
Dois-je écrire tout le HTML à la main ?
Non. Si vous voulez utiliser un générateur de site statique (tel que Grow), vous pouvez incorporer le CSS directement dans la page (requis par AMP), et vous pouvez paramétrer les structures HTML pré-définies pour y inclure le contenu. Si, au contraire, vous chercher un module intégré pour un CMS, il y a apparemment des plugins pour Wordpress et Drupal. Il y a aussi un projet sur Github, appelé amp-library, qui cherche à convertir du HTML ordinaire en HTML AMP. Le projet peut être trouvé ici : https://github.com/Lullabot/amp-library
Should I manually write all the HTML and embed the CSS? Yes. As with any programming exercises, you learn more by doing it all by hand at first, before relying on tools to automate tasks. The more you have to write the HTML for an element, after all, the better you’ll remember it later. Naturally, if time is of the essence, do whatever you can to speed up the process. If you end up with some free time later, you can always return to manually writing it.
Dois-je écrire à la main tout le HTML et incorporer le CSS ?
Oui. Comme pour tout exercice de programmation, vous apprenez mieux en le faisant d'abord à la main, avant de vous appuyer sur des outils pour automatiser les tâches. Après tout, plus vous écrirez de HTML pour un élément, mieux vous vous en souviendrez plus tard. Naturellement, si le temps presse, faites tout ce que vous pouvez pour accélérer le processus. Si vous trouvez un peu de temps libre plus tard, vous pourrez toujours revenir à l'écriture manuelle.
What about interactivity? A relatively recent addition to AMP is amp-bind. It allows you to store state and interconnect elements within a page. A nice example of that is on AMP By Example: https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/
Et pour l'interactivité ?
amp-bind est un ajout relativement récent à AMP. Il vous permet de stocker l'état et d'interconnecter des éléments d'une page. Un exemple sympa de cela est dans AMP by Example : https://ampbyexample.com/introduction/amp_for_e-commerce_getting_started/
My Website is a Progressive Web App - can I use AMP? This was actually covered a lot at the AMP Roadshow. The ability to install a service worker was added to AMP recently, which enables the ability to install the service worker in the background. This means you can set up your entry points to load the service worker, and then upgrade to the PWA as users interact with your site. Furthermore, it’s possible to create a PWA frame, which then loads content from AMP pages using a shadow DOM. A codelab to teach you this can be found here: https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0
Mon site Web est une appli Web évolutive - puis-je utiliser AMP ?
En fait, cela fut beaucoup traité lors de l'AMP Roadshow. La capacité d'installer un « service worker » (NdT : pour info, voir https://developer.mozilla.org/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers#Le_pr%C3%A9ambule_aux_Service_Workers) a été ajoutée récemment par AMP, ce qui donne la possibilité d'installer le service worker en tâche de fond, puis de le mettre au niveau des PWA (Progressive Web Apps - Applis Web évolutives) quand les utilisateurs interagissent avec votre site.
De plus, il est possible de créer un cadre pour PWA, qui charge ensuite du contenu à partir des pages d'AMP en utilisant un DOM fantôme.
Un codelab pour vous apprendre ceci peut être trouvé ici : https://codelabs.developers.google.com/codelabs/amp-pwa-workbox/#0
Conclusion AMP is a wonderful library to have access to. It offers a good balance between ease of use, and performance. While there are some limitations placed on you when using it, in my experience, the limitations really just make life easier for you by preventing a lot of the hacks common on the web. Naturally, you’ll always have to balance the pros and cons with what it is you need to build. That being said, AMP is definitely worth your consideration. The main exception is if you need to include custom JS - as AMP does not allow this (except in iframes). I hope this article was interesting to at least a few readers. And perhaps a few of you will be trying AMP in the future - will maybe even contribute to the project. If you have any questions about AMP, you’re welcome to contact the AMP team on GitHub or Twitter, or email me at lswest34+fcm@gmail.com. If you have requests for other articles, please send them to me as well.
Conclusion
AMP est une merveilleuse bibliothèque à laquelle accéder. Elle offre un bon équilibre entre la facilité d'usage et la performance. Tout en faisant face à certaines limitations en l'utilisant, d'après mon expérience, les limitations vous rendent la vie plus facile en vous protégeant d'une quantité de piratages classiques sur le Web. Naturellement, vous devrez toujours faire la part des bons et des mauvais points en fonction de ce que vous devez construire. Cela étant dit, AMP mérite votre considération. La principale exception est si vous devez inclure un JS personnalisé, car AMP ne le permet pas (à part dans des iframes).
J'espère que cet article a intéressé au moins quelques lecteurs. Et il se peut que quelques-uns d'entre vous vouliez essayer AMP dans le futur et même contribuer au projet. Si vous avez des questions sur AMP, contactez l'équipe d'AMP sur Github ou Twitter, ou envoyez-moi un mail à lswest34+fcm@gmail.com. Si vous avez des idées pour de futurs articles, n'hésitez pas à me les envoyer.