Sharing codebase between React and React Native
--
React is one of the most extensive JavaScript libraries for building user interfaces provided by Facebook. The React-Native framework lets you build native mobile apps with the same design as React library. One of the remarkable facts about React-Native is that it's not only about building Native IOS/Android apps, but we can also build web applications using the same code and share more than 50% of codes between React-Native(Mobile) and React(Web) because we use React and JavaScript in both cases.
Sounds good, right?
So let's understand the general parts we can't share between React and React-Native.
- I think you already guessed this. We can't share components between Mobile and Web. As you might know, on the web platform, we use HTML. We can't share it between those two platforms since Mobile doesn't support HTML. Well, there are some tricks to do it (i.e. react-native-web), but in any way, you can't say that we are sharing the same code between two platforms since we are just adding a layer to handle it.
- I will not emphasise saying that it's not possible. Like the first case, if you want, you can do it, but it is not worth doing its Style part. As you might know, in React-Native, we use Styles like CSS but with few differences. Also, you will have more screen differences on Mobile and Web, which will interrupt you. Also, at this point, you need to copy the CSS code and modify it to use it in React-Native, because React-Native Style is not pure CSS. It's JS but uses CSS keywords and values in the object.
Here is a small style example in React and React-Native
But our goal is to share code 100% exactly as it is.
Let's see which parts can be shared between React and React-Native?
As we want to have the same JS code on both sides, we need to understand how we can do it and how to structure our projects which will be similar to each other and can be shared.
We can easily share HTTP requests, Sockets, validations, helpers, wrappers, etc.
As we use React in Web and Mobile, our project structures can be entirely similar to each other, but it's not practical to write, i.e. a helper function in a project and then copy-paste it into the other project.
Hmm, how to find a solution for this point?
One of the good ways to do it is by creating an SDK. Everything that we want to share between the platforms will be stored there. We will have a vendor folder inside the projects to keep the shared code: SDK.
SDK
A SDK provides a set of tools, libraries, relevant documentation, code samples and processes or guides that allow developers to create software applications on a specific platform.
I will show some ways to create SDK and use it to create effective, reusable, clean code. In my examples, you will get the basic concepts of working with SDK and understand how to build and use it.
Let's have a look at these examples.
HTTP calls and Sockets
If you have HTTP calls, you don't need to use the fetch method in each project and then parse the response to check for errors, etc. Instead, you can make an SDK for HTTP calls which will do all the necessary processes and return the result. It would be best to implement a flow, so the user won't know what is going under the hood. It can be done by HTTP or by something else, so no one should not meet HTTP-specific things such as headers, status codes, etc. For example, the user of the getAllNews() function shouldn't work with HTTP requests. Instead, he should expect a result or error.
And in the same way, we should encapsulate all the internal processes that the other developer shouldn't work with. In this second example, it can be a Socket connection.
As you can see, this code is very readable, and you can easily understand what is happening, but under the hood, it can do many things.
At first, it can open a new socket connection and add a few listeners.
After that, using the socket connection, it can send and receive messages, etc.
You can create an SDK using a singleton pattern which always will have the same state. It depends on the business logic of your application, so you need to understand how the SDK would work.
Validations
Imagine in your business logic you need to create SignIn/SignUp pages in Web and Mobile, so here you need to validate form fields. Is it necessary to have two validation functions in two different projects, or is it an excellent way to copy-paste the code?
Having our small validation framework is a good idea.
In SDK, you can take JSON, which contains all data from forms and rule names, and then you can specify and validate data using that rule names and generate an error message. You need to create validation rules(functions) for every case.
Redux
How much of the code in your project is written in redux?
I think about 20–30% of the code in projects is written for redux-related processes because state managing is used a lot. So it's a great idea to start thinking about how to share that part of the code between projects.
It is enough to store the logic from the redux actions. Most likely, you will have similar actions and reducers on both platforms.
Summary
When I was working on my first online multiplayer game project, I heard about the SDK, and for the first time, I started to build SDKs for games that Web/Mobile teams will use. After that, when I started working on different projects with React and React-Native, I understood that we can also use the same approach here, and I suggest having an SDK for projects.
The question "which parts of the code can be shared by SDK" is challenging to answer because it also depends on project business logic and requirements.
I have created SDK for a few projects, so I can suggest you start working with this approach in your projects. As I mentioned earlier, using SDK also helps to switch from one platform/project to another because codes are very similar, and you can easily understand them.
Thank you, feel free to ask any questions or tweet me @nairihar
Also follow my “JavaScript Universe” newsletter on Telegram: @javascript
