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
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.
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.
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
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.