Making your React app AMP ready
Submitted by Ashish Gambhir (@ashbhir) on Wednesday, 20 June 2018
Journey of Grofers of converting all their product pages to AMP while maintaining the same React stack.
- Get an overview of AMP and see how companies like Thrillist and Myntra are benefiting from it
- Look at why Grofers decided to integrate AMP into their React codebase rather than making a completely separate stack for it (which most of the other companies are doing)
- Also look at the challenges faced when integrating into an existing codebase and how to overcome them
- Cover examples and code snippets of Grofers codebase for making reusable HOC in react for wrapping <img> and <Link> and converting them into amp compatible elements like <amp-img>
- Look at how to reuse existing CSS and running puppeteer based library for extracting css from canonical page.
- At last how to write test cases to ensure that the AMP pages never break
I am a passionate JS lover with experience in React, Angular and NodeJs. Currently Web UI Lead at Grofers. Having tons of experience ranging from big MNCs to small startups.