DaedalOS: Desktop Environment in the Browser | Hacker News Reader

DaedalOS: Desktop Environment in the Browser

dustinbrett.com

194 pointsaidog126 comments

Name seemed familiar. It’s a play on the name of a guy from Greek mythology. Daedalus.

https://en.wikipedia.org/wiki/Daedalus

Father of Icarus. From https://en.wikipedia.org/wiki/Icarus

> Icarus and Daedalus attempt to escape from Crete by means of wings that Daedalus constructed from feathers and wax. Daedalus warns Icarus first of complacency and then of hubris, instructing him to fly neither too low nor too high, lest the sea's dampness clog his wings or the sun's heat melt them. Icarus ignores Daedalus’s instructions not to fly too close to the sun, causing the wax in his wings to melt. He tumbles out of the sky, falls into the sea, and drowns. The myth gave rise to the idiom "don't fly too close to the sun".

Indeed! I liked that Wikipedia said "Daedalus was a skillful architect and craftsman, seen as a symbol of wisdom, knowledge and power". Not to suggest I am that, but the name seemed cool anyway.

my username is based on Daedalus. I wanted to make something not used by anyone so I changed the 2nd D to a G and monopolized the username. I have yet to never have it work for me, and if it's taken, it usually means I already have an account.

Thanks everyone for the feedback. This has been my passion project for all of 2021 and I am glad to see someone liked it enough to post it on HN.

I like that this is useful, if you use an android system on a bigger screen and cannot open multiple browsers. This gives you multitasking in such a scenario.

Github was a bit hard to find: https://github.com/DustinBrett/daedalOS

Good point. I am always wondering what kind of things it can be useful for, as when I made it usefullness was low on my list.

A fun use I found is using it to emulate games in a browser on iOS. Doom runs surprisingly well, so long as you use Chrome and not Safari (doesn’t launch on Safari for iOS, probably due to Apple tricking the site into thinking you’re using a Mac).

Really nice and fluid interface, if you liked the animated background you can generate more from https://www.vantajs.com/

Thanks! Ya VantaJS has some really cool ones. I ended up doing some tweaks to this one to allow it to change colors and work with the latest Three.js.

https://github.com/DustinBrett/daedalOS

Thanks for the shout out! Indeed I tried to keep it all open source. Feel free to post any issues on that repo.

Wow, I did not expect it to be this smooth. Really well done! Also amazing to see that the creator has made this over 52x streams in the last year.

Thanks! Smooth was for sure a goal of mine, although from the feedback I've seen I think Chrome+Windows is the only certain way to keep it smooth. Thanks about the streams too, I enjoyed making them and they motivated me to keep going.

Appreciated what has being put into this effort. Quite slow on macbook pro with 16gb of ram. This makes me question the usability of React. Wouldn't something like this better written in something more lightweight such as Mithril or SolidJS, Vue, etc?

Thy would have the same problems past x amount of components

This is my usual experience with react. Also i am just not liking the code… I really don‘t understand why it became so popular except for Facebook marketing it so much hence people bought into the hype. And now it has the big ecosystem, which is one of the main arguments to use react for many people…

Because it's amazing to develop in and if you are good at development it's not hard to make performant applications. Don't blame the framework for a lack of skill

If the trigger goes off just being looked at, maybe the manufacturer shares blame…

This is breathtakingly wrong. Performance bottlenecks are notoriously hard to fix in ReactJS. Once you've exhausted memoization, hoisting, even propagating state via message passing, you have to fight tooth and nail to rip a hot path out of ReactJS' grip. It's horrible. And it's the prize you pay for using a framework everybody and their grandmother can learn reading only a 5 minute blog post (the true value proposition here).

On my PinePhone, I can immediately tell whether an app is built with React.

- the app usually takes several dozens of seconds to load

- the phone becomes warm

- any text I typed is not restored after a crash or a page reload if the developers have not explicitly saved my keystrokes in the local storage.

- each key press in an input takes a good fraction of a second (if not one full second) to appear on the screen

For the last one, I feel the lag on a decent laptop too (even if the lag is shorter). I know why: it is good practice to feed back any input into the state of the React component so everything is in sync. This triggers a re-render and if the devs were not careful, a good chunk of the app is re-rendered, which does not necessarily lead to a browser re-render / a blink, but definitely makes React execute a lot of render methods and re-diff virtual DOM trees. So each key press makes the browser run some JS that makes useless computation and accesses to the DOM. It's called "controlled component" [1]. Well, this is good practice for the devs, but it is user hostile. I wish more things were designed user-first instead of dev-first.

