Converting an Angular1/NodeWebkit App to an Ionic/Electron App

Converting an Angular1/NodeWebkit App to an Ionic/Electron App

Zen Notebook

I needed to learn Angular and I wanted to create something useful with Node Webkit. I had started as a desktop app developer, first with shareware, then with freeware as a great way to promote any new site. I finally got tired of licensing, cross-platform issues, GUI frameworks I had to interact with. So this would be the first desktop software I developed in six or seven years.

So then I picked software that I would actually have a use for. Something that made free-writing and journaling easier. Not just distraction free in the sense that was a mode you could choose to write in, but also distraction free by default and distraction free in the sense once you click the icon and the application loads, you can start writing. And then when you are done, you could simply close the application and your writing would be saved. This makes the whole process distraction free.

You can download the software for Windows, Linux or OSX here and find the Github repo here.

Pragmatic Architecture

Everything Should Be an Api

It just makes sense if you are going to have more than one type of application. If you are never going to have a phone app or desktop app or any reason to connect to your site remotely, than you can get by without an API I guess.

But with this update, I will have a web, phone and desktop version of the application. They can all get data from the same place and if I have to change the codebase of the backend in the future, the client applications can remain the same during the update. It just makes things easy.

Backend Software

I like VPS’s. For my own sites, I’d just rather not spend the money unless I need to and I may have half a dozen projects going in various stages that I playing around with. I get bored and I do finish things. I got back to Zen Notebook two years later. I do the same thing with books. I just see swapping out my biological swap space once and a while a healthy things that makes you more flexible and work longer hours before burn out. Sometimes you have to say fuck it to something that just won’t work and come back to it after working on something easy.

Anyway, I stuck with Laravel. I do know the MEAN stack well enough, I could have used Node. I opted for the lowest common denominator, a shared host. So MySql or MariaDB as a data source also.

But the API I am starting with is simple and could be swapped out with anything in the future with little trouble.

React versus Angular2

Ionic locked the answer for this project. Ionic2 uses Angular2, so I am not learning React for now. So as I am upgrading, I am also adding the ability to compile phone apps as well as desktop apps using the same code base. Ionic will also build the frontend for the website. That, my friends, is the shit. So guess what, that’s the choice I made.

Electron Versus Node Webkit

Yeah, well, this could possibly be a whim. I didn’t have any issues with Node Webkit. But Atom is pretty awesome and it uses Electon. And I do want a plugin system for my application that will be similar Atom’s, so that other developers can add to the application whether I decide to neglect my duties for two years again or not.

I guess I could say that since Atom is backed by the support of a lot of developers, I see a bright future for Electron, but I really just came up with that one on the fly.

And hey, while I’m changing shit, why not just burn the whole the thing down.

Updating the Repo

I dreaded this. That’s why I procrastinated. But it was really not too bad.

I created a new branch off of master called legacy to keep the current version. I then created another branch for the new electron app off of master also.I committed an Electron Ionic 2 starter repo a few months ago. I added it as an upstream. And most the the files and folders were named differently. All I had conflicts with were the .gitignore and the package.json files. But I knew what I needed out of both, so I just manually merged the two files.

And that’s where it sits right now. Now the real work begins. But it’s a clean slate again and I should be able to do things better from the ground up this time.

Stephan Miller

Written by

Kansas City Software Engineer and Author

Twitter | Github | LinkedIn