Editor’s note: The following was originally posted on Reddit’s blog by u/arbeitrary, Senior Software Engineer. Read below to learn how Reddit is using React to enable AMP.
At Reddit, we recently built alternate versions of some comments pages that use Accelerated Mobile Pages (AMP) technology — a technology designed by Google and others in the open source world to ensure that pages load instantly from search results on mobile devices. We have implemented it to improve the Reddit experience for mobile users.
We’ve built this as a Node.js app using React and Redux. React is a modern web framework that solves a number of problems that occur during web development. Redux is a library that helps maintain UI application state and abstracts state transitions away from user controls and API callbacks, providing an immutable, single source of truth about application state to the view components. React and Redux might seem like an odd choice for an app that essentially renders static markup, but we found the combination to be effective. Our decision was more about people and productivity than the code itself.
We have an awesome team working hard on a new version of our mobile web app that uses React and Redux. It will replace the site currently running on m.reddit.com, and will ship in the coming weeks. The new app is a single-page app, which means that instead of the server rendering each page, client-side JavaScript code handles clicks, makes data requests to the API, and renders new views live in the browser. To support a great experience when the app first loads, we also support full and partial rendering of a page on the server-side.
Our primary goal for choice of technology to build the AMP app was to let us move quickly while creating a great user experience. Since AMP is a fundamentally mobile experience, we chose to use the new React and Redux-based version of our mobile web app as a starting point, but using it exclusively with server-side rendering. Starting with an existing codebase let us focus attention on how an AMP experience for Reddit should differ from the core mobile web experience. React let us use AMP components like amp-img or amp-accordion to build our views the same way we use any HTML element, so we maintained a consistent paradigm with our other React projects without adding glue for each new component.
As our AMP traffic increases, we learn more about AMP in production, and we continue to explore more ways to serve mobile redditors, the line between our AMP app and our core mobile web app may blur. We have intentionally left the door open for merging our AMP app and mobile web app together. At a basic level, this makes code sharing simpler while giving us flexibility to draw on fast-loading AMP to gracefully enrich the interactivity of our pages as new users become regular redditors.
From both a technology and user experience perspective, we’re excited about new tools and ecosystems like AMP and React. Both enable developers to write better code for a fast and engaging web. Anything is fair game when it helps us build solid technology for helping redditors find their home on the Internet.
Posted by u/arbeitrary