Lang
Blog

Brahmos.js - A New Frontend UI Framework with React-like API

ByPayal Mittal
February 22nd . 5 min read
Brahmos.js - A New Frontend UI Framework with React-like API

Brahmos is another JavaScript UI library that strives to facilitate better web application development. There are many new concepts used here like template literals, lit-html, concurrent mode, etc. It aims to improve React’s performance by implementing its declarative APIs, hooks, context, and more.

In this blog, we’ll get to know about this library in details -

Introduction to Brahmos.js

Sudhanshu Yadav, a front-end architect at HackerRank, recently introduced a new and small JavaScript front-end framework ‘Brahmos’ for building interactive UI in web applications.

The key motivation behind it was to improve application performance. It seeks to improve React’s performance. However, it is highly inspired by the concept of lit-html/hyper-html which facilitates the division of an application into static and dynamic parts.

Yadav was most intrigued by this concept as the majority of an application consists of a static portion with only a pinch of dynamic parts that may change. He decided to create something like React with similar declarative APIs and rendering pattern, so he tried two things-

  • 👉 Firstly, he tried writing React renderer which was not possible as the React element does not differentiate between the static and dynamic elements and makes it difficult to combine multiple elements into one. It didn’t work.

  • 👉 So, the second thing he tried was to use lit-html as the rendering engine and write a React API’s wrapper above it, but React API and lit-html are not directly mappable. It also didn’t work.

Now that both the options were failed, he took a different route and decided to create a whole new library from the scratch by implementing React APIs but with a different rendering pattern.

Key Features:

Some of the main features of Brahmos are-

  • Bundle size of ~12 kb
  • React-like Declarative APIs with JSX
  • Supports concurrent mode
  • Fast alternative to Virtual DOM (JSX without VDOM)
  • Tagged template literals
  • Better application bundle performance
  • Faster rendering

Most of the front-end frameworks are using either fully-fledged render functions as React.js or templates declared in non-JavaScript files like Svelte or Vue. Brahmos, on the other hand, leverages a new concept of tagged template literals like lit-html or nanohtml.

Let’s see why there’s so much fuss about this template literal tags-

What is Tagged Template Literal?

The concept of tagged template literals consists of two parts- template literal and tag function.

  • Template literals are used to write dynamic expressions to full-extent, unlike custom templates. The template literals can easily separate static and dynamic elements and provide more control over dynamic strings.
  • A tag function is like any other function where you can pass values. However, an array of strings is passed as a parameter as the first argument and dynamic expressions as the rest arguments. The tag functions enable you to parse the template-literals as you would like.

Now, Brahmos transpile JSX into template literals, where the JSX expressions become the dynamic parts and the native elements become the static parts. This eases the process of identifying the static and dynamic parts and optimizes them separately.

Brahmos combines all the static parts as one virtual node, so the traversal becomes O(dynamic nodes) unlike O(nodes) in React, which in turn reduces the overall traversal time to find and apply changes.

Concurrent Rendering in Brahmos

The concurrent mode is an intriguing feature of Brahmos. Let me tell you what is so interesting about it-

  • To start with, it’s an experimental feature that React has worked on for many years and introduced recently but, is still pending in its official release.
  • Secondly, it’s a feature discarded by many frameworks but Brahmos.js embraced it despite the complexity.

According to Yadav -

“Considering the huge potential of concurrency, there was just too much to invest in this pattern that I could not ignore the opportunities it opens.”

Basically, concurrency means that the frameworks can work upon several updates concurrently. Brahmos supports all the features of concurrent mode including fiber architecture, transitions, time-slicing, suspense for data fetch, and suspense list.

The concurrent mode delivers optimal user experience which is what a developer works for the most part. As for the users, what they perceive is what matters the most and not how the library is working or how much time it is taking in processing.

It makes the user-interface interactive while the application is running in the background. Since this is a single-thread application, Brahmos switches between background and foreground to work on them.

Concurrent rendering enables priority updates to process first by providing declarative hints and heuristics to decide how important an update is, improving the user experience. However, working with concurrent rendering is not so easy as there are too many use cases.

Brahmos takes a different approach to tackle this problem. It divides an update into three categories, as-

  1. Updates that are to be rendered synchronously without any pause. (like updates caused by events)

  2. Updates that can be paused but the updated value must not change. (like updates caused by setState and don’t originate from user interaction)

  3. The last category includes the updates that are deferred and can be paused, delayed, and become stale. (Like updates inside transitions and async updates)

Brahmos.js allow the high-priority updates to occur directly in the foreground and maintains a list for all transitions so that every update runs smoothly without hindering the other.

How to Install?

Add brahmos as dependency and babel-plugin-brahmos as a dev dependency. You can install it directly from npm-

npm install brahmos
npm install babel-plugin-brahmos –save-dev

Now, add brahmos in your babel configuration -

{
  presets: ['@babel/preset-env'],
  plugins: [
    //...
    'brahmos'
  ]
}

Future Aspects of Brahmos.js -

Brahmos was created for the sole purpose of improving the performance of UI rendering in the browser and server. And it has succeeded in it to an extent. Nevertheless, there are some features and improvements that the team is planning to bring forth in the next release, such as-

  • To bring async rendering in server-side
  • Easier migration from React to Brahmos
  • Full support of React APIs
  • Support for server-side hydration
  • Better support for 3rd party components
  • To enable tree-shaking while supporting third-party libraries
  • Enabling server-side rendering
  • Support for React Dev Tools

Although Brahmos is smaller in size already, the team is working towards reducing it further. You can check out the talk with Sudhanshu to learn more about Brahmos.js

Stay tuned with us and subscribe to our publication for more interesting topics and blogs about the latest tech releases. Also, don’t forget to hit a clap (s) before leaving😊.

Thanks for reading!

Share:
0
+0