Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
How to Share Code between React Web App and React Native Mobile App in Monorepo
Video Summary and Transcription
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.
1. Introduction to CodeShare and NX
Welcome to my presentation on how to share code between React web and React native mobile apps. I'll guide you through my journey of building both web and mobile apps using CodeShare. I'll explain the challenges of using different tech stacks and how I achieve feature parity using Monorepo with NX. Let's start with a quick demo by creating an NX workspace named Rack Summit with the React app named Web.
Hello, everyone. Welcome to my presentation. My topic is how to share code between React web and the React native mobile apps.
First, let me introduce myself. My name is Emily. I am a developer in Toronto. And I currently work for a company called Narwhal IO. I like hiking, biking, kayaking and all of the outdoor activities. I'm going to run a half marathon in October this year. So, I am preparing for that almost every weekend. Also, I used to be a native iOS developer but that was super, super long ago. Fortunately, I tend to be a web developer.
This presentation will take you through my journey on how to build both web and a mobile app and utilize CodeShare. A problem I try to solve is I got this awesome idea. Not only I want to create a web app, but I also want to create a mobile version for the app. However, users expect different experiences from web and mobile. Of course, I am not going to use native iOS and Android approach because that will require too many tech stack. Naturally, I chose Rack and Rack Native as my tech stack. However, here are still some challenges presented. Rack and Rack Native are still two different tech stack, the UI code are completely different. Rack Native uses native component instead of using web component as its building block. However, I still want to achieve feature parity, meaning I want a mobile and web app to have the same features and share the same business logic. The solution for this is definitely Monorepo. But which one? The solution I came up with, not surprisingly, is NX. What is NX? NX is a powerful Monorepo tool that will set up Rack and Rack Native apps for you out of the box. Let's do a quick demo. First let's create an NX workspace. In terminal, enter NPX create new workspace. For this example, I'm going to name the workspace Rack Summit. I'll use React as the default plugin and name the app as Web.
2. Sharing Non-UI Code with Shared Libraries
After installing the necessary packages and generating the mobile app, I explored the project's dependency graph. I then created a shared library called 'constants' and imported it into both the web and mobile apps. By sharing non-UI related code, such as business logic and state management, we can achieve feature parity and avoid duplicating code. This setup allows the apps to focus on UI code while keeping non-UI code in separate libraries. For more details, please refer to my blog post.
Then after everything got installed, let me go inside this workspace folder and install Now or Rack Native package. Then enter command to generate a Rack Native app. I'll name this app as mobile.
If I open the Rack Summit workspace folder, on the apps, there are currently four folders. It has the web app and mobile app I just created and E2E folders. If I enter nx serve web, you will serve up the default Rack web app. Meanwhile to run the mobile app. In terminal, I enter the command nx run os. In a different terminal, I enter nx run android. You will serve up the ios and android apps in simulator respectively.
Now let's look at the dependency graph. In terminal, enter nx graph. Enter nx graph. I should see the dependency graph of this project. Notice there's nothing shared between web and mobile apps.
Then let's create a shared library. In terminal, enter the command nx generate live. For this example, I'm going to call this library constants. Under the lab's folder, I should now see a constants folder got created. Inside index.ts file, I'm going to create a constant variable called title.
Then let me go to the web app folder. First, I'm going to import the title variable from the constant library. After that, I'm going to pass the title constants to the title prop. If I launch the web app again, I should notice that title got changed. Same goes for the mobile app. I should also be able to import from the shared library and change the title to be from this library.
If I open up the dependency graph again, I should see that both mobile and web import from this constants library. Sharing a constant variable does not seem to be that useful. However, imagine what could be shared or the non-UI related code could be shared. For example, business logic and state management. This way ensure feature parity that for same features, developers don't need to implement same logic twice. It could exist only once inside a shared library.
Essentially, with help from Next, the project setup would look like this. For the apps, you only contain UI code. For the non-UI related code, we could create libraries for those. For more information, you could check out my blog post linked on the bottom of the page. The end.
Check out more articles and videos
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Workshops on related topic
Tests rely on many conditions and are considered to be slow and flaky. On the other hand - end-to-end tests can give the greatest confidence that your app is working. And if done right - can become an amazing tool for boosting developer velocity.
Detox is a gray-box end-to-end testing framework for mobile apps. Developed by Wix to solve the problem of slowness and flakiness and used by React Native itself as its E2E testing tool.
Join me on this workshop to learn how to make your mobile end-to-end tests with Detox rock.
Prerequisites- iOS/Android: MacOS Catalina or newer- Android only: Linux- Install before the workshop
In this three-hour workshop we’ll address these questions by discussing how to integrate Detox into your development workflow. You’ll walk away with the skills and information you need to make Detox testing a natural and productive part of day-to-day development.
Table of contents:
- Deciding what to test with Detox vs React Native Testing Library vs manual testing- Setting up a fake API layer for testing- Getting Detox running on CI on GitHub Actions for free- Deciding how much of your app to test with Detox: a sliding scale- Fitting Detox into you local development workflow
Prerequisites
- Familiarity with building applications with React Native- Basic experience with Detox- Machine setup: a working React Native CLI development environment including either Xcode or Android Studio
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more