Web Desktop Environment in Go
Tags: go, linux, webdev, html
Published: 2020-10-20 06:53:11

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/b7ggw60lyik1qi8chu7v.png)
(A dark theme screenshot, arozos v0.510)

{% github tobychui/arozos %}

## 🖥️ 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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0g7atdfr02lnf56qzmax.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wh5eg4vx8cic80zf0pe9.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mbac91i3fj98d044sc9v.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ifd2u0s5h6va1zgz82pe.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2hikz6h37lv7np8vf0mx.png)

## 📽️ Demo Video
{% youtube NXmAsQhhlOs %}

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)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nlih25vbxwbinjuwfqh7.png)
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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6iqg4ty6v7bb2mifq919.png)

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](https://manual.os-js.org/development/) and [X-WebDesktop](https://github.com/OXOYO/X-WebDesktop-Vue)

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.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rteiyqghpa7atjid79k4.png)

Example Reverse Proxy WebApp: [AriaNg](https://github.com/mayswind/AriaNg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c39vsnm7xqz8ptkrrxo6.png)

### 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. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vob04lvee3i7vs7r9m61.png)

The system is powered by the [Otto](https://github.com/robertkrimen/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!)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/va2m6kq9r7e0lbx2we5l.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5y1giid3qf8c1h7hc6za.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gd54h14l5o6mv965xb1d.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hrpjjy1i87r9wowmsn8s.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ks4jwyqzuot4n2po4fkg.png)

## 💡 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/

{% github tobychui/arozos/ %}