React + React-dom alone is around 130 KiB, 42 KiB Gziped [2]. It's without counting the usual dependencies (classname, Redux, browserlist, polyfills…). It's also more than three times the size of the entire frontend of the SMS app I'm building with Svelte. The heaviness is insane.

It is probably possible-ish to build an almost lean app with React. Signal seems to be kind of an exception and feels quite fast on my laptop (can't tell on the phone). It leaks memory and gets OOM killed quite often but React might not be to blame here. But React apps usually come with a awful lot of dependencies, to add insult to the injury.

It's render and diff'ing lags, fan takeoffs and RAM exhaustion all the way down.

[1] https://reactjs.org/docs/forms.html#controlled-components

[2] taken there, as linked in the tutorial (https://reactjs.org/docs/add-react-to-a-website.html): https://unpkg.com/react-dom@17/umd/react-dom.production.min.... and https://unpkg.com/react@17/umd/react.production.min.js

> I know why: it is good practice to feed back any input into the state of the React component so everything is in sync.

I used to this. A better approach is to use the onBlur event of the input field to update the text to state. The text itself can be accessed via a reference to the input field in the onBlur event (created with useRef). This makes it so that not every typing action rerenders the whole component.

I have the same laptop and it runs pretty smooth on Chrome.

Glad to hear that, thanks for checking it out! Chrome is indeed the best case scenerio browser as it's what I developed on. For me locally and when coming from CloudFlare, I find it quite fast, but some libraries can cause slow down such as Three.js and some of the emulators.

Quite interesting since on my mobile (OnePlus 6 with Chrome) seems kind of performant.

Edit: I wonder if its some kind of functionality causing the slow down? Perhaps Safari doing something stupid? Have you tried Chrome or another browser?

It's possible Safari is indeed a bit slower, also the animated wallpaper seems to have mixed performance results.

Running perfectly on my OnePlus 8, another user indicated that it also runs fine on the OnePlus 6.

Glad to hear it's running well. Thanks for checking out my site!

I have Macbook Air M1 8GB, it ran smoothly on my side. The highest CPU usage I seen from that is 30%. Doom and Nuke Dukem 3D is running smooth in there as well. And my NUC (i7 8559U) have a tiny input delay but overall ran smoothly on it. I use Vivaldi for my Macbook and Firefox for my NUC.

Glad to hear it went well. I had this going on a 4th gen i7 and it also wasn't too slow, so I think it depends on a few factors as to how quick it is for others.

Thanks for the appreciation. In general at least for me I found it quite quick on Chrome/Windows, so at least under some scenario it can be reasonably quick. If it is slow, it's likely not React as I have quite a few other things that run slower, like the wallpaper. I haven't tested Safari much as I don't have a Mac, but I will continue to try and optimize. Thanks for feedback!

I did some quick profiling and it is doing quite a lot of re-rendering, but I do not see any of the common issues you see in actual slow React apps. For me it performs well, even on 6x slowdown there is no visible lag or "stickiness" (I'm on a Macbook Air M1).

The background does take up some CPU, have you tried if it's still slow when you change it to a static picture? Side note: it's absolutely insane that you can change the background! Amazing work, such detail.

A different framework would not make a difference per se, maybe less re-rendering could help a bit, you can easily do that in React. And btw I'm not hating on the other frameworks mentioned; absolutely legit choices, but React is as well.

There are many very performant and user friendly apps written in React, and you can easily write shitty apps in all frameworks (React included).

I'm very impressed by this app, so much functionality and details, honestly insane.

Thank you so much for this comment/analysis. I do intend to work more on performance this year but it's good to hear some people are having a performant experience as is. I actually did try and keep my React "clean" and performant, but I know there are places to improve. The wallpaper does indeed seem like the biggest issue. I may need to consider just a static if I detect performance issues, although that can be hard to detect.

Thanks for noticing the detail, I spent quite a bit of time trying to get as much details and features as I could. Now for this year I want to make it more robust and take all the feedback I've got to make it even better.

Not sure it's really necessary, but it could be fun to do some profiling. I would certainly not rewrite in another framework haha.

Really amazing work, I can only imagine the time and effort this took!

Thanks! I'm happy with React but I do want to do profiling in 2022 on it.

I love 'web-desktops' so made a comprehensive Github repo listing 171 such webDesktops that people made using react, angular, electron, or simple HTML.

Please have a look here, you will love it : https://github.com/zriyans/awesome-OS

Thanks for doing this pkhodiyar! It's an amazing list and I am honored to be on it!

Dustin live-coded every week for a full year while working on this project. Here's the video playlist on YouTube: https://www.youtube.com/playlist?list=PLM88opVjBuU7xSRoHhs3h...

Thanks for the shout out! Indeed it was a long year of weekly streams.

Could open the browser and run DaedalOS on it, but the browser inside that DaedalOS wouldn't run another DaedalOS anymore.

Hee hee.

Did they not implement it as an iframe?

It is indeed using an iframe.

Thanks for the feedback. I have actually heard of other people doing this without an issue and the Browser is indeed just an iframe, so I am not sure why it didn't work for you.

Some browsers I've used prevent you from loading the same page within itself -- likely some kind of recursion protection.

I've tended to get around this by adding a query to the URL bar -- seems to trick whatever browser it was that I encountered this behavior on.

I wonder if someone will eventually make a desktop OS that is entirely web-based. No GTK or WinUI - everything is a web app. Except that the DE would also be, technically speaking, a web app itself that shows other web apps. Kind of like this, except imagine if the example apps ("File Explorer") were real web apps loading into the web app desktop environment.

I think Firefox OS was the farthest that this got, but I think it has potential. Such an OS would basically just be Linux + Headless Chromium + web browser API abstractions for things like USB (WebUSB), etc.

How far is ChromeOS / ChromiumOS from what you described?

Not there yet, because ChromeOS's user interface is not written as a web app. (Think close, minimize, maximize, window frame, taskbar, etc.) Same for it's native user interface (Settings menu).

I'm thinking of a desktop environment where everything was truly web - there was no native toolkit.

This was done in 2005 by eyeOS: https://en.wikipedia.org/wiki/EyeOS

Sadly, too advanced to its time, it was acquired but dismantled some time later.

Not the same as what you’re talking about, but I recall seeing this a few months back and found it pretty cool: https://github.com/udevbe/greenfield

I don't really remember the name now, but gnome/gtk had a way to render the entire interface in a browser, if anyone can remember please let me know

Edit: it is the project the_only_law posted below

There's also the Broadway GTK backend https://docs.gtk.org/gtk3/broadway.html

These (online browser based) desktop environments work best when you hit F11 and go fullscreen, stripping the browser chrome away.

Either the user does that, or we signal to the browser that this is a 'fullscreen only app and you must run it fullscreen' but that would be bad user experience, since most users would struggle to exit it.

That's what we did at Jolicloud a decade ago to make a better (different? beautiful? doomed?) OS for netbooks: https://en.wikipedia.org/wiki/Joli_OS

The OS booted ASAP to a fullscreen Chromium instance, until we added support for running Linux apps too later on. I didn't work on the windows management so can't say more about this technical side.

That’s what I am building, except both native and web apps work seamlessly together: https://www.greenfield.app/ https://github.com/udevbe/greenfield https://twitter.com/FriedChicken/status/1420671685485867014?...

Super cool, although I would not use the Windows logo for the "Start" menu. Definitely change that and call it something else! I'd imagine Microsoft jealously defends that sort of thing.

It uses Windows design and icons for everything else, too. Would require a complete visual overhaul to divorce from MS.

I've attempted to isolate things enough where it should be a mostly easy process to change "themes". But ya it would require a lot of new stuff/gfx.

I feel that direct mimicry of UIs and designs is a shibboleth of someone just starting out and starting to getting a good handle on tools.

Another is enthusiasm to share your own work with the world.

Neither is bad, but just something to be aware of.

I saw this in my own early work before I reached an equilibrium of spontaneous original designs.

>"I feel that direct mimicry of UIs and designs"

Unless the unique design is the goal on its own why waste time?

I just love try to copy details of something. I've been coding for 20 years, this is just a passion of mine.

If you look around the filesystem and find the author’s résumé in the Documents folder, you’ll find out he works for Microsoft. So I’d guess Microsoft doesn’t mind as much.

Oh good, that's a relief!

Hehe ya I actually just started there last month. They don't know much about my project but atm at least I am confident that it's ok.

Thanks for the tip! I am hoping it's ok as I have seen many people use the logo and I actually got it from the free font-awesome SVG icons.

Incredible! Good Job Dustin. Now you can create a software store where you sell different tools that run on this OS and you have yourself a OSasS (Operating System As A Service).

Thanks! Haha ya that is the next step.

On my test computer which is an i7 m620 and no GPU it is very slow and takes the CPU to 100% on all cores while idle. opening a window will just get stuck at "working on it". While it looks nice this has probably been the slowest and least efficient web desktop I have opened on this computer and I have looked at a lot because I am building my own.

To be fair, that is a 12 year old processor, so many modern websites are probably hard

You would be surprised, most sites work well actually. OPs site is probably one of the slowest sites I've visited with this laptop.

I would hope that is because of the wallpaper or CDN misses, because in general I hadn't had such issues. Thanks for the feedback. Perhaps you could try setting an image as the wallpaper to stop the animated one which can be a hog.

I indeed coded with modern computers/browsers in mind. It's unfortunate to hear someone is siting at "Working on it...", because at least for me on Chrome+Windows at home accessing my production website, it is very quick. I have heard some people also say it's quick, but it is starting to seem like 10% or so are having issues with performance. I could see the wallpaper being an issue. Or the CDN perhaps not having it cached as my web server is slow if it needs to grab from there. Thanks for the feedback!

I've heard a few people with no GPU accel having issues with the wallpaper. I should probably find a way to detect that and unload it. Thanks for feedback!

Yea I was also noticing a lot of "Working on it..." showing up, and I'm using a modern machine with an 11th Gen Core i7.

I'm thinking most of the issue might be the wallpaper. Its cool and all, but its a huge CPU drain.

Thanks for the feedback. There is some performance work to be done if you are seeing "Working on it..." for File Explorer, so that could be possible for larger folders. As for apps saying that, some of them require large library files to download first so depending on internet it could be downloading 1-10MB+ if you open something bigger. I am using CloudFlare CDN but it also could be possible if you are in an area where it's not cached that it gets it from my web server at StableHost which is slow.

Thanks for checking it out anyway! I hope one day you can try it with a smoother experience because when it works, it can do a lot, although it's a lot of just messing around. :-)

There's a few of these knocking around the web:

https://winxp.vercel.app/

https://windows96.net/

https://www.windows93.net/

I keep track of all these web desktops around the web here [1] if you’re interested in a even bigger list :)

[1] https://simone.computer/#/webdesktops

Incredible website! Very functional for how experimental it is and full of neat surprises. Love that a screensaver comes on after it is inactive for a while.

(I found the pizza recipe btw)

So glad you explored it all the way down!! You might find some more Easter eggs here and there ;)

Thanks syx for the work you do! And that screensaver is awesome on your site, Hack the Planet!

Thank you Dustin and congrats for your new release, definitely worth all the effort you put into it!!

Thanks! It's a total rewrite from scratch over a year and I really wanted to improve every aspect of what I had done the first time with v1. I still have a long way to go but my aspiration one day is to have near feature parity, within the confines of what can be done in a browser. Maybe in a decade or so I can redo it again when browsers support more stuff.

With all these I feel like there is an opportunity for a standardized API for client programs.

Web apps running in a frame could postMessage requests for selected services from the desktop environment. It could potentially allow for a app to easily support a large number of different environments.

I would indeed like to have something like this, for 3rd party development. I have some generic aspects but it's mostly internal to the app at the moment. So I will add this to my to do list. I am not familiar with a specific standard but maybe I can find something to base it on.

Just wanted to comment again to say I have actually gone through every single link on this site as I was building mine. I am obssessed with this kind of project and loved seeing what others did and using it as inspiration.

Deleted the computer on windows96, wasn't disappointed

(volume warning)

Deleted the trash bin, wasn't disappointed

That's wonderful haha, these are a treat

Good shout outs! Windows 93 and 96 are both amazing examples and much more than parody's or clones.

Nice, even replicates the slowness of the start menu.

Thanks! I think the slowness, ideally is a cache thing. At least there is a case where it can be "snappy"-ish.

I've always loved "desktop websites", but beyond novelty I haven't found a real use case. Maybe something like a thin client or "work anywhere" for a business?

Synology DSM is a well executed example of a good "desktop website" use case. https://www.synology.com/en-uk/dsm

Would love a open source version of this for custom hardware. Sometimes I don't feel like using a shell for my local servers.

webmin is the closest thing I've found in the past, but would love to hear of newer options

Well, you can run their os on your hardware or in a virtual machine using https://xpenology.org/

DSM may not still be, but last time I looked it was built using Sencha ExtJS.

I'm not sure when the buyout happened, but a few years ago Sencha became the shadiest, nastiest organisation I've ever dealt with. I'm keen to see what Synology do / have done to displace it.

Yes, there are use cases, I too loved 'web-desktops' so made a comprehensive github repo listing 171 such webDesktops that people made. Please have a look here, you will love it : https://github.com/zriyans/awesome-OS

This is an excellent list, thanks! I'll be spending a while going through it.

I suspect novelty is indeed the primary purpose here. I view platforms like Sandstorm.io as a web operating system, since you install apps and manage files that use those apps contained within a web UI, but there's no real reason to emulate the look of a desktop OS, especially consider how much you have to fight with the browser to make that happen.

Most of the conventions of window-based desktop UIs inside a web browser is silly because it is, itself, a window. You are likely better off using multiple browser tabs than a fake windowed UI inside a single browser tab.

Ya novelty is all over my site. For me specifically the idea was always to replace my personal site and for users to feel like they had sat at my computer and were looking through my stuff/files. I use Windows 10, so that is what I decided to replicate visually.

It's an incredible work. I am pretty impressed how many desktop conventions I didn't expect to work, which did.

...Are you going to upgrade your home page to Windows 11 though? ;)

