Desktop like app with node-webkit

What I wanted to build?

I wanted to create a desktop-like app but with html/css/js. What a desktop app means? Well, programs which are written in platforms or languages like access or in visual basic and they are basic apps with CRUD and basic calculations/store/data handling. It won't connect to the internet through a web server and they will have a local database-like.

Why the heck do you want to build something like this?

Well, in the past I went in the army (it is mandatory for all men in Greece), I had a computer but I didn't have internet (for... security reasons... ). They wanted me to build a desktop app for managing their warehouse (a basic CRUD app which I could do it on rails in a week, even though it was a bit complicated). What was my options? I am mainly a web developer, I could try learning and do it on C#, but I think I will be much slower. I finally did it with a wamp (yes php, the computer had windows so I couldn't do any better with rails) and it took me about 3 months. The other disadvantages was that it wasn't easy for a noob to take my application and transfer it to another pc. So all these years, I was thinking how I could have done any better, and finally I think I found a solution! (even though back then, there wasn't all these nice tools we now have).

Tools

There are many tools and solutions that you can achieve the above like the tideSDK, phonegap, node-webkit (send me if you know any other). I am planning to test all of them, today I've used node-webkit and I really like it.

What is node-webkit?

Node-webkit as I understand it, is a nice way to wrap a chrome and a server-like app which you can use for making your applications run. You don't need the server-side logic and they say that you can use any node_modules, but for my experiment I didn't need it. For my experiment, I just wanted my super simple angular app to run under an http:// protocol instead of the file:// protocol (which raises many restrictions problem, for example I couldn't use angular partials because chrome was recognized them as a cross-origin request due to file protocol). I've created a simple express app but for what I've found from node-webkit documentation, it is preferably not to use the routing of the express.

My code and how it works

So what I've done? I've created a really basic angular app, I've created a .bat file (the run.bat, I wanted a desktop app for windows, remember?) and I've also included all the necessary files for running it on windows. There are specific ways to run an html/css/js app in the other OSes as well. On windows, there are some dlls and some files that you just include them (check their repository and if you are interested for other OSes, check their guides). So for my experiment, I've wrote inside the bat file a basic dos command to run the nw.exe with the index.html as a parameter. When you double click it, it just serves my angular app correctly. Check the repository.
Ok but where is the database? Well, there are three solutions for having a database-like features on browser:
  • Sqlite
  • LocalStorage
  • IndexedDB
The sqlite isn't an official solution (check this answer why it isn't). it is only working on webkit-based browser and it is the closer thing you can get to a typical database. It is nice but I prefer to use something more official, I may try it though in the future, just to know if it works nicely with a desktop app and the tide, phonegap and node-webkit (I have used web sql database in the past in production for a very specific web application but it was 2 years ago).

The localstorage is a typical key/value store, where you can't have complex data so I am not going to focus on it at all as I don't like it.

The indexedDB is the closest I am keen to use, as it seems a nice way to a nosql-like document oriented database. You can store javascript objects, so I am planning to create a nice import/export solution of the data for transfering from one computer to another. It also has big limitations (50mb or more) so I will start with this for my experiment.

Wait! You could achieve all of the above without the need of node-webkit! You could use a manifest and save the app locally. Well maybe I could, but I need to syncronize the files like an "installation" the first time I want the application to be "installed" and pull them from the internet. I prefer to just give a usb stick to somebody, transfer the files to his computer and have my app. I'd like to give him also the "database" (which they may need a indexedDB custom backup or an sqlite backup) and import them directly.
comments powered by Disqus