How I built a Web based Operating System

What’s the problem?

Modern operating systems like Microsoft Windows, macOS, iOS, and Android are the standard interfaces we interact with daily. Each operating system offers its benefits and drawbacks. Windows is versatile but appears somewhat dull and raises concerns over data collection ethics. macOS boasts a stunning look and feel but comes with a high price tag and restrictive access.

As operating systems evolve and incorporate more features, hardware can become outdated. Storage capacity feels like it's shrinking, even though you haven't saved that many photos! It's likely you'll need to replace your phone after four years because it doesn't perform as it used to. This cycle generates excessive e-waste and needless expenses. Just bought a €500+ smartphone, and after a few years, you need to do it all over again?

Inuva’s Goals

Inuva aims to create an operating system that runs entirely in the cloud. It offloads your heavy workloads to the server, prolonging your devices' lifespan. Accessible on any device with an internet connection through Inuva's responsive design, it merges Windows' versatility with macOS's sleek aesthetics, giving users freedom.

How Do You Achieve This?

First, let's define what an operating system is. Inuva uses a modified Linux distribution and a web-based visual user interface. We consider Linux as the kernel and the visual interface as the "operating system."

What have you build for the “operating system”?

The Inuva operating system functions as a platform for apps, offering window management, process management, a dynamic app loader, user settings, registry settings, development kits, etc.

These features are the core of the Inuva operating system. Users want to visually interact with what they are working with and we want to provide a familiar interface that can act as a drop-in replacement (or addition) for their current operating system. So, the first step was to create a window manager.

Window Manager

A window manager has a couple of key requirements:

• Setting X and Y positions by dragging
• Resizing on all axes (including diagonals)
• Double-clicking borders or the action bar for resizing or full-screening
• Interacting with a window should bring it to the foreground
• Adapting to mobile viewports and gestures
• Enable drag gestures on mobile to close the apps

The window is a Framer Motion <div> that responds to these interactions. We're developing the Inuva API to allow developers to customize window behavior for their apps.

Process Management

In a Web OS environment, managing processes is challenging. Inuva doesn't spawn new processes in the traditional Linux manner but creates registry entries for running processes. The forthcoming process manager will offer a unified interface for Linux and Inuva processes.

Extensibility

The hallmark of a great operating system is allowing community-driven innovation. The upcoming Inuva App Store will enable users to install and develop new apps.

In the context of web technologies this came with a couple of hurdles.

• How do you load apps in dynamically?
• How can we allow developers to interact with the operating system?
• How can we make sure that apps run securely without malicious intent?

Dynamic app loading

Inuva runs on Next.js. it is a wrapper around React.js that allows server side rendering. Next.js was chosen because of its popularity and it’s ability to interact with the server through React Server Components.

For example: the file explorer needs to read directories and has to run stat on each file to determine its mime type, isDirectory, size, name, path…

The React.js JSX syntax can be prerendered into HTML on the server and gets sent to the client. Each application loads in an iFrame. This the iFrame helps with dynamic loading. But, it has a delayed load time because the the data has to go from server → client → app server → client but it has the benefit of dynamic loading, multiple browser processes and the ability to delegate permissions to the iFrame using the sandbox attribute together with the permissionPolicy.

You can read about the technical aspects of this system here:

Parallel Routes vs iFrames · vercel next.js · Discussion #60681

Developer Interaction with the Operating System

Inuva will provide a software development kit (SDK). Which can be used in React.js systems to easily interact with the operating system. This SDK provides functions such as:

• createNotification
• animateWindow
• closeWindow
• requestPermission
• createProcess
• refreshDesktop
• relayMessage
• …

When the app is loaded dynamically through the Inuva operating system, the app automatically has access to these functions. Apps that don’t use React.js can call the underlying functions. These functions will be documentend on the Inuva developer portal.

The Future of Inuva

Three key developments are underway, promising to enhance the Inuva user experience significantly.

Standalone version

Inuva is a subscription based service because it provides 2 services:

1. Inuva OS
2. Managed server with Inuva OS and it’s extensions

Creating a standalone version would allow users to download Inuva on any server and use the lightweight (~100mb) operating system as you would on the managed subscription service. This standalone version will act more as a Microsoft Windows license. You buy the current version with minor software updates but new major releases require a new license.

A couple of cool usecases for this are:

• Self hosted home server environments; Sometimes you just want to have a nice GUI to quickly interact with the system and pull out the terminal when you need to do advanced stuff. Inuva has a minimal impact on server resources whilest adding a new dimension to the server.
• Virtual Private Server (VPS) providers; Some people are not that comfortable with the Linux terminal. When Inuva is installed on the system users can enjoy a familiar interface to manage a server. Dragging and dropping files into the file explorer works just as you’d expect.
• On the go devices; You can install Inuva on a home desktop and use differrent computers such as a library, school or office computer to securily access your personal computer.

App Store

As mentioned above, the App Store will give the users the possibility to install optional apps. Maybe you want a GUI for Nginx? You’ll probably find it in the App Store. Supporting a marketplace for developers to monetize their creations.

Video Streaming

For apps requiring native execution, Inuva will offer a streaming solution, sending video to the client while capturing input for the server. This technology could eventually enable game streaming via a web browser.