Operating systems are always complex and heavy-weighted, designed to handle demanding tasks on computing devices. However, as internet of things becomes more prevalent, interfaces and screens will be integrated into appliances, furniture, houses, and even our outfits. On the other end of the spectrum, the data storage and computing power will be more centralized, remotely accessed by millions of clients. WebOS is an operating system designed to operate inside more lightweight and portable devices to redistribute the computing power between clients and servers. With a browser kernel, any device will be able to access WebOS either as the primary operating system or as an application. Not only smart TVs, smart fridges, and digital billboards with internet access could login into your operating system on the cloud, you could also run it inside browsers on your smartphone and PCs as your online workplace.

What it does

try it out

WebOS is basically a lightweight and simplified operating system that runs inside browsers.

  • It has an user interface just like any operating system you have used. You could edit texts, manage files, upload/download resources, and develop applications inside different windows on your web page.
  • It has a file system where you can create, add, move, delete, and edit files and directories. You could also drag and drop files from your native system if you run it inside a browser. For files that cannot be handled with browser, it could work with Google Drive to upload, store and view documents of different types.
  • It enables you to develop online with code editors and run your code as embedded html apps inside iframe windows. You could "install" apps inside your system and share them with others.
  • It has native system applications such as clock/alarm, notes, settings and more to help you with your tasks.
  • It has a command line interface to help you navigate the file system without the user interface. It supports some simple linux commands (ls, cd, rm) with some variations.

How we built it

For the frontend, I used React to build the user interface and vanilla JavaScript for file system and system APIs. To enable communications between iframes and WebOS, I used postMessage API to handle system API calls from embedded applications. I also used third party libraries such as codemirror for the online code editor. To handle files with different extensions and formats, I used Google Drive API to upload files, get preview links, and delete files.

For the backend, I used node.js with express for handling requests and mongoDB with mongoose for data storage. File systems are stored as byte strings in mongoDB along with user information, extra user data, and public applications in different collections. Cookies are used for persistent user connection and data integrity checks are executed at each data retrieval.

Challenges we ran into

The challenging part of this project is handling the operating system in the frontend. The biggest challenge is to design and realize the file system with a tree structure, and build a set of APIs to manage the file system. I create two JS classes and a set of plugin functions to separate it from React and the user interface. I was also stuck at how to manage updates to file system when the user changes it. I resolved it with an array of callback functions that need be executed when certain user behaviors are observed. Moreover, I encountered some issues with React regarding its updating mechanisms with 'key' property, which I found a workaround to make it work, but I am still locating its root causes. I was also stuck at the useCallback hook for its closure and data reference problems and ended up currying the whole function. For the cross iframes communications, I spent a lot time and ended up using postMessage API from the browser. There are numerous other challenges in handling the dragging, resizing, and recovering of windows. For the backend part, I spent a lot of efforts on the user authentication with cookies and its updating mechanism. I ran into the problem of storing file system and indexing its files, which I resolved with a hash table.

Accomplishments that we're proud of

I am proud of the user interfaces that I built such as code editors, file editors, clock, windows, command line interface and more. I am also proud of the operating system built with JavaScript in parallel with the user interface and empower it with a set of system APIs to trigger at user interactions.

What we learned

  • I've learnt many native functions of the browser that I have never encountered before in web development.
  • I've learned how to build a file system as a tree and how to parse command line in JavaScript.
  • I've learnt to use Google Drive APIs and use it inside the WebOS to extends its functions.
  • I've also learnt to use mongoDB and mongoose to store and retrieve data on the cloud.

What's next for WebOS

  • Support for multi-user interactions within one system
  • Support for more command line tools and functions
  • Develop native video/audio application
Share this project: