After a two-year long transition from native to React Native for their iOS and Android apps, Khan Academy engineer Bryan Clark offered their view on the pros and cons of this decision.
Khan Academy began its journey to embrace React Native in 2017 as an experiment aimed to reduce the inherent cost of maintaining two independent code bases for two apps that were very similar in design, features, and content.
Besides the duplication of engineering effort, different code bases meant more complex interaction and communication among developers when adding new features or changing existing ones. Additionally, the different architectural choices dictated by the two underlying SDKs, tended to add up and made it ever more complex to keep the two apps in sync feature-wise.
As in Walmart's React Native migration story, Khan Academy opted for a progressive transition where selected features of the two existing native apps were reimplemented using React Native. For example, Khan engineers started with the Search tab and created a bridge around it so it could coexist and exchange data with native components, which included networking, business logic, etc. One of their initial steps was moving their iOS and Android code bases to a monorepo, with the aim to make it easier to develop the JS-native bridge, which was common to both platforms.
This phase lasted over one year and was quite hard, according to Clark because engineers had to constantly juggle with two different tech stacks. When they could finally move their content database to JavaScript, they could begin to get rid of existing native code, until reaching a point where their app is now almost fully React Native.
As in Walmart's case, the key decision to enable this progressive approach was using React Native for content screens and native navigation to move between native views or activities and React Native screens. Khan engineers developed their own bridge and did not attempt to use Electrode native, the bridge that was developed at Walmart to streamline the integration of React Native components into an existing native app.
In Clark's view, there are a number of advantages brought by React Native. For example, he says, the UI framework feels much more coherent than UIKit:
The code you write for a
UICollectionViewis different than aUITableViewis different than aUIStackView, for example — but in React Native, you kinda just… don’t have to worry about it.
Clark also mentions Visual Studio Code as a big help to productivity thanks to its collection of linters and auto-fixers, which help enforce a common programming style across the team.
On a completely different note, moving to common JS-based code bases also simplified internationalization and localization, which made it possible for Khan Academy app to go from six supported locales to nineteen with little effort.
Overall, says Clark, React Native is an effective tool that makes it possible for programmers that do no specialize in either mobile platforms to create compelling mobile apps.
Do not miss Clark's article if you are interested in getting the full detail of Khan Academy journey with React Native.