2 Mobile Apps 1 Store

Our problem
Our project specifications had tasked us to create the three components that make up a modern application. The web app, the mobile app and the backend.

The web app needed to provide a way to use the application comfortably in a desktop and web environment, while the mobile app needed to provide a native experience with the same amount of comfort on a mobile device. We needed the overall functionality of both applications to be equivalent. This tasked the backend with providing a platform agnostic API that could meet the needs of both front-ends.

Our goals
So with the requirements set, we set our goals for the project. We wanted to build the project using a modern stack, we wanted it to be scalable and we wanted it to be maintainable.

Our choices
Our team has grown very comfortable with developing web apps using Vue.js so it was our prime candidate for this project. It’s progressive, modern and backed by a very strong community. With that decided we moved on to exploring our options for developing the mobile app.

Maintainability in mind, we wanted to build a cross-platform mobile app that could use one codebase for iOS and Android with the potential of sharing some code with the web app. NativeScript-Vue seemed to be exactly what we were looking for. It would not only enable us to write the mobile app using JavaScript, but also allow us to create both of the front-end applications using identical code for state management.

Since both front-ends were using Vue under the hood, we could create one store using Vue’s go to state management solution Vuex. Within the store we could create modules to handle the various sections of state and provide a universal definition of actions that both the web app and the mobile app would use to interface with the backend.

The allowed the store to do some heavy lifting. This included things like, handling web requests, organizing client side data and managing login tokens.

Our results
We successfully created a pair of applications that run in very different environments but are brought together by a common store. This resulted in each application’s codebase being leaner and more concise. They could really focus on the user interface rather than having to manage web requests and data operations at the same time.

The store contains all the functionality that would have otherwise had to been implemented twice. It goes from fetching the data to storing the data and all the up to filtering that data via queries provided by the front end.

Two apps were created to meet the needs of their specific platforms, with little code duplication thanks to the store they share. With this architecture the apps feel maintainable and little fear is spawned when new features need to be implemented.