CBH React Native rewrite

Two birds, one stone.

CBH Group is a leader in many areas, and have become increasingly tech-savvy. Back in 2017 they began introducing mobile applications to their grain handling operations at over 100 remote sites. Since then, they’ve integrated a suite of apps covering processing of receivals (CDF), movements (Rover), and outturns (Domestics). The result has been myriad improvements in efficiency, and along the way some record breaking tonnages.

But the promise of technology can also be a burden. Frameworks evolve as innovation finds a better way to solve an old problem, and keeping up with those changes can be a dead loss. Of course, it’s easy to be converted to a better way of doing things when it saves time or money. That’s why CBH decided to rebuild their CDF app with React Native.

React Native ready for prime time

In the last few years, React Native has solidified its place as a popular, production-hardened solution for app development. It is a cross-platform framework, which means it allows developers to code user interface elements and business logic that run on both iOS and Android, while retaining the ability to integrate custom native components when necessary. When targeting both iOS and Android, React Native can cut development time, support and maintenance, in half. While there are other cross-platform framework options out there, CBH’s IT Architecture team settled on React Native as the best framework to achieve their Mobile Strategy. 

During the project, we discovered React Native brought benefits both immediate and ongoing. For CBH, two apps built with React Native in their suite of three provided an additional opportunity to leverage a shared codebase. We found by consolidating into a shared library some aspects shared by those apps — the menu and feature set, particular UI elements and page templates, and a set of core business rules — we could further cut development costs by 25%. Care was taken to keep the sharing approach low-impact: we recommended only the least risky components be moved to the shared codebase, in order to retain flexibility and minimise tight coupling between the apps.

At the end of the day, it’s the delivered product that matters. Adapptor has completed several React Native projects, and we like the native feel and performance of the resulting apps. But businesses also benefit from reduced time and cost due to:

  • Savings on initial development and the cost of future enhancements

  • A simpler codebase, feature-parity between platforms, and fewer bugs

  • Reduced support costs where bug fixing can be done once, not twice

  • Consistency between iOS and Android UX resulting in fewer cosmetic tweaks

  • Cheaper developer onboarding due to React Native’s use of languages and paradigms common to web development

As developers, we also appreciate the rapid iteration React Native enables. It handles much of the complex native app plumbing that is time-consuming to write by hand, but the key is its debug environment: most code changes can be tested without recompilation. Tedious jobs like style tweaks shrink from hours to minutes. But this speed doesn’t preclude deep native integration. Developers can still include any native SDK from each platform’s ecosystem, or write custom native modules. CDF leverages custom native Bluetooth beacon tracking algorithms to detect truck locations on site; automatic Wi-Fi network detection and connection to supplement user mobile telephony with CBH infrastructure; and custom geofence tracking logic for accurately tracking truck arrivals at site.

A crucial aspect of CDF is its bespoke workflow. It encodes a complex state machine, and happily React Native apps excel at managing state reliably and predictably, so that it can be reasoned about. We used a stack consisting of Typescript, Redux and RxJS. Using an immutable, state-based flow to manage the complex business rules of CDF allowed us to develop with confidence. In addition, it meant we could focus all unit testing efforts on one codebase. When you are developing for iOS and Android in parallel, the overheads of building a solid testing framework for business logic are large, and normally necessitate trade-offs if you are to deliver your product on time. When using one codebase in combination with modern tooling, the return on investment for automated testing is much higher.

The time saved on development and quality assurance was put back into the app in the form of new features, which made it to release in time for the 2020 harvest. As harvest starts to wrap up for CBH, they’ve advised us that growers have achieved the highest participation rate to date with 96% of tonnes received via the app (up 5% from last year) with really positive feedback on the app improvements and new features.

Mobile App Rewrite