NavBox - Change of plansJuly 31, 2015
When I’ve earlier been into cross-platform JS app development I’ve mainly been trying cloud-based solutions like Monaca as well as I’ve been checking out the possibilites of Chrome apps. Though there are some downsides with using a cloud development platform like Monaca. If you don’t pay for their services you can’t use their command line tools which means that you’re quite limited if you want to use more advanced development methods involving different preprocessors etc. That’s the reason why I’ve chosen to go for a barebone Cordova approach this time.
There are a few reasons to use Vue over Angular, although they might not apply for everyone:
Vue.js is a more flexible, less opinionated solution. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. It gives you bigger room to mix and match with other libraries, but you are also responsible for making more architectural decisions. For example, Vue.js’ core doesn’t come with routing or ajax functionalities by default, and usually assumes you are building the application using an external module bundler. This is probably the most important distinction.
Vue.js is much simpler than Angular, both in terms of API and design. You can learn almost everything about it really fast and get productive.
Vue.js has better performance because it doesn’t use dirty checking. Angular gets slow when there are a lot of watchers, because every time anything in the scope changes, all these watchers need to be re-evaluated again. Vue.js doesn’t suffer from this because it uses a transparent dependency-tracking observing system – all changes trigger independently unless they have explicit dependency relationships.
Vue.js has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while Components stand for a self-contained unit that has its own view and data logic. In Angular there’s a lot of confusion between the two.
Though of course we are all entitled to our own opinions and just because I really like Vue.js does not mean that you necessarily share my view. For smaller projects like this I personally don’t really see why I should chose a framework like Angular over Vue.js though. I’m by the way going for a modular approach with Vue.js. Using the component system in the framework together with Webpack I can easily separate the different parts of the interface into separate module files. Currently I’m only using one file for each module with the following structure:
Though if needed it’s of course possible split it up in even smaller parts and writing the style and template code in separate files.
To give myself some basic tools for creating the UI I’ve chosen to use the Pure framework. It’s also very lightweight and contains an easy to use grid system for rapid UI prototyping. As this will, at least for now, only be a product that I’ll be using for myself I don’t actually care that much about the UI. It of course needs all the functionality I want but the esthetics aren’t too important to me.
Today I’ve put together a basic UI idea for one of the three main “views” of the application. In this view I will get details about the USV:s position, speed, heading etc. It also contains a small Leaflet map where the vehicle’s position will be displayed as well as the waypoints. Though all the actual data and numbers you see on the image below are just placeholders and there’s very little logic implemented so far.
The “Manual Control” view that will be added later will probably contain some controls for sending commands to the vessel. For example to cancel the navigation and make the vehicle drive home or adjusting speed etc. The “Waypoints” view will feature a much bigger map as well as a toolbar for adding/editing and deleting waypoints. Though before I implement those two views I will try to make sure that the communication between the Android device and the PSoC board is working so that I can get some real data for the info view.
I haven’t implemented any routing functionality yet neither. Currently Vue.js does not have any built-in router. Though there is one that’s under development and not fully released yet. An other possibility is to use a stand-alone routing library like Page.js or Director. I’ve not decided for sure how I’ll solve this, I might perhaps first try the vue-router and see if I can get it to work. If not I’ll probably go for a stand-alone routing lib.