Thanks! I think eventually I will move to Windows 11, whenever I do for my own personal desktop.

As someone who has to regulary switch OS for various reasons: I would love to have the same file explorer/desktop environment, that works everyway in the same way. I hate the windows file manager. I even more hate the chromeOS file manager, Mac has been too long to remember - but if I use a new system and just want to look at some files and do basic stuff - I do not want to have to figure out the various ways of doing things. I just want to do them, the way I am used to it.

So the general idea is good, but I do not like the windows clone style of this one too much, also it is very slow. But that might be different, if locally installed.

Btw. it took me some time, to find the github link

https://github.com/DustinBrett/daedalOS

It should not be slow, sorry to hear about that. Maybe you could try it locally, indeed that is the code. I would love to hear more about "I do not like the windows clone style of this one too much" as I have tried to replicate Windows 10 and would like to know where I could improve. Thanks!

I know this project http://www.xpud.org/ . And yes, this is really a desktop mixed with a browser.

Reminds me of a (personal) website I saw long time ago that replicates an earlier day OSX desktop, with functional itunes player. Does anyone remember what it was called?

I don't recall that exact one but I do love personal websites designed as OS's, not sure why, just my thing.

Great project!

By launching Doom and Blog Posts simultaneously, I caused some kind of deadlock on Firefox 96.0b10 (64-bit) Developer Edition on Windows 10.

