The emergence of cross-platform app frameworks allowed to significantly speed up the creation of mobile apps. But can we move beyond mobile platforms and share code with the web? The answer is yes! Even, or especially, when handling such demanding projects as the official app of the hottest card game of the year!
KeyForge: Call of the Archons is a new card game coming from the creator of Magic: the Gathering. With the Master Vault app that we developed for mobile and web, users can quickly scan their cards, add notes, or track their stats.
When taking this project, we knew that the game would develop dynamically, with new features and patches introduced to over 100,000 users on a regular basis. That’s why we were looking for a stack of technologies that would provide a fast speed of development while maintaining a high quality of the end-product. Since applications have similar functionality: showing the content received from the server, we came up with an idea to share as much code as possible between mobile and web applications.
Using React for the website and React Native for the mobile app was an excellent solution for accomplishing those tasks – we significantly cut the cost of development.
Sharing Code: The Benefits Are Huge
First of all I would like to point out that there are a lot of advantages in code sharing. The obvious benefit of this approach is that we implement logic only once and share it across both web and mobile. Furthermore, it leads to easier bug tracking, fewer errors and more convenient code maintaining.
Organizing our code, we took the monorepo approach. Meaning that multiple project, in our case backend, website and mobile app are kept in the single repository. Personally, I found that working with monorepo is so much easier than having multiple repositories for different parts of the project. Besides that, code reviews are more convenient as only single PR is required to rollout new feature to multiple platforms.
Sharing Code Dos and Don’ts
Ok, so what should we do to make code-sharing worth it? It’s essential to establish tight communication between team members to maintain quality of the repository and follow the same branching model. We decided to stick to the gitflow branching strategy since it isolates finished work from new thus making parallel development very efficient.
Testing, testing and once again testing! I used to think that it’s an unnecessary part of software development, and it might be true when you have a tiny project not in need for constant maintenance. Apart from that, I strongly encourage you to cover your code with tests, especially the shared one. I’ve already lost count how many times writing tests revealed a small bug in the code, saving hours of work.
Which parts of the code should be shared between the platforms? I have to say that there is no strict rule on that. Developing applications for KeyForge with the help of redux we have managed to gather all communication with the backend, normalizing responses and most of the business logic in the shared layer. Apart from that, we shared configuration of the project, constants, translations, API endpoint, data types, environment variables and utilities.
We implement logic only once and share it across web and mobile – it leads to easier bug tracking, fewer errors and convenient code maintaining
What about UI code? I’d advise not to share UI related code between platforms. First of all, we simply can’t use the same component in React and React Native because of the difference in render environments. There are some packages that attempt to solve this problem however neither of them are well maintained nor works efficiently. Secondly, I believe that web and mobile should have different UI for better user experience.
React is Not Your Thing? There Are Alternatives
React with React Native provides great potential for code sharing yet it’s not the only pair of frameworks that allow that.
The next option is to use NativeScript for mobile development with Angular or Vue for web.
As you may guess from the title, NativeScript, like React Native, is created for developing truly native mobile application. It loses a bit in performance to its competitor, but in spite of this I would say that using NativeScript with Angular or Vue is a great option if you are not familiar with React ecosystem or don’t like it.
Code Sharing: You Won’t Regret It
Code sharing is an awesome technique that significantly speeds up the development and makes maintenance of the applications more convenient. I can’t even imagine how much more time we’d spend on KeyForge, if it wasn’t for code sharing. I strongly advise you to consider sharing code between web and mobile – you won’t regret it. Surely, this adds an extra layer of complexity, but it saves much more time than takes for setting up. Nowadays, there are a lot of stacks of technologies that allows code sharing and you are not limited only by React ecosystem, though in my opinion at the moment it’s the best option.
And remember: sharing code itself is an easy task, however doing it efficiently may be quite challenging. If you are planning to share code between platforms, I advise you to take all the needed time to plan the architecture of the project before rushing to write code.