Positive Reacts Only — Web Development Made Leaner, Meaner, and Cleaner at MMT
Every second counts esp. when the average attention span is 8 seconds only! Every second of less load time goes a long way towards higher customer confidence and trust in your website.
Adopting a framework is a risky task. It’s more of a business decision than a technological one. Introducing React in MakeMyTrip acted as a catalyst to boost up business growth & enhance technological scalability.
According to a Frontend Developer, if we throw light on the evolution of technologies, we will notice that React is a significant JavaScript Library for creating a user interface at a rapid pace, thus proving its preference within various online companies.
Is React a library or a framework ?
React is a library or a framework, explicitly tricky in its own way. The founders called it a library which motivates markets to adopt on a large-scale, except for the other heavy weight MVC framework available.
But as you will begin to use its extended syntax like component lifecycle, routers & mainly redux part etc. — surely, you will find that today it is doing the same thing which a framework does, but in a much more efficient manner.
What we get after implementation ?
React is helping Makemytrip in developing contemporary & scalable applications. It enhances the pace of performance which eventually drives user leads and increases business growth.
Some points are briefly highlighted as :-
1.1 ) Reuse components for rapid development
React is all about components. We have created a personal repository by using Nexus Repository Manager (an open source platform provided by Sona type). It makes components as an npm private plugin by which small & big components are reusable across different projects. For example:
To upload any component, we need to add registry entry in package.json like"publishConfig": { "registry": "http://172.16.44.91:8081/repository/npm-private/" },To install : npm i -S common-select@1.0.0
where 1.0.0 is the version & common-select is component name.How to use : import CommonSelect from ‘common-select’;
<CommonSelect />
1.2 ) How the reduction in file size happens ?
- We used the HOC (higher-order component) technique for reducing the unwanted elements at the time of rendering on any reusable component. It provides a function that takes an existing component and returns into a new component. For example the mobile web UI components (date-picker , autocomplete, modals & carousel etc.) is scaled up to Desktop which help us to make a code base common for both.
const EnhancedComponent = higherOrderComponent(WrappedComponent);- Implemented Theming and Variation for altering brand colours and functionality of component.
- Introduced Flex box features, vh, wh & calc for creating grid by which we removed the bootstrap (119 kb) that we used earlier. We were using Animation Library (52kb) & jQuery which is now replaced by css3 transition & transform.
- Applied Autoprefixer & Browserslistrc for preventing vendor & cross browser specific style sheets. Enabled web-pack config which helps in build size at production to get reduced.
1.3 ) Responsive Adaptive Website (RAW)
One of our favourite quotes from Bruce Lee sums up our thoughts:
“Empty your mind, be formless, shapeless — like water. Now you put water in a cup, it becomes the cup; you put water into a bottle it becomes the bottle; you put it in a teapot it becomes the teapot. Now water can flow or it can crash. Be water, my friend.”
Similarly, we achieved responsiveness with the help of react-breakpoints which give the break points for desktop, tablet and mobiles and then render the view on the basis of that break points.
const breakpoints = { mobile: 320,tablet: 768,desktop: 1200,}We don’t need to set up a different code base for desktop & mobile. One single code base has the common components (responsive) which could be used across the application and the components catering to different resolutions (adaptive) would be displayed on the basis of break points which reduces the efforts of developer.
<Media>{({ breakpoints, currentBreakpoint }) =>
{switch (currentBreakpoint) {
case breakpoints.mobile:
return <MobileList />
case breakpoints.tablet:
return <TabletList />
case breakpoints.desktop:
return <DesktopList />
}
}}
</Media>1.4 ) Reduce Page Load Time for high performance
DoubleClick by Google study suggested that sites loading within 5 seconds had 70% longer sessions, 35% lower bounce rates, and 25% higher ad view-ability than sites taking nearly four times.
Updating DOM is a challenging task when it comes for fast page rendering. React is solving this through Virtual DOM which means any changes are first reflected virtually in memory. Then an efficient different algorithm compares the earlier as well as current states of the virtual DOM. On the basis of this, it calculates minimum read/write time for updating those changes in DOM. This is the main reason behind React’s high performance.
1.5 ) Increase Business Growth
In mobile web, we observed 24% upside from homepage to flights listing & 19% upside from homepage to hotel listing. Mobile web hotels funnel showed 100% conversion upside.
In desktop hotel, overall room night conversion saw an upside of ~9% & desktop bus funnel upside of ~20% .
Through wallet simplification, domestic flight payments conversion increased by ~1.5% & domestic hotel payments conversion increased by ~1% .
Conclusion
ReactJS is perfect to make high-performance presentation layer for your applications. The Virtual DOM feature, which was present in very few other MVC framework, is an icing on the cake.
“Don’t be afraid to give up the good to go for the great.” — John D. Rockefeller
Part 2 of this article coming soon with more technical details..
