Why Brownfield Development With React Native Is Worth Your Attention

Introduction

There are different stages of the application lifecycle. The longest and one of the most important ones is the maintenance period. It includes all the work that is needed to keep the released software up and running to its full potential.

During that stage, we often discover new libraries, design patterns, or even frameworks that promise to provide significant improvements. We try them out in order to stay ahead of the competition and make sure that our application is still shining, no matter its age.

One of the best ways to do so is to do it gradually. In other words, rather than rewriting your entire application from scratch - integrating new components into a living organism and replacing existing pieces of the application one by one.

For example, a developer looking to migrate its existing frontend from Backbone to React could consider replacing just a single component with React to start with. Here Ryan Florence demonstrates how to gradually migrate from Backbone to React:

A good candidate is the least important screen of your product - one that you can risk having suboptimal for the purposes of testing.

As a result, you get the opportunity to try the latest innovations without risking losing a lot of resources and time on something that may not work for you at the end of the day.

Greenfield and brownfield development in React Native

When it comes to React Native, there are two terms that describe the way you start developing your next cross-platform application - greenfield and brownfield.

Greenfield development

Greenfield project is one that lacks constraints imposed by prior work. This is a close analogy with construction on greenfield land where there is no need to work within the constraints of existing buildings or infrastructure.

In the React Native context, it refers to a fresh project, typically created with the React Native CLI or Expo.

Brownfield development

Brownfield project, on the other hand, is the one where the new developments have to be performed with existing components in mind. The analogy here is the opposite of the greenfield one - the constructions have to be done with surrounding buildings and/or infrastructure in place.

In the React Native context, brownfield development means a project that has been started as a part of an existing mobile application.

What makes Brownfield and React Native a perfect match?

While it may seem that React Native is rather exotic compared to the traditional native development, its architecture and design decisions make it a perfect candidate for brownfield development.  

React Native application, unlike many others created with alternative frameworks, is no different from a native application. Typically, a React Native project includes the source code of iOS and Android applications inside. During runtime, the native side reads the JavaScript file where React components were defined and uses that information to render appropriate elements on the screen.

In reality, the React Native architecture is a bit more advanced than the above description. You can read more about it in our Ultimate Guide to React Native Optimization. For now, remember that from the device perspective, React Native applications function and operate as a native application.

As a result, you can gradually adopt React Native to your application and start taking advantage of cross-platform benefits right away, without rewriting everything from scratch or performing significant architectural changes.

Benefits of integrating React Native in a brownfield way

If you have an existing application on multiple platforms, it doesn’t mean you have to miss out on the benefits of React Native and the cross-platform approach.

By gradually adopting it into your infrastructure, you get the following:

The total cost of development reduced by up to 50%

It's one of the most relevant business benefits of cross-platform app solutions. They allow you to reduce the development cost by 50% by having one team responsible for app development that works both on Android and iOS. Also, the Brownfield approach allows you to reuse existing native code while expanding the app with JavaScript. It means less work for developers which also reduces the total cost of the process.

Faster time-to-market

Thanks to the fact that you manage only one team of developers, it makes the whole process more time-efficient. Thus, your team is able to launch your app faster than the competitors. The rule is easy: the quicker you publish the app, the quicker you can make the money. Also, with Brownfield, you can reuse some pieces of existing native code while expanding the app with JavaScript. Less coding and faster launch. Sounds interesting, doesn’t it?

Revenue-generating continuity

‍It's one of the best things that brownfield brings to the table. It allows you to implicate upgrades to your app with no harm to its business continuity. Thanks to that, your product can still generate revenue while being upgraded.

What's also worth noting is that with Brownfield you can move from multiple applications (for iOS, Android) to one without stopping existing operations! You can start to move your apps from native to one, cross-platform version and your users will still be able to enjoy it.

Lower maintenance cost

‍It's quite simple - one cross-platform app requires less maintenance effort than two versions for different platforms. All the job is being done by one team.

An example of Microsoft using React Native to share code between different platforms.

This is the best example that this technique is applicable to all businesses, no matter the age and size of the product and the organization.

Learn more: If you want to learn more about the technical details and how to get started - we have prepared comprehensive step-by-step guides for both iOS and Android platforms.

Summary

As part of The React Native Show, we released a podcast fully dedicated to future of Brownfield Development with React Native.

While integrating React Native into existing mobile applications is no different from adding another native screen, there’s a lot of tiny design decisions that can have a great influence on the resulting performance and ease of development of your application going forward.

We have learned the hard way that it is extremely difficult to possess expert knowledge of Android, iOS, and React Native nuances in order to be able to glue them together in the most efficient way.

react-native-brownfield library

That’s why we have created a dedicated library, called React Native Brownfield, to solve that challenge.

‍Mike Chudziak announcing React Native Brownfield at RN EU on stage

It is a collection of our best practices and tools that we usually pick when integrating React Native as a part of the existing infrastructure for our clients.

Watch brownfield repository to stay updated

We are currently working on a complete rewrite, referred to as v2, which introduces build automation, reducing the steps needed to set up React Native in a brownfield environment to a bare minimum.

Make sure to subscribe to our newsletter and watch the repository on Github to stay on top of the updates as they happen in the coming weeks.

In the meantime, take a closer look at other services offered by our React Native development company.