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 -
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.
Some of the main features of Brahmos are-
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-
The concept of tagged template literals consists of two parts- template literal and tag function.
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.
The concurrent mode is an intriguing feature of Brahmos. Let me tell you what is so interesting about it-
“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-
Updates that are to be rendered synchronously without any pause. (like updates caused by events)
Updates that can be paused but the updated value must not change. (like updates caused by setState and don’t originate from user interaction)
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.
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'
]
}
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-
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!