Template literals are mostly found in vue js, but this library makes \r\nit possible that you can use template literals in your react app. 
 
It\r\n has the same declarative API like React, but instead of working with \r\nVirtual DOM, it uses tagged template literals and HTML's template tag \r\nfor faster rendering and updates.

The most interesting part that got me excited.

It\r\n divides the HTML to be rendered into static and dynamic parts, and in \r\nnext render, it has to compare the values of only dynamic parts and \r\napply the changes optimally to the connected DOM.

It's unlike the\r\n VDOM which compares the whole last rendered VDOM to the new VDOM (which\r\n has both static and dynamic parts) to derive the optimal changes that \r\nare required on the actual DOM.

This is a game changer, and the speed is compared to that of nextjs, even the developer has to code on well JSX.

The babel-plugin-brahmos transforms JSX into tagged template literals which are optimized for render/updates and the output size.

Check this two examples out, one with the virtual dom, which will be transformed to template literalls.

class TodoList extends Component {
  state = { todos: [], text: '' };
  setText = (e) => {
    this.setState({ text: e.target.value });
  };
  addTodo = () => {
    let { todos, text } = this.state;
    this.setState({
      todos: todos.concat(text),
      text: '',
    });
  };
  render() {
    const { todos, text } = this.state;
    return (
      <form className=\"todo-form\" onSubmit={this.addTodo} action=\"javascript:\">
        <input value={text} onChange={this.setText} />
        <button type=\"submit\">Add</button>
        <ul className=\"todo-list\">
          {todos.map((todo) => (
            <li className=\"todo-item\">{todo}</li>
          ))}
        </ul>
      </form>
    );
  }
}

The transformation

class TodoList extends Component {
  state = { todos: [], text: '' };
  setText = (e) => {
    this.setState({ text: e.target.value });
  };
  addTodo = () => {
    let { todos, text } = this.state;
    this.setState({
      todos: todos.concat(text),
      text: '',
    });
  };
  render() {
    const { todos, text } = this.state;
    return html`
      <form class=\"todo-form\" ${{ onSubmit: this.addTodo }} action=\"javascript:\">
        <input ${{ value: text }} ${{ onChange: this.setText }} />
        <button type=\"submit\">Add</button>
        <ul class=\"todo-list\">
          ${todos.map((todo) =>
            html`
              <li class=\"todo-item\">${todo}</li>
            `(),
          )}
        </ul>
      </form>
    `;
  }
}

With\r\n the tagged template literal we get a clear separating of the static and\r\n dynamic part. And on updates it needs to apply changes only on the \r\nchanged dynamic parts.

How to setup a Brahmos UI app.

Step 1: install the brahmos library globally

npm install -g create-brahmos-app

Scaffold a new brahmos app

create-brahmos-app my-brahmos-app

Start the app

npm start

Build the app

npm run build

Eject the app

npm run eject

Here is a demo