React is one of the biggest JavaScript libraries for building user interfaces provided by Facebook and React-Native framework lets you to build native mobile apps which uses the same design as React library. One of the amazing fact 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% codes between React-Native(Mobile) and React(Web) because we are using React and JavaScript in both cases.
Sounds good, right?
So let’s understand the general parts which can’t be shared between React and React-Native.
- I think your guess now, Components can’t be shared inside of render method, because in render we return XML which is totally different in Web and Mobile, as you might know in the web we use HTML but in Mobile, it’s not possible to use HTML tags.
- I will not emphasis on saying that it’s not possible, like the first case, if you want, you can do it but there is no point of doing it, it’s Style part, as you might know in React-Native we use Styles like CSS but with little differences. Also, you will have more screen differences in Mobile and Web which will interrupt you. Also in this point, you need to copy CSS code and modify the code in order to use it in React-Native, because in 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.
So which parts can be shared between React and React-Native?As we want to have the same JS code in both of 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 and etc.As we use React in Web and Mobile, our project structures can be fully similar to each other, but it’s not effective to write i.e. a helper function in a project and then copy past in the other project.
Hmm, how to find a solution for this point?
One of the good ways to choose is to have another repository which will be called SDK and there will be stored all code which will be shared between that projects, and in projects, you will have a vendor folder where you will have your 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 am going to show some ways to create SDK, and how to use it to have more effective, reusable and clean code. In my examples, you can have a look at the small concept of SDK and understand how to build and use it. So I will not jump into this deeply, let’s have a look at examples.
Http calls and Sockets
If you have HTTP calls, you don’t need to use fetch in each project and then parse the response to check for errors and etc. Instead you can make an SDK for HTTP calls which will do that entire functionality and return the result or will throw an error. you should implement the flow in such a way that the user won’t know what is going under the hood, HTTP or something else, so one should not meet HTTP specific things such as headers, status code and etc. For example, it should be clear for the user that getAllNews(input) function will return data or throw an error, and the user should not use low-level HTTP requests.
SDK is popular in online games which used i.e. Socket, because the game flow is more realistic than Http calls, and SDK will more effective because you don’t know what happens under the hood, here is an example how it will work.
As you can see this code is very readable and you can easily understand what is happening, but under the hood, it is doing many things.At first, it can connect new socket and add few listeners, after that using socket it can create room and wait for the response from the server, after that you request to join a room, which also does a few works under the hood. You can create multiple players which will connect with multiple sockets.
Also, you can create SDK using singleton pattern which always will have the same state, so it depends on the business logic of your application.
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 a good way to copy paste the code?
Having our own small validation framework is a good idea.In SDK you can take JSON which contain all data from forms and rule names, and then you can specify and validate data using that rule names and generate an error message. Here you just need to create validation rules(functions) for every case.
Redux
_How much of the code in your project is written in redux?_In my opinion about 20–30% of the code is written in redux because state managing is used more, so it’s a great idea to start thinking how to share state managing code between projects.
Actually, some parts are not really like SDK, because we just storing code for reusability, but we can implement it and use like an SDK.(in my opinion, it is enough to store all logic from the action). You can have just very similar actions and reducers in both platforms which will help to switch from a platform to another and build something.
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 SDK’s for games which will be used by Web/Mobile teams. After that when I started working on different projects (not only games) with React and React-Native I understood that we can implement SDK here also, and I suggest to have an SDK for projects.
The question “which parts of the code can be covered by SDK” is very difficult 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 to start building your own SDK for the project. As I mentioned earlier(in Redux part) using SDK also helps to switch from a platform/project to another because codes are very similarly together and you can easily understand.
Thank you for reading this article, feel free to ask any questions or tweet me @nairhar.