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.
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).
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
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.