Building Web at UrbanClap — The React Way

At UrbanClap, we love exploring new things — new libraries, frameworks and new ways of doing things more efficiently. We love anything that makes our work efficient by adding more value to our business. Tech world is changing everyday and we have new problems and challenges to deal with. It was few months back when we decided to focus on our web platform and it was essential for us to re-evaluate our existing web stack to cope up with our requirements for speed, flexibility and scalability. We started spending time researching about various frameworks for our web front end and found ReactJs as a performant match for our technical requirements.

Though ReactJs was a technology choice for us, it has also proved to be a wise business decision for a fast moving startup like us. I will try not to make this entirely technical and share our experience with React of how we built our full fledged web application in track with our business requirements.

Modularity and Reusability of Codebase

ReactJs is a library for building composable user interfaces. One of the best parts of ReactJs is how it makes you think about apps as you build them. You have to break all your complex architecture in components and identify every component that renders some html, based on its state which has all the javascript necessary for the user interactions. React components are independent and reusable entities having required minimal business logic within itself. You can always tell how your component will render by looking at one source file. We built our question answer component, which is one the most complex piece in our app and also the backbone of our business for taking customer requirements while placing a service request. We reused this same component at several places in our app and also made a widget out of it to be integrated on third party websites in a simple yet powerful way.

☹

Collaboration on codebase was no more a tedious task and we could easily communicate on components as real entities. It has become really easy to onboard a new developer with little idea on React and to explain the complete workflow in an efficient manner.

Productivity

There are lots of product iterations in fast moving startups like us. Every other day we have some new requirements from the products team. React has made easy to deal with new requirements and updates in the codebase. Each React component is readable and maintainable and you know where to make the changes and how your changes will affect the complete system. You have the power to reuse the components as building blocks for the system. React has improved our developer ergonomics in ways it made us to think, build and reuse the code effectively.

Debugging

We are using uni-directional flux pattern as redux with React which makes our data flow clear and understandable at each component level. Data is trickled down from parent component to child components. Components takes data as an argument and outputs html which makes easier to debug any component efficiently. Facebook has provided a Rect dev tool as chrome extension to inspect the components. We are also using Redux dev tool to understand the apps state and easily debug the system.

⚠

SEO — Search Engine Optimisation

Though search engine crawlers are getting smarter day by day and have capabilities of crawling client side rendered pages, but single page applications rely a lot on javascript execution and search engine crawlers have difficulties crawling the pages of such applications. It is always better to serve complete server side rendered content on platter making it easier for the bots to crawl the site. We built an isomorphic web app on React which helped us to render same components both on the server and client. React is excellent for building isomorphic apps since it allows to reuse almost all client side code to render it on the server side using ReactDomServer. No need for PhantomJS and other tricks for serving html markup to search engine bots! We built all our listing and partner profile pages which are effectively rendered on server side for seo and are completely interactive on client side.

Performance

Web apps these days are more interactive than they were ever. The DOM is one of the huge bottleneck with front-end performance. React uses Virtual Dom and several other techniques to minimise the number of DOM operations required to update the view with an update in model. Using shouldComponentUpdate, we can also optimise the rendering of react components as per requirements and thus minimising costly dom operations. React is smart enough to efficiently update and render just the right components when and where your data changes.

We are working hard to deliver the super fast experience for our users and search engine bots. Though our pages are rendered on server side but we keep the markup cached on Varnish and effectively use CDN’s for speedy delivery. We have implemented H2 on our servers and started trying out webP for delivering images on our website. We boosted our website’s performance to a great extent in our recent Hackathon. Stay tuned to get updates from our ‘PowerBoost’ project and if you find the all these interesting… Checkout our Careers Site, We’re always looking for talented folks to join our team.