How the Faster Toppr Web App was Rolled out Using React and Redux

By:  Zishaan Hayath, CEO, Toppr.com and Gautam Chaudhary, Product Engineer, Toppr.com

From the traditional pedagogic models to computerized learning and cloud computing, the Indian education sector has evolved immensely. Its evolution has urged several EdTech startups to make effective use of modern technology in delivering a superior educational experience to its students. But despite carving a niche for themselves, they are finding it difficult to scale up and survive the market. Not only do they have to compete with offline rivals, they are also forced to deal with the unlimited availability of free content online.

Previously, Toppr’s existing web app was built on a custom JavaScript micro-framework, based on jQuery, and was tightly attached with the backend Django server. All the product pages were rendered using Django templates, and JavaScript was used for handling the UI interactions. And although this was working well for the company, the need to decouple the client layer from the data API to build an interactive and high-performance web app quickly became a challenge. Toppr, thus, decided to create its next version as a single page app – considering the need to provide a faster and more delightful experience to its users.

Creating the Single-Page Application (SPA)

A single-page application (SPA) is an application that works inside a browser. SPAs load a single HTML page and all the necessary assets (such as JavaScript, CSS, and Fonts) required for the application to run only once throughout the lifespan of the session. Any interactions with the page or subsequent pages do not require a round trip to the server, which means the page is not reloaded. The SPA requests the data directly from the server using Ajax and renders the page straight in the browser using JavaScript.

Although one has to put in a lot of effort to initially build one, and also maintain and update the system afterwards, if built in the right way – SPAs are not only faster than a traditional website, but also provide a better user experience. Companies should be prepared for the project to go slightly more indirect as there are more codes involved, more people to interact with, more points of failure and chances of more things going wrong along the way.

Choosing the right framework

For building a web app, the most crucial decision concerns the framework or library. While today there are vast options available, such as Angular, React, Vue.js, Ember.js, Meteor, etc, finalizing one from these depends on various factors like project requirements, company goals, team size, expertise, etc.

Toppr has been using React and Redux in many of its internal systems and has been satisfied with their performance and speed of development. Some of the reasons as to why they work really well are:

• React enables Toppr to easily build reusable user interface components.
• React allows high rendering performance in the browser with its Virtual DOM diffing algorithm.
• With the help of both React and Redux, Toppr renders the pages on the server, and reuses the server state in the client.
• Moreover, both React and Redux provide great Developer tools, which make it much easier to inspect the components of their hierarchy. They facilitate Toppr to look into their props and state, observe the dispatched actions and watch changes in the store.
• The Redux time travel feature allows Toppr to record and go back to any state of the app for debug purposes.
• Both React and Redux have amazing developer communities, well-written docs, and tons of free resources available online.

Considering all the advantages, Toppr decided to go ahead with React and Redux for its web app as well.

Our new stack

The Toppr React web app is written in ES2015+, and is transpiled to ES5 using Babel. It uses Webpack as its bundler for offering an incredible support to loaders, plugins, hot module replacement, code splitting, and tree-shaking. Redux has been used here for state management driven by its simplicity and benefits like unidirectional data flow, hot reloading, server-side rendering, etc. For the routing, React Router 4 was used to leverage its ability to do dynamic route matching and lazy code loading.

Using CSS with React

The CSS-loader module has been used in Toppr’s new web app for its ability to generate unique class identifiers during the build. In order to ensure that all of its React components are reusable, and can help in eliminating dead CSS code without worrying about its usage across the code base, a style file was created for every React component, which if not used will automatically get the related CSS code excluded from the bundle without bloating Toppr’s CSS output.

While styled-components have been gaining traction recently, we decided to use Sass for writing the style code as we found that styled-components are not yet stable and mature enough for our requirements. We compiled our Sass code to CSS using sass-loader, added vendor prefixes by using Auto prefixer along with post CSS-loader, and generated the CSS output using CSS-loader. We also used URL-loader for in-lining some of the images within the CSS file.

Using SVGs for Icons

Since icons are an essential part of our new vibrant design, and many of the icons have been reused across the product in different size and colors, Toppr came up with the best solutions and approaches for using icons in its web app like Image Sprites, Font Icons, SVG Icons, Background image in CSS and Inline SVG, after thorough research.

Delivering high-performance images

Images are an integral part of Toppr and are used for displaying diagrams in questions and concepts, photos in doubts on chat, thumbnails in videos, and profile photos of our users. It uses Cloudflare and CloudFront CDN for faster fetching, and uses Cloudinary for on-the-fly resizing of images based on device dimension and screen density.

While giving you all a low down on our design journey and product decisions and taking you through the reasoning of various architectural decisions that helped us build this new single page app (SPA), Toppr has identified that EdTech platforms like theirs are transforming the way that educators and students learn in a remarkable manner from simple apps to AI-powered gadgets. And, the day does not seem far when EdTech, regardless of being real or virtual, will enable educators to create a tech-savvy population that is well-equipped to navigate a rapidly changing world.