Electroff: An Electron-less Alternative
I think everybody knows the Electron project: a Chromium based browser that brings Node.js like development directly through its Web View.
It’s been used to create many cross platform applications, breaking out regular Web pages boundaries when it comes to use databases, reach system IO, simplifying creation of DIY of any kind.
Why looking for alternatives?
Electron is also the main Web View that fuels my project BENJA, but while it’s cool and everything, it has various limitations, and following just a couple:
- Electron must be installed in the machine running its content. If you have it installed in a Raspberry Pi, as example, only the Raspberry Pi can interact with its features. Any other browser in the network cannot run that code, because browsers won’t understand code that uses Node.js modules. In few words, Electron is only for a single physical device, no Network abilities.
- Electron is not always Hardware Accelerated, and it’s not friendly with Wayland and Weston. It’s also quite heavy as dependency.
It’s not indeed a secret that the best browser for Embedded devices is WPE WebKit, and the reason is that it has it all, compared to Chromium:
- it’s “lightweight”, around 28MB, which is less than Firefox and Chromium
- it’s fully Hardware Accelerated, and it bootstraps in half of the Electron time
- it works with cog, Wayland, or even X11, making it an ideal choice for Kiosk based applications
The only missing part is a way to write Electron like applications, something covered by any REST approach, but incredibly boring to setup as RAD.
Meet Electroff
Electroff (pun intended), allows us to write apps in a similar way Electron does, with the ability to work either in your Raspberry Pi, or any other browser able to reach that page through the network.
It’s basically a way to have a Kiosk, that could be driven, or offer features, not just to its own screen, but to whoever is connected to the same network.
The following code is the index.html page that can be reached through the Raspberry Pi browser, or any other browser in the network.
It allows any browser to show something in the Oled screen attached to the Raspberry Pi, via an input field and an update button.
And this is all it takes to spin such page within the Pi:
#!/usr/bin/env nodeconst {PORT = 3000} = process.env;const express = require('express');
const electroff = require('electroff');const app = express();
app.use(electroff);
app.use(express.static(`${__dirname}/public`));
app.listen(PORT, () => console.log(`http://localhost:${PORT}`));
If you’d like to see the whole demo, it’s on this GitHub folder.
Achievement Unlocked 🎉
Even if it’s in a very early stage, the amount of hacks to make this possible already demonstrated it can be used to do any sort of operation, read from any sort of sensors, write files, read files, and do pretty much anything is possible to do with Node.js, except we don’t need to setup end points, handle routing, etc: Electroff does everything for us out of the box!
The only real thing to keep in mind here, is how everything works, which is by implicitly reaching .then(...) calls through every await, so that any Node.js API must be compatible with a promise, but thankfully that’s almost already the case.
Some technical challenge/detail
- every foreign reference, which is everything that was retrieved via
require(...), is a Proxy that branches out per each.access, or method invoke, automatically passing to the server serialized arguments, with the ability to have Proxies also in there, but even callbacks! - the specialized JSON parser can return even recursive data from the server, thanks to flatted module, and the server can receive callbacks and namespace access from the client (I call it Executable JSON)
- every
awaitresults into a POST operation, a vm sandbox evaluation with dedicated global namespace per client, and specialized serialization
These, and other details, can be find in the F.A.Q. section of the project.
And what about the WPE WebKit Kiosk ?
If you have any Raspberry Pi, you can follow ArchLinuxARM installation instructions for the Pi2, the Pi3, or the Pi4.
Once we’ve burned the SD through the installation steps, we can login via alarm user and alarm password at the first boot, and type this right away:
bash <(curl -s https://archibold.io/kiosk/pi/wpe)Bear in mind, a network connection is needed, and it will take 5 to 10 minutes to install all the things, but at the end you will see in the monitor/TV/screen attached to the Pi the Hardware Accelerated jellyfish demo.
You can disconnect the Pi, at that point, and work with the folder in:
/home/alarm/wwwYou can install electroff via npm i --save electroff and test whatever you want. The jellyfish demo is a quick way for me to be sure everything is fine, but you can change the index.html at any time, to show anything you like, and use electroff when/if you need.
Conclusion
With a combination of tricks that seem to work well, and a fully HW accelerated Kiosk for the Raspberry Pi 2/3/4, there are really no limits for the kind of Home based, or standalone applications, we could create, without needing to distribute Electron in every device, and centralizing all we need in a Single Board Computer, now supercharged with the whole Node.js ecosystem. I hope you’ll start making something cool, and I welcome you to contribute with the Electroff project 👋
