DEV Community

Cover image for Building my own desktop environment for the web, my 10 months journey
shmuelhizmi
shmuelhizmi

Posted on • Edited on

Building my own desktop environment for the web, my 10 months journey

Around 9 and a half months ago I started working on a small idea I had, back then I thought to myself what if I could implement a full desktop environment with all the regular features of a desktop environment such as a full window manager and high-level abstractions of concepts like running apps and managing your desktop, but all with the exception of running in your web browser as a web app.

nord theme example
above a screenshot of "web-desktop-environment" in action using the Nord theme and vs-code app

But way ❓

In theory, this may sound unnecessary (at the very least for some people), you could think to yourself, isn't the web much slower than my daily used blazing fast native CPP-based desktop environment?
or, what about support for all of the existing apps that weren't built to run on a web environment? well before I start and explain my solution to both those issue I want to start over and list the Pros I personally see in a web-based desktop environment -

The PROs 🀘

  • accessible from anywhere - since it exists in the form of a website.
  • isn't bound to a physical box - you don't must to have a physical PC, you could host your PC from anywhere, sometimes working directly from a public server could be awesome for some developers.
  • great for low-end computers or servers - small PC boards like the raspberry PIs or low-end servers with virtual CPU/s and no GPU can struggle running a full desktop and dealing with rendering, but running a desktop environment web server? that's no problem.

The flows πŸ‘Ž

now, what about the flows with a web desktop environment?
let's start with the performance issues -
well, the way why address those is by breaking the regular way people have been writing web applications for the last few years, instead of providing to the user with a client app that contains all of the app logic and supporting that logic flow with a rest/socket API to supply the native functionalities like must full-stack web apps do, we instead move all of the logic to the server and only provide the client with instructions of what the server wants him to currently render, this moves out all of the heavy calculation and stuff that relies heavily on multithreading away from the client to into the server and by doing so keeps the web lightweight, fast and eliminate the performance issue with running a complete desktop on the browser.

and what about the backward compatibility issue?
this is the hard one, I am working hard to find a way to enable support for x11 applications to run on the desktop environment but in the meantime and as of today (03.04.21) support for gtk3-apps to run via the broadway backend of gtk3 is already in the main branch and soon to be released to NPM.

running gtk3 app
above a "screenshot of web-desktop-environment" in action running gnome-mines (a GTK3 app) via the broadway backend

Main features 🌠

Apps

  • terminal emulator πŸ‘©β€πŸ’»
  • visual studio code ✌
  • file explorer πŸ“
  • text editor πŸ“
  • media player 🎧
  • settings/ system info app βš™
  • any GTK3 app (30% of apps do crash) 🐾

Desktop

  • slick-looking desktop πŸ’»
  • lot's of themes 🎨
  • complete sync between all instances πŸ‘¦<->πŸ‘¦

Screenshots πŸ–Ό

dark theme example
above a screenshot of "web-desktop-environment" in action using the main (dark) theme

dark theme pwa example
above a screenshot of "web-desktop-environment" in action running in PWA mode

Live demo πŸ–₯

You can visit the live client side demo here https://web-desktop.app/demo , I can promise you that playing a bit with the themes can be quite fun!!

demo app
above a screenshot of "web-desktop-environment" in demo mode using the dark transparent theme

Learn more

If you are looking to learn more, install the app or even just wanting to give me a star on GitHub πŸ™ here is the link

GitHub logo shmuelhizmi / web-desktop-environment

a web-based cross-platform desktop environment

Web Desktop Environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

just like any other desktop environment WDE was design to abstract the use of your computer is a visual way but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.

Why?

WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortable…

Top comments (17)

Collapse
 
iminside profile image
Dani Chu

Wow! This is an incredibly cool idea! I had similar thoughts and ideas, but I decided to focus on building the framework first. Thank you for the article. I will definitely follow your project.

Collapse
 
shmuelhizmi profile image
shmuelhizmi

Thanks, be sure to update me if you decide to pursue with your idea, competition is always good :)

Collapse
 
iminside profile image
Dani Chu

okay! πŸ‘Œ

Collapse
 
anoop5445 profile image
Anoop Singh Tomar

It is a great idea. Adding to it, I was looking for creating a web server or something like this on which I can have my documents. And I can access the documents on internet from anywhere. For web server it could be low end system or on Raspberry Pi

Collapse
 
shmuelhizmi profile image
shmuelhizmi

Hey anoop, sounds cool, if you want there is a setup page on my github page if you like to try it out, you can easily download and soon even edit text document from "web-desktop-environment"

Collapse
 
geobrodas profile image
Georgey

Not a bad idea
I mean its actually innovative
Inspired🌠!

Collapse
 
w3ndo profile image
Patrick Wendo

Absolutely in awe

Collapse
 
andrewbaisden profile image
Andrew Baisden

Wow very cool.

Collapse
 
adeleke5140 profile image
Kehinde Adeleke

This is absolutely amazing. From the idea to the execution

Collapse
 
shmuelhizmi profile image
shmuelhizmi

Thank you

Collapse
 
coolscratcher profile image
CoolScratcher

Amazing job, I would have never had the patience!

Collapse
 
shmuelhizmi profile image
shmuelhizmi

Thanks!

Collapse
 
johnhenry profile image
John

This is awesome! I just connected it to a docker container with minimal fuss.

Collapse
 
shmuelhizmi profile image
shmuelhizmi

Cool, let me know if you have any feedback!

Collapse
 
seanmclem profile image
Seanmclem

How does your file manager work?

Collapse
 
shmuelhizmi profile image
shmuelhizmi • Edited

github.com/shmuelhizmi/web-desktop... - backend
should actually be simple to understand if you know react, if you want more advance details you can contact me on twitter :)

Collapse
 
karyana profile image
Karyana Yandi

Interesting