Toby Chui

Posted on Oct 20, 2020

Web Desktop Environment in Go

#go #linux #webdev #html

For the last 3 - 4 years, I have been working on a relatively large project called the "ArOZ Online System" (or arozos since v1.0), which is a web desktop environment for everything. I used to write it in PHP5, then moved to PHP7 and finally Go in early this year.

Just last week, I (finally) released the arozos v0.510 preview edition on Github. And I think it is time for me to share it to everyone who love to have a cloud based working environment like I do.

(A dark theme screenshot, arozos v0.510)

tobychui / arozos

Web Desktop Operating System for low power platforms, Now written in Go!

Features

User Interface

Web Desktop Interface
Ubuntu remix Windows style startup menu and task bars
Clean and easy to use File Manager (Support drag drop, upload etc)
Simplistic System Setting Menu
No-bull-shit module naming scheme

Networking

Basic Realtime Network Statistic
Static Web Server (with build in Web Editor!)
mDNS discovery + SSDP broadcast
UPnP Port Forwarding
WiFi Management (Support wpa_supplicant for Rpi or nmcli for Armbian)

File / Disk Management

Mount Disk Utilities
- Local File Systems (ext4, NTFS, FAT etc)
- Remote File Systems (WebDAV, SMB, SFTP etc)
Build in Network File Sharing Servers
- FTP, WebDAV, SFTP
- Basic Auth based simple HTTP interface for legacy devices with outdated browser
Virtual File System + Sandbox Architecture
File Sharing (Similar to Google Drive)
Basic File Operations with Real-time Progress (Copy / Cut / Paste / New File or Folder etc)

Security

oAuth
LDAP
IP White / Blacklist
Exponential login timeout

Extensibility

ECMA5 (JavaScript…

View on GitHub

🖥️ What is Web Desktop Environment?

Web Desktop Environment, as its name suggested, is a desktop interface (or front-end as the web developers call it) that run on your web browser. What is interesting about this kind of interface is that the environment is based on the web infrastructure, aka as soon as you have a laptop or devices that can connect to the internet, you can access your desktop anywhere you like.

Compare to a traditional way of using your computer which you need to sit in front of your monitor, a web desktop environment provides you the freedom to "work anywhere" with internet access.

🖼️ Screenshots

📽️ Demo Video

Showcasing basic Desktop, File Explorer, Audio / Video WebApps and my favorite WebApp - FFmpeg Factory and NotepadA (based on Visual Studio Code's Editor)

❔ Why develop a Web Desktop yourself?

Originally, I was not planning to develop a web desktop system. I was just looking for a solution to store my music and video collections. And I also love to have a Synology but couldn't afford one.

Finally, I decided to write myself a PHP script to get the job done. Due to other needs in my university studies as a CS student, I added more and more features to the original php scripts like notepads and a web based code editor. When I notice that I am adding too many things to my system, it already become a web desktop environment with glue code everywhere 😱😱😱.

And you can still find the "php web desktop system" under my github repo (Beta LTS branch)

https://github.com/tobychui/arozos/tree/Beta_LTS

No worry, the 1.0 version will rewritten everything and it will no-longer be spaghetti 😉.

💾 Lets get into the technical stuffs

The arozos is made using many complex levels of abstract layers and many custom developed modules. If you try to visualize the relationship between different modules into a diagram of some kind, it will look like this.

There are too much details here but I want to share a few implementations related to this system that might interest you.

Hot-swappable Reverse Proxy as an WebApp

Many of the Web Desktop Environment in the open source world requires specially written WebApps to be integrated into their system before they can be used. However, the ecosystem for Web Desktop system are so small and close that it is not possible for any web desktop open source projects to require their developers to make a "special version of the WebApp that compatible with the Web Desktop system". Namely OS.js and X-WebDesktop

Making use of configurable reverse proxy system, it is much easier to integrate new WebApps into the Web Desktop environment. What you need is a binary of the other service and a bash script that convert the arguments passed from the Web Desktop System exec command to the services' port argument.

Example Reverse Proxy WebApp: AriaNg

JavaScript Virtual Machine & Go func()

Another feature that might interest you is what I called the "AGI" - ArOZ Gateway Interface. It is actually a JavaScript Virtual Machine embedded into the arozos core binary and allow WebApp modules to access file system / permission system functions written in Go through AJAX request.

The system is powered by the Otto JavaScript interpreter and a custom developed arozos virtual path systems. These two combines created a virtual-environment for WebApp's code and prevent WebApps from crashing the web desktop system.

Here is an short piece of AGI code for reference. It basically JavaScript with custom libraries.

//UnitTest/backend/filelib.glob.js
console.log("Listing Music Files on Desktop");
requirelib("filelib");
var fileList = filelib.glob("user:/Desktop/*.mp3");
sendJSONResp(JSON.stringify(fileList));

🤔 Web Desktop Environment and Mobile?

In recent years, more and more people are replacing their laptop with mobile devices. In my opinion, web desktop is perfectly fine to run on mobile devices like smartphone, what's needed is a bit UI updates and optimization.

Here are some work-in-progress image of the arozos web desktop for mobile (PWA supported!)

💡 Ideas and Comments?

I have been working on this project alone for more than 3 years now and it will be nice to hear any kind of comments or idea from you guys. It will be great if you can comment and start some discussion below, thanks :))))

Want to know more?

If you are really interested into this project, feel free to check out the project in https://github.com/tobychui/arozos/