ReactFoo Delhi

On React, alternatives to React, ReactNative and front-end engineering

Making your React app AMP ready

Submitted by Ashish Gambhir (@ashbhir) on Wednesday, 20 June 2018

videocam_off

Technical level

Intermediate

Section

Crisp talk

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +5

Abstract

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

Comments

Login with Twitter or Google to leave a comment