Let’s Try To Build My Locator in NativeScript-Vue!

Building a locator with Mapbox without JS framework had worked out pretty well in my last post. This time, I decided to try it with a JS framework. I have been working with React for a while, so I decided to use a new framework this time -Vue, to be precise.

Since I wanted the app to be used while a bicyclist may be on the road, I wanted the app to work well with mobile. React have React Native. How about Vue? Lo and behold, NativeScript! They even have a tutorial: Include Feature-Rich Maps in a NativeScript-Vue App with Mapbox.

Things I noticed on my first run of the tutorial:

  • NativeScript installation required pod setup, which took forever but didn’t displayed progress bar or related message. I thought the installation got stuck and was quite confused. In the end,  command pod setup –verbose showed me that it was indeed setting up and not getting stuck.
  • The command vue init nativescript-vue/vue-cli-template set a MIT open-source license by default. Nice feature – I usually don’t really think about license when I am building a side project, so this was a good reminder.
  • The vue/devtools package was behind in its electron dependency update, so I got a npm audit alert. When I checked their Github issues, it seemed they were aware of it but haven’t gotten around to fixing it yet.
  • Like pod setup,the npm install also took a while. I downed an entire cup of coffee, and it was still loading! I don’t work with mobile app development framework a lot. Was that normal?
  • Although the tutorial was made only this July, there seemed to be quite a bit of changes for the vue template. For one thing, I saw a hook directory – wasn’t hook only out this or last month? Some changes related to the tutorial content:
    • Directory “src” is now “app“.
    • HelloWorld.vue is now App.vue
    • npm run watch:ios is not working…
    • … the vue template “vue-cli-template” went through some major changes. The one used in the tutorial is now legacy. I should had changed the command for initiating the template to “vue init nativescript-vue/vue-cli-template#legacy <directory-name>” instead. In the new template, instead of npm run watch:ios, the command tns run ios  –bundle should be use instead.

Sadly, after tns run ios –bundle, it tried to run the iPhone emulator in my Macbook, and I was reminded of the main reason why I don’t do much mobile development. My emulator has always been ridiculously slow and would even freeze my Macbook sometimes.

There was tns build ios –bundle, which build and run the code in NativeScript’s iPhone app, but that one also took forever. In fact, it’s still bundling right now as I am writing this post – and I would have to build it every time I want to see changes in this case.

I really just want to learn Vue, but I had spent over a day trying to set up and troubleshoot NativeScript issues. The tns run, tns build, and the various package download and setup took a lot of time. NativeScript isn’t my goal – Vue and Mapbox is. So for my next step, I will take a step back and re-focus on building a web app with Vue.