I just opened it in a new tab, and it crashed my computer (Firefox 95.0.1 (64-bit) on Ubuntu).

Ah darn. Some of the libs are less stable than others. I will attempt to recreate that. My main test browser has been Chrome.

I love the fact that I can drag an mp3 from the "Music" folder to multiple apps - Webamp, Video Player, even Monaco Editor!

Thanks! I wanted to try and make things interactive enough where people could mix and match ideas.

Really impressive. With work I could easily see this being a product with big customers.

Thanks! I did try and polish it a bit, but with so many different features and apps, there is for sure some rough spots still. And I mostly focused on Chrome/Windows experience on Desktop.

Amazing! Wondering how much work must've gone into this...

Thanks! Ya it took a long time, a year for this v2 one.

wow, I was not expecting it to run buttery smooth on my phone of all things. it's a Pixel 6 Pro, so not old, but most JS apps work for shit regardless, this thing runs better than most native apps on my phone, amazing work. I hope you keep building and improving on this. I personally have a distaste for JS and would love to use this if it some day became a full desktop solution.

Thanks! I do intend to keep improving and I have a huge list of to do's for 2022 and beyond. I am glad to hear it ran well for you and you liked it.

Also, congrats on the new gig Dustin.

Thanks! It's exciting.

> Desktop Environment in the Browser

You lost me at the title already.

I suppose next they would want to integrate that web browser into of systemd and then I know I've fully arrived in hell.

One day...

Is is this a competitor to AaronOS then?

Thanks! I know AaronOS and no it's not competition! His OS did help inspire me though!

AaronOS dev here. I love the work he did on this, and that mine is considered a source of inspiration.

One thing is certain when comparing the two - I have a LOT to learn from this project. The inspiration goes both ways.

Amazing work!

Thanks!

Reply on news.ycombinator.com