Home

Onejs architecture follows both Proactive & Reactive design principles.

A GUI based application is made out of multiple pages. We can consider the pages are a high level entity of these applications.

We can further divide a page into two parts.

1. OnSceeen Content
2. OffScreen Content

An OnScreen Content is a collection of atomic UI components that need to be visible as soon as page loads. In other words, we can also call it Above the fold content.

An OffScreen Content is a collection of atomic UI components that need to be loaded only when it's requested by the end-user. Below the fold, content comes into this category.

Proactive & Reactive design principles to be used to implement these components further. OnScreen content to be proactively created and preferably server-side rendered. While OffScreen content to be reactively loaded on demand. For example, below the fold content to be rendered only when the user scrolls down the page page.

Tools such as serviceworker can be used to precache the resource required to optimize OffScreen content.

Further Server push, new content compression type such as brotli, browser preload, pre-connect, prefetch can be used to optimize OnScreen content.

You would never appreciate a shopkeeper if he adds an extra item in your bag and asks you to pay for it. Similarily as a developer, you should never download an extra byte that the user did not ask for.