Reduce time-to-market, development cost, and move faster with features by implementing React Native with the Brownfield approach.
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.
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.
What is brownfield and where does it come from?
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 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 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.
<p-bg-col>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.<p-bg-col>
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:
Revenue-generating continuity while upgrading the existing app. 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.
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.
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.