Combining the best of two cross-platform frameworks to build the ultimate multiplatform development experience.
This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.
Combining the best of two cross-platform frameworks to build the ultimate multiplatform development experience.
This talk has been presented at React Day Berlin 2022, check out the latest edition of this React Conference.
Voice's application is designed for healthcare workers to speak freely into the app, which then transcribes the speech into text and creates structured medical records. These records are then synced into existing Electronic Healthcare Records systems.
Voice's application can run offline as all the speech recognition models are built to run on device, allowing healthcare facilities without full Wi-Fi coverage to effectively use the app.
Voice's application is developed using React Native for the UI components and utilizes custom native modules for handling specific native functionalities.
Native modules are crucial as they allow access to platform-specific functionalities that cannot be achieved with JavaScript alone. They enable the integration of native code for performance enhancements and accessing native APIs.
Kotlin Multiplatform Mobile allows developers to write Kotlin code that runs natively on both iOS and Android platforms. When used with React Native, KMM helps in writing platform-specific business logic in Kotlin while maintaining a common codebase, reducing the need for separate native codebases.
Kotlin Multiplatform reduces the need for writing platform-specific code multiple times, ensures interface consistency across platforms, and streamlines the native implementation process, significantly reducing boilerplate code.
Yes, Kotlin Multiplatform can be used for React Native projects to write shared business logic in Kotlin while allowing for platform-specific implementations, making it ideal for cross-platform mobile app development.
Voice integrates Kotlin Multiplatform with React Native by using a toolkit that automatically exposes Kotlin code as native modules in React Native, streamlining the development process and ensuring consistency across platforms.
We will discuss the combination of React Native and Kotlin Multiplatform to create a cross-platform setup for developing iOS and Android apps. Voice is a company that has built speech recognition for healthcare. Our app is powered by custom speech recognition and has already created over one million medical records. Native modules are important in React Native for accessing native functionality and communicating between native and JS code. However, few people write native modules due to the good ecosystem and library support in React Native, as well as the complexity of implementing them in both Android and iOS.
Okay, thank you for the nice introduction. As I said earlier, I'm Eric and with me is Leon and we want to talk about the combination of React Native and Kotlin Multiplatform to create the ultimate cross-platform setup for developing iOS and Android apps. So first let me start to introduce Voice a little bit. Voice is the company that's built speech recognition for healthcare. We have an application where healthcare workers can speak freely into our application. We transcribe the text and create structured medical records from the transcription. Then we are able to use an integration into the existing infrastructure and the facility to sync this record into the existing Electronic Healthcare Records systems. This is what we do, and you can see it in the GIF. And this way we already created over one million medical records and our app is powered by state-of-the-art custom speech recognition that we fine-tuned for the healthcare use case and all our models run on device, offline, so a facility does not have to have full Wi-Fi coverage to use our application.
We won't be here if this had nothing to do with React. Our application is built with React Native, so all the UI that you see here is built in React Native. We still use many native functionality to do some heavy lifting, and we will talk about this later. So who here in the audience has wrote an app in React Native? Oh nice. Cool. So, and who wrote a native module for React Native before? Yeah, still a few. Nice. Who has a big chunk of their code base in native? Okay. And who thinks about rewriting parts of their JS implementation in native? Okay, interesting. So we have three personas in this room. I think the first persona is the most represented one is people who have all or most of their code written in JS. They have only very little native code, maybe only the boilerplate that is needed for React And the kind of use of the shelf open source libraries that already did the work and wrapped native functionality into native modules so they are available in JavaScript. The other one probably not so represented here is people who have like their full stack app in Android and iOS, completely custom written and they have only very little JS code or even just thinking about introducing React Native to streamline some of their application to be cross platform. And the third person group maybe just mixes JS and native and uses whatever they need at the moment and what fits their needs the best.
So why are native modules so awesome and why we need them in React Native is the first one is the most obvious reason we want to access native functionality, we can't just do everything in JavaScript, you kind of have to have access to more platform specific stuff. And this is also what most React Native libraries do, they kind of just have an Android implementation for some functionality, iOS implementation, and then they kind of create a native module so they create a common interface for this native functionality and provide you with a JS interface to kind of just call it and you can consume this library from NPM. But there are also use cases like you have existing code like an Android and iOS and for example you have some state that is stored natively but you want to have UI that can show the state or update the state so you kind of have to create native modules to do the communication between the stuff in native and the stuff in JS. And also maybe the people who want to migrate parts of their stuff from JS to native they do it for performance reasons or to leverage concurrency that you have in native so just separate work from the JS thread. So but why do so few people actually write native modules? Probably the first one is that React Native has a really good ecosystem and there are well maintained libraries for most of the native functionalities that you would need so there's not so much of a case for writing native modules all the time because the library support is very good. But if you do need to write native modules it's pretty difficult because you need to with the Android tech stack, with the iOS tech stack and toolchain you need to for example you want to build a Bluetooth manager you have to implement it in iOS, in Swift, or Objective-C and you have to implement it in Android, Kotlin or Java. And then you also have to create these adapters, native modules, that kind of map data structures and arguments from native to JAS and also you need to kind of expose via event handling with a native module or kind of migrate exceptions or convert exceptions to promise rejections in your native module.
React Native projects face challenges with maintaining interfaces between native modules and keeping code bases in sync. Our team has encountered these issues and has developed over 20 custom native modules to facilitate communication between JS and native code. We need a better solution to avoid boilerplate code and improve the integration of native functionality in React Native projects. Leon will discuss the current status quo and potential improvements, including the use of Kotlin Multiplatform Mobile.
And you have so much boilerplate to just expose the functionality that you've just written in native. And also there's nothing inherent about native modules that keeps the interfaces in sync so you are fully responsible for keeping the interfaces Android, iOS, and JAS in sync so everything works together. And if you have an existing code basis in iOS and Android, it's pretty hard to use React Native in the first place because they maybe are maintained by different teams or in different repositories, and it's hard for those teams to kind of make an agreement on the interface native module that can then be used in a shared project which has React Native components.
So these issues lie at our heart because apart from the libraries that exist that have native modules in them, we also have over 20 custom native modules that we've written to do communication between JAS and native because we do our autoprocessing in native and we need to communicate data around it. We do all our model inference obviously in native managing model artifacts, downloading stuff, and doing background work in general. So this is why we need a solution for this. If you do so many native modules and expose so much native functionality, you need to have a better way than doing all this boilerplate and Leon will tell you more about the status quo and what we can do to improve.
So this is a typical React Native project setup. You have actually three sub projects for Android, iOS, and React, and each of these projects use their own language and own ecosystem and their own tools. So if you want to expose native code, you would have to write it twice for each native platform, and when you write React Native modules, the API to expose it is very low level and platform-dependent. So imagine you have to write 20 React Native modules to expose your native logic. There must be a better way to leverage native concurrency and native performance improvements in your React Native app.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments