What makes React Native suitable for Uber Eats and other online food delivery apps?

Uber is obliged to offer a little more than conventional to its customers, regardless of the domain. While the plan of launching UberEats, an online food delivery app, was in the pipeline, the company was committed to making it an exceptional experience, just as it’s the case with UberPOOL and UberX. 

The developer team was aware of the industry’s existing challenges like extra steps involved in the pick up and drop, not having real-time communication with the delivery professional, and establishing constant communication with all the three verticals (customers, restaurants, and delivery personals) of the personnel.

Ultimately, UberEats came into being, taking the help of React Native. In this post, we will explain how the usage of Reach Native helped Uber to shape the app. 

Understanding React Native 

RN or React Native is a globally recognized mobile application development framework, written in JavaScript. Using React Native, native iOS and Android mobile application development is possible. App development for the assorted platforms will be done using an identical codebase which leads to huge efforts and time-saving. 

Generated by Facebook and related communities, React Native was offered as an open-source tool in 2015. Soon after the development, it became a standard source used in hybrid and mobile solution development, owing to its unmatched ease and extended usability. Also, code written once can be used for iOS and Android application development without any hassle. 

It has become so prominent amongst the developers that more than 42% are using it. In fact, modern applications like Skype, Facebook, and Instagram came into being because of React Native only. 

The Challenges 

Developing a mobile app is already a challenge-filled job and Uber’s major challenge was the lack of an adequate technology stack required to develop a mobile app as the team dealt only with web app development, having three parties. The development of such an app needed a dashboard that shouldn’t be limited to the web, can enter the eateries, and transmit critical information from restaurants. 

Based on the existing knowledge, Uber built a prototype of the app. But, all the above features were missing from it. Additionally, the absence of sound notifications harmed the end-user experience hugely as eaters weren’t able to get the real-time order updates. 

The primitive Restaurant Dashboard was web compatible and featured a React/Flux page for tablet devices granting access to limited devices at the time. This diminished capacity of the Restaurant Dashboard forced Uber to have limited communication with restaurants. 

One of the easiest examples of this controlled communication is that end-users have to communicate with the web page to support the sound-based notification cueing. Restaurant employees weren’t receiving real-time updates on receiving a new order, arrival of delivery personnel for order picking, and final delivery. 

Other than this, the previous version of UberEats only granted access to printing physical receipts to restaurants using AirPrint compatible printers. 

React Native Made Things Better 

The development team didn’t know how to build an iOS/Android app. But, React was mastered. So, preferring React Native for Uber Eats was a sure shot. It’s a pivotal part of the hefty technology stack used for Uber Eats. It gets along well with the existing infrastructure of Uber and allows the team to access features they were looking for in native mobile app development.

Before launching a fully functional app, Uber decided to come up with a demo version that should include the below-mentioned key parts:

• Crash reports of the app 
• End-user’s detailed analysis 
• The ability of the app to download the native dependencies 
• User authentication 

As per the company report, the demo succeeded in bringing the desired outcome as the developer team found out that crash reporting was working better than expected JavaScript bridging for a facility like firing analytics events was seamless, and observing the application’s business logic was easy. 

Application’s architecture re-defined  

React Native helped Uber to fuse mobile and web application development while allowing feature generation in native or in JavaScript. Because of this interoperability, the developers of Uber were able to utilize their web application development expertise in mobile application development as well. 

They designed Uber Eats in a very similar fashion to the customary React /Redux web app while keeping the iOS patterns and modules patterns at bay as per the need of the hour. The use of React Native allows Uber to enhance the app’s routing functionality. 

While Uber Eats was only web-based, Restaurant Dashboard was using the famed react-router library. Using the library, the app’s routes were explained declaratively, like a View. Such sort of app routing supported only URLs, whose accessibility was not possible outside the browser. 

The use of React Native grants developers a precise navigation library that is very much similar to UINavigationController. React Native libraries like NavigationExperimental or Navigator allowed Uber’s development team to migrate off the reach-router easily. Vanilla reach-router is a great resource for app routing as it hardly gets hampered by the app’s architecture. 

While the porting process was going-on, the development team learned that it’s a wise move to reduce the interaction between iOS and JavaScript while placing the logic in the JavaScript layer. This move helped in many ways. For instance, the final app featured less. 

JavaScript and Objective-C switching for better portability, and fewer odds for bug occurrence. Using the n Reach Native, Uber Eats development team came up with an austere communication API that can be used further at various levels. 

Enhances Push Updates/Notification

The sound-notification incompetency of web app was curbed with React Native as applications built using this technology are linked together with a small chunk of Objective-C/Java code. These codes come together to build a bulky bundle that is later dispatched with the application like an asset. When there is a native layer, the application is capable of altering the React Native bridge file and requesting reloading. 

At the native layer, the application can change the file used by the React Native bridge and request that it be reloaded. A bad update, which is referred to as a trouble-causing bundle in Uber Eats, can force stop the Restaurant Dashboard. It can happen before the logic bundle comes into action. Such bad updates can show up anytime and crash the Restaurant Dashboard. 

The developer team fixed this issue by treating every single release as experimentation so that gradual rollout is possible. The unique javascript bundle, offered in React Native, was automatically loaded after loading any pushed bundle. 

Wrapping it all up

Uber Eats has an interesting journey and React Native has played a pivotal role all through this journey. This technology has helped the development team with some commendable expertise and functionalities for native app development to improve the user experience. 

It brought maximum revolutionary changes in the upgrade of the Restaurant Dashboard. It has made this operational aspect empowered, seamless, and highly responsive. This framework has surely intensified the app’s capability without increasing the complexity. Even though React Natives accounts for a small portion of the mammoth technology stack of UberEats, functional from behind, its contribution is commendable.

If you’re planning to develop an online food delivery app like UberEats, consider React Native. Hire React Native developer or team to turn your project idea into reality. Placing a bet on it won’t disappoint anyone.

Editor’s Note: Chandresh Patel is a CEO, Agile coach, and founder of Bacancy Technology. His truly entrepreneurial spirit, skillful expertise, and extensive knowledge in Agile software development services have helped the organization to achieve new heights of success.

Have any thoughts on this? Let us know down below in the comments or carry the discussion over to our Twitter or Facebook.

Editors’ Recommendations:

• Native and hybrid apps: Is there an opposition?
• Should you pick React JS for your next website or application?
• What to consider when using open-source technology to build your app
• Is JavaScript the best choice for artificial intelligence and machine learning?