ReactFoo Delhi

Journey of Grofers of converting all their product pages to AMP while maintaining the same React stack.

Outline

• 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

Speaker bio

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.

Slides

https://docs.google.com/presentation/d/1tuqS8HKmOZYjaSpx5SKys_hT-WerxOSyUXELeWa3Gz8/edit?usp=sharing