How We Saved a Lot of Time on Developing Website and App for KeyForge

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.

React and React Native saved us a lot of time, and our client was happy with the result.

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.

» From a popular social media platform to a revolutionary authentication system. Check out our case studies and see outstanding digital products that we’ve built!

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.

Let’s start with Ionic. It’s a framework that crates so-called “hybrid” mobile applications, meaning that the whole application is a webview which is injected into the app. There is one significant drawback of hybrid apps and that is performance. It’s very easy to create an application that looks similar to native on both Android and iOS, however you won’t get native feeling or performance. With the release of Ionic 4 you can create applications based on any of the popular JavaScript web frameworks: Angular, Vue or React and therefore share the code with them. This is the simplest and the fastest way for web developers to create a mobile application and it might be a decent choice but only for small applications.

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.

Last, but definitely not least, is Flutter. This framework rushed into mobile development and won the hearts of many developers. If you haven’t heard of it, I advise you to read 6 Reasons Why You Should Try Flutter and I bet you will understand why people love it. Flutter uses language developed by Google called Dart, so you won’t be able to share logic with any JavaScript web framework. Nonetheless, there is a Dart version of Angular available which is straightforwardly called AngularDart but it’s far less popular that it’s JS analogues.

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.

We are a top development & design company in Europe. Check out what we can do for you, and let’s start a project together! See how we build excellent, successful mobile apps: