Seamlessly paired AMP + ReactJs PWA | Goodness of both in one

There is always a time while developing web apps when you have this dilemma about which stack to choose. We usually have to trade-off between the performance (faster load times) or aesthetics ( the user experience ). All frameworks have there pros and cons and I don’t choose to favor one over another. But instead of choosing a single stack, I thought it would be cool to try something new and go with a paired tech stack. In this read, you will be able to see the why and Ifs to both of these technologies and how you can make them coexist enabling a seamless user experience. The final outcome is going to be a web experience that will use AMP for improved search results and instant load in search appearance proceeding to a React PWA that has fluidity enabled by virtual DOM. This means that we have to create 2 frontends with the exact same content and UI so that the user doesn't feel much difference. This read will cover the why and the Approach. And the next read will how and the steps to accomplish this.

Who will actually need this?

1. Ecommerce Sites relying on Google Search for customers and then wanting to have a closer audience with PWA
2. News and media sites with quick SEO ranking needs
3. Content sites like medium and Twimbit

Why AMP+ReactJs?

The usual scenario for a person to discover your app is via Google Search. AMP has a unique advantage over other frameworks that it can perform better on search rankings and also gives a bolt icon to your search results. It will also give an instant load as soon someone clicks the AMP search results which feels as if the content was part of search results. This can be easily achieved if you can create a 100% valid AMP Page. You might have compromise on some aesthetics and user experience on the way to have a 100% AMP valid page. It would look great, as AMP has almost all the web components. Switching between the pages would be as instant but not seamless.

This is something we discovered on the path of creating a perfect PWA that the navigation should be seamless. And for this particular reason, we have to move to ReactJS because of its Virtual Dom implementation. But the important part is how to make this transition without the user even noticing it.

The Approach

Following is the scenario for our users —

1. The user finds an AMP-enabled search result with a bolt icon.
2. On clicking the results it will take him to the cached version of the AMP page.
3. On any further click, it should take him to the React Page which is PWA enabled
4. Users will choose to install our PWA on the install prompt.
5. Now that our PWA is installed any repeat visit to search results containing our domain name will take him directly to our PWA.

Steps

These are the overview steps to do it with WordPress

1. Create an AMP valid WordPress theme with all components as per your design requirements with link Relation of React page.
2. Install WPGraphQL plugin
3. Create ReactJS frontend with all components as were in AMP theme
4. Fetch the content from Wordpress via GraphQL( we have user Apollo client)
5. Keep the URL structure the same as of the WordPress permalink Structure
6. Enable PWA
7. Apply URL forwarding using HTACCESS method

The detailed method to create this experience is in my upcoming Read.

Things to consider

1. The UI should look almost the same for a smoother experience
2. AMP page should be 100 % valid in order have bolt sign and cached google result
3. Both frontends should be hosted in the same parent domain but with different subdomains (“amp.domain.com” + “domain.com” )or directories (“domain.com/amp” + “domain.com”).
4. The URL structure should be the same.
5. If your site is dynamic then there should be Backend CMS to serve paired content to both of the Frontend.
6. ReactJS page should be PWA enabled.

Here is an example stack of what we used at Twimbit to accomplish the approach. WordPress as backend CMS with paired AMP theme and ReactJS connected using WPGraphQL.

Conclusion

Though it feels very complicated actually creating this was fun and really simple. The entire Development cycle took 4–5 weeks with just 2 developers one for AMP + WordPress and the other for ReactJS. Everything that we used is opensource and well documented. And in the Next Read, I will tell the actual steps to create this stack with all links to the Documentations. We didn’t face many issues apart from some CDN and server-side errors which are also covered in my other reads.