Relative fun with Cordova, Electron and Vue.js
I wanted to share an update on one of my pet projects, because — let’s face it — I’ll never finish or publish it. I like learning and experimenting with different technologies, and I’ve been trying out various approaches to building a pipeline for cross-platform web app development.
What’s going on here?
The stack
As you can see, in the video I’m clicking on a .app file that promptly opens the app I just built. But I’m just a web dev nerd, I would never touch Mac app development! What’s up?
The answer is Electron by GitHub, basically a wrapper for webkit. If you’ve never tried Electron, I’d suggest you have a look — it’s an easy-enough thing to get started with, and you should have a thing running in a window on your desktop in no time!
Vue.js is what the front-end runs (in a browser) on, and it’s quite amazing honestly. If you’ve never used Vue, take a look at the extremely well-crafted tutorials, demo apps and extensive documentation of the 2.0 version. Vue is one of the most pleasant technologies I’ve used in a long, long time. I can provide only cursory insight into performance and implementation details, but the common-sense approach, usability, overall consistency and thorough support materials provided to developers here is nothing short of top-notch in my view, and I’ve researched this part of tools development for a while now. Vue takes the industry forward in this area.
While not on the video, this same project runs well on an iPhone with the aid of Apache Cordova (and builds on Android, although I haven’t worked on the performance). If you’ve never used Cordova, frankly you’ll sleep better than I do, but it does work if you’re a web developer trying to get things running on a phone.
Frankly, learning each of these different, and sometimes competing technologies is quite daunting. That’s why I use Gulp to write tasks for me that abstract away the actual usage of each of these technologies, so that during day-to-day development I don’t actually have to remember how all the nuts and bolts of each of them actually work. Node is a good platform for building automation like that, and Gulp has wrappers that more or less work for almost anything imaginable, even though it’s a messy pool to dive in, even if it requires a lot of low-level coding to make it all work together.
In addition, I readily have the tools available to extend my Cordova pipeline that takes automation further than Cordova does, such as moving app icons to built projects. Of course I use this same platform to build my SCSS, Vue view models, SVG sprites and whatnot.
Another custom pipeline?
Yes! I love writing this stuff!
Why not use existing solutions? Well, honestly I wouldn’t tell a client to use my shoddy custom pipeline with tons of gotchas, out-of-date documentation and questionable dependency trees. In the real world, a whole host of new considerations come in.
But the thing is, existing solutions aren’t perfect either, and diving into them just doesn’t teach you as much. In some way it allows me to document the things I learn every day, come back to it and build on it. When I think of a new project next week, I can fork the same template easily and start experimenting from day one without having to spend a lot of time on bootstrapping the project architecture.
I’ve shared the template I’m using on GitHub for you to check out: https://github.com/Eiskis/vue-project-template. This is me playing with things and recording what I learn. Don’t expect enterprise support if you decide to try it out, but I’m interested in your feedback if you‘re in for some hacking with it!
WTF is this game about?
So this thing is a, again, experimental, game project I’ve been messing with. If you’ve never read I Am Legend (you’ve probably seen one or more of the movies that carry the title), I suggest you go ahead and do so. It was quite inspiring and eye-opening for myself at least.
As you can probably see in the video, the game still is still full of placeholders, but the basic gameplay loop is somewhat demoable. It’s based on the book, following Robert Neville who has to build a safe house for himself in order to survive through the constant raids of the monsters that come out at night.
You need to collect notes to figure out if there’s something to be done about the sad state of the world and all the humans that once were, or if the rest of his life is just about waiting for his inevitable death. And of course also gather supplies for fortifications, battle with your sanity and while not getting too drunk. Venture too far from your safe house and you might not make it back until dark.
I’m not sure if anyone would play this game. I probably wouldn’t. But since I like programming, modelling the above in JavaScript is fun to think about.
Thanks for the read
You can read more about my work as a product designer and developer on my site at jerryjappinen.com or follow me on Twitter. Thanks for reading!
