Adding cross-platform React/React Native chat to existing application – case study

The emergence of React Native made it possible for developers to simultaneously create React-based web apps and RN-based mobile apps that share a lot of their codebase. This particular combination has a lot of benefits and makes for a highly productive software development process with quick deliverables. But whether it is the optimal choice in any given project depends on a lot of factors. Let’s analyze a project TSH developers have recently worked on that met the requirements.

Challenge – cross-platform and cross-version chat app

The client company sells software to both individual and business clients. They realized that the tool would benefit greatly from adding some collaboration features so that the users could talk to each other when working together on the same task. This seemingly simple functionality proved more difficult to implement than it may seem at first glance.

The client’s application was written in Java and distributed as a standalone application for each client to host separately. There was no central user database as well. As a result, it was difficult to easily push new changes. In addition, the clients used various versions of the software at the same time.

Given these circumstances, we needed to find a way to provide a chat solution to all the users of all the versions of the software, both the web and mobile.

Background – creating technology for a tech company

What’s extremely important to add is the fact that the client’s company is at its core a tech company. Its core development team maintains and develops the application in Java and they are doing a great job to that end. 

If there was an easy way to add the new feature using the technology the company excels at, that would be the end of it. Yet, the decentralized distribution model of the app determined that non-essential features have to be added in a different way altogether.

After discussing our options with the client, we came to the conclusion that the best way to deliver a solution that meets all of the requirements is to use the combination of React, React Native and Google Firebase. We assembled a team that consisted of Frontend Developers, a Senior React Native Developer and a QA Engineer.

Why React/React Native chat application?

We decided to create the chat functionality by delivering 3 separate solutions that share a lot of its codebase:

• web application,
• mobile application,
• embedded application for the core system.

Firebase, Google’s toolset for building mobile and web applications which includes ready-made solutions for problems such as authentication, dynamic links, file storage, push messaging and more, was chosen because it is a great platform for building real-time apps. One could even say that a chat is kind of a flagship type of application for Firebase. In addition, with a toolset like this, it’s easy to get to the business logic and quickly provide real value to the client. If you add the fact that Firebase now prioritizes supporting both mobile and web apps equally, it makes it a great choice for our cross-platform chat solution.

And why React/React Native? There are a couple of reasons and they can be divided into two groups:

• The technology itself

The greatest benefit is the ability to easily maintain and develop three separate platforms in the future all the while ensuring quality comparable to native applications. In addition to that, the most recent versions of React Native introduced a lot of tooling that makes the development process more efficient. Stability and performance improved as well.

• Our strengths

The potential of the technology itself would not be enough if we weren’t able to take full advantage of it. Luckily, our developers have tons of experience in React and React Native. Both of these technologies proved extremely effective in many of our projects.

Development of cross-platform React/React Native chat app

The development process itself has proven that our initial assumptions were correct.

The majority of the codebase we developed is shared across the three versions of the chat solution: the mobile app, the SPA and the embedded app. This includes the entire client side business logic (Redux Store, actions and selectors) as well as helpers and TypeScript’s types and interfaces, hooks and styling. The parts that do differ have to do with displaying the data and sending user interactions further in the system. The embedded app is largely the same as the SPA, short of a couple modules it doesn’t need. The real challenge with the embedded app was to include it in the frontend layer of the core application in a way that doesn’t break the UI or already existing javascript code in any scenario.

As for the mobile apps, there are always a lot of challenges related to the differences between various platforms. It isn’t always viable to develop generic solutions/components that will work the same everywhere. But with each version of React Native, there are more and more elements that do meet the high standards of cross-platform development.

Ultimately, thanks to the ever-improving performance of React and React Native as well as the skills of our developers, we were able to develop a solution that is both high-performing and safely hosted in the cloud. We did not compromise the quality of any of the delivered apps, while shortening the development process at the same time. While the solution is still tested and may be subject to further iterations, they have to do more with UX and usability rather than the architecture, which is considered a long-term solution.

Lessons learned from building a React Native chat app

The project allowed us to come up or strengthen our belief in a couple of best practices and assumptions:

• The client’s core team of developers is well-suited for taking care of the product. They work efficiently with the technologies they have been using and perfecting for a long time. However, there are often various side projects that can be extracted from the core app and developed with outsourced developers for improved efficiency in terms of both money and time.
• For many tech companies, it’s best to stick to the technologies they know best, and when there is a need to develop something in a different technology, outsourcing can be a great addition. It’s a cooperation model that is getting more and more popular worldwide.
• The technology stack you choose for a project needs to be adjusted for both the best possible project fit and the abilities of your developers. Only then it is possible to minimize the impact of potential downsides of the picked tools. 
• Today, the combination of React and React Native is mature enough to provide a serious competition for native Android/iOS mobile technologies, shortening time-to-market and maintenance without having a negative impact on the performance.

What do you think about the case study? Do you have any questions regarding any of the phases of the development?