Planning & Setup for Frontend of Vue-Based Side Project, Orange Wheel

Time to continue on building my new side project, Orange Wheel! As mentioned in my last post, I have decided to go with plain Vue – no NativeScript or other mobile framework – and Python-based web scraper. Once I start setting up, there are several decision planning that I must do. Here are some of them:

Templates: Selecting a good Vue templates sets a good foundation and makes life easier for beginners. After some searches, I decided to go with one that use the PWA template. Their features can be read on their Github repos, but most are related to the fact that it was designed for a PWA site – read the Google developer docs on PWA here if you are not familiar with the term!

Unit Testing: The PWA template do actually have a possible built-in testing upon installation, which uses PhantomJS with Karma, Mocha, and karma-webpack. However, I have made a decision to use Jest prior to template selection, so I will give that a try and see what happens first.

Directory Structure: At first I just started with all the node modules and npm stuff in root directory like I usually do, but then while setting up, I realize that since I have Python as backend, I really should separate frontend and backend. Right now, in the root directory, there is are files (README and .gitignore) and 2 directories (frontend and backend). Hmm, I somehow lost .git while restructuring, so I will have to link the directory back to my Github repo later.

Icons: Dear god is there many icon images in the PWA template! I actually deleted it at first, not realizing that it was needed for a better PWA experience. I have to re-download them later (new lesson of the day: one can download a directory in Github with command svn export [Github link with “tree/master ” replaced by “trunk”] – well, as long svn is installed in the system in the first place anyway). However, I have to replace the default Vue icons with actual project-relevant icons eventually. So… I have to create an icon, export it in various file format and size? Work this inconvenient yet repetitive have to have a web tool. Let’s google… yep, a simple google search on PWA icons displays a bunch of web tool for this exact purpose. I am cover.

Well, that’s it for now. I still have to do the actual set up of Jest and icon creation. I also have to update my changes to my Github repo. After that, I will set up the backend.

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.