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.
This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.
The main challenge is creating apps that cater to different user experiences expected from web and mobile platforms, while managing to share the same business logic and features across both.
Emily chose Rack and Rack Native because using a native iOS and Android approach would require managing too many different technologies, whereas Rack and Rack Native allow for a more unified approach.
Emily found that using a Monorepo setup with NX is an effective solution for sharing code between React web and React Native mobile apps, allowing for shared business logic and feature parity.
Emily uses NX to create a workspace, sets up applications for both web and mobile, and manages dependencies. She also utilizes NX to create shared libraries that both applications can use, ensuring code reusability.
The first step to set up an NX workspace is to enter the command 'NPX create new workspace' in the terminal, followed by naming the workspace and selecting React as the default plugin.
In Emily's NX project, shared libraries are created to hold common code, such as constants or business logic, that can be accessed by both the web and mobile apps. This helps in maintaining consistency and reducing redundancy in codebase.
Emily gives an example of creating a shared library named 'constants', where she stores a constant variable 'title'. Both the web and mobile apps import this title from the shared library, demonstrating how shared code can be effectively utilized.
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.
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.
Comments