Ceci est une ancienne révision du document !
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 été déjà 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 l'article de ce mois pour pé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 que vous aimez, 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, vous permettra d'accélérer le processus (comme convertir un site existant).
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
Devez-vous é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 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.
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/
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
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.