LaunchedMotionShot- Make informative screen guides for your products, tools, and SOPs!
Published on

How I built an Android app with Vue

Authors
How I built an Android app with Vue

Once I had an idea for which I needed an android application. As the team was just two, one myself, another designer; Venkat, we needed the quickest way to build it. I was very comfortable in building javascript frontend applications. So, I built the whole frontend in Vue which almost looks like a native application. I felt sharing the experience with people would be a useful idea. It is the process and experience than giving a solution

I don’t go deep inside code. I just want to share the process and experience :)

Here we go!

Initially, we did not have any intention of having an android app but just a web app that is optimized for mobile devices too. As we progressed we figured out to be there on the android store which gives that credibility and rating system. So broadly these were our requirements

  1. We need an android application
  2. It should support all maps, push notifications, GPS, local storage, etc
  3. It should be quicker to build and reiterate
  4. It should look decent in terms of designs and experience

Venkat had already started giving me screens and designs. So I had to take a quick decision with the above needs.

I am not so proficient with the android framework and I cannot hire one, I am good at building javascript applications. Initially, I thought I would go with React Native which is very familiar to me. I did not do it because I wanted the same app to be usable on the web too. We can do it with RN too using some other tools, but I wanted something simple and straight forward. I was already watching Vue closely and thought let's give it a try. The remaining piece is how can I build a web app which looks almost like an android app and how can I make an apk out of it?

SimplSub sample screen

For the first part of my 2 questions, build a web app that looks almost like an android app, I needed some Vue framework which provides me features like screens, nav bars, basic animations, etc. Unfortunately I did not find any such and thought I will build all that required myself.

For the latter question, make an apk out of it, the very first thought I get is to just an apk, which just loads a URL(webview) in full-screen mode. I just searched online for such tools, fortunately, I found one and just downloaded my apk which loads custom URL like [https://simplsub.com/mobile]

The immediate problem I faced in the process of building the app is to have the standard structure of the app, ex: navbar, bottom stack bar, ripple effects, swipes, etc.

Fortunately, in the current generation of mobile devices, these things pretty possible to implement in javascript. So, I started listing the generic UI components I need, the central state to maintain the pages and interactions, etc. I don’t go deep into the code but I will show the list of generic components I created.

SimplSub file structure 1
SimplSub file structure 2

Some native Android

In the first phase of development, the simple apk which I downloaded from online just worked fine. I already knew that it is not sufficient for production. I asked one of my friends, Purushottam, an android developer, to help me in some help.

The first thing he did is to just a basic app with one screen, one full-screen webview. That was cool, we wanted more and added too. Splash screen, the webview loading screen, etc.

Next, we wanted push notification support. Initially, I tried web push notifications but instantly understood that it is not reliable. So we wanted more.

Gradually I understood that there should be an interaction between android and the web. Fortunately, it is possible! We implemented the application in such a way that the web app interacts with native android. For example, if the web app wants to take a pic, it just asks the native android(Java/Kotlin). Purushottam has written very minimal logic for a few things that we want in Kotlin like handling a camera, getting GPS location, accessing the file system, receiving push notifications, etc. With this, the final app shaped exactly the same way we wanted. All happiest for now!

SimplSub sample screen video

Positives

  1. Quick for MVP. I strongly suggest this method for MVPs. Most people are familiar with javascript than the android framework. So, just go for it
  2. Web covered. Though we are mobile-first, with very little CSS work, the same app works for the web too! Half time saved, less code to maintain!
  3. Native power too. You are not limited to just web features. You can do all that native app can do if you want!
  4. Always upgradable. At some point in the future, if you want to just completely move to native android, it is very much possible.

Few negatives

So far so good. We got what we wanted. But we faced a few issues too. Some of them are

  1. Poor web + native android versioning. Let's say you implemented some feature in native android which web calls and you released it in version 10. When you release the web, because it is just global, it will get reflected even on old versions of the app even when they don't update it from the play store. Because of this, the web might try to call something which is not available in native android. We can fix this for sure, but more maintenance :(
  2. Less powerful. If your application needs heavy performance, sure this way of app building is not scalable

Summary

I am the kind of person who does what is required. I don’t start with keeping Google in mind in terms of scalability or the user base, but make sure it is upgradable. This method has just worked for me, and I am happy that I followed this way. Even at some point, if I want to move it to native completely, I am all good to go.

PS: We release this product, had some customers but after some 4 months it turned out that we need more resources in marketing. So currently it is inactive operationally