The application lifecycle includes several stages, with the maintenance period being the longest and most crucial. It involves all the necessary work to keep the released software operating at its full potential.
During this stage, we often discover new libraries, design patterns, or even frameworks that promise significant improvements. We try them out in order to stay ahead of the competition and ensure that our application is still shining, no matter its age.
One of the best ways to achieve this is by gradually integrating new components instead of rewriting the entire application from scratch. In other words, this means integrating new components into a living organism and replacing existing pieces of the application one by one.
For example, a developer wanting to migrate their existing frontend from Backbone to React could start by replacing just a single component with React. Ryan Florence demonstrates how to gradually migrate from Backbone to React.
A good candidate for this approach is the least important screen of your product—one you can afford to have suboptimal for testing purposes.
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 Expo or React Native Community CLI.
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 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:
Reduction of the development costs
It's one of the most relevant business benefits of cross-platform app solutions. The total development cost can be reduced by up to 50%, assuming you're working with just two platforms (with potential savings increasing as you add more platforms).
Realistically, you can expect to ship 20–40% faster, unless you completely disregard platform differences—in which case the 50% reduction applies for two platforms. In practice, you can achieve 80–95% code sharing, leaving ample time to refine the native user experience for each platform you support.
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 implement 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.
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.
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 React Universe On Air, we released a podcast fully dedicated to the 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 learned the hard way that it is extremely difficult to possess expert knowledge of Android, iOS, and React Native nuances in order to glue them together efficiently. That’s why we created the React Native Brownfield library to solve that challenge. It is a collection of our best practices and tools that we usually use when integrating React Native into our clients' existing infrastructure.
