Introduction

🎨 @lirx/dom is an application design framework for the Web. It has been created to build very large and robust web applications, with unbeatable performances. Its main goal is to create great SPA.

🧩 You can create and assemble millions of components easily. It closely follows the MVC pattern, with a strict separation between HTML, CSS, and JS files. Each component is independent. Meaning: easier dependencies' management, reusable components across applications and single imports.

🚝 It is based purely on Observables. So you can compose very complex pipelines in just a few lines of code. The framework will take care to refresh only the relevant Nodes, as fast as if it was done natively.

🦸 This is your best ally when developing a web-app. Code in a more predictable way with smart data workflows, avoiding bugs, errors and inconsistent states.

🚀🚀🚀

@lirx/dom gives you many tools to write and build dynamic html templates and components with an elegant syntax. Due to its unique architecture based purely on Observables and Signals, it outperforms the typical frameworks like Angular, React, etc.

Moreover, it comes with an AOT plugin for rollup, a must-have, optimizing the components to generate small bundles, and fast applications.

It's light, fast, and simple ! Give it a try !

A quick look at what your components will look like:

HTML

app-hello-world.component.html

<div class="input-container">
  <input
    [value]="$.value"
    (input)="() => $.value.set(node.value)"
  >
</div>
<div
  class="max-length-container"
  [class.valid]="$.valid"
>
  Length: {{ $.remaining }} / 10
</div>

SCSS

app-hello-world.component.scss

:host {
  display: block;
  & > .max-length-container:not(.valid) {
    color: red;
  }
}

TS

app-hello-world.component.ts

import { signal, computed, ISignal } from '@lirx/core';
import { compileReactiveHTMLAsComponentTemplate, compileStyleAsComponentStyle, Component } from '@lirx/dom';

// @ts-ignore
import html from './app-hello-world.component.html?raw';
// @ts-ignore
import style from '.app-hello-world.component.scss?inline';

/**
 * COMPONENT: 'app-hello-world'
 */

interface ITemplateData {
  readonly input: ISignal<string>;
  readonly remaining: ISignal<number>;
  readonly valid: ISignal<boolean>;
}

export const AppHelloWorldComponent = new Component<HTMLElement, object, ITemplateData>({
  name: 'app-hello-world',
  template: compileReactiveHTMLAsComponentTemplate({ html }),
  styles: [compileStyleAsComponentStyle(style)],
  init: (node: VirtualCustomElementNode<HTMLElement, object>): ITemplateData => {
    const value = signal('');
    const remaining = computed(() => value().length);
    const valid = map$$(() => (value() <= 10));

    return {
      input,
      remaining,
      valid,
    };
  },
});

As you may notice, this framework has similarities with Angular. This is done on purpose, as we want to attract developers, without the necessity to learn a completely new language. So, if you're already an Angular developer, you may be interested: this framework brings incredible performances, with a template and style close to Angular.

Purpose of this framework

@lirx/dom tries to conciliate the best ideas, coming from different web frameworks, to create the fastest and lightest one.

To achieve its goals, it compiles the HTML templates into native javascript with direct DOM manipulation. This way, it doesn't have to use an internal differ algorithm on the properties of the components (Angular), nor iterates over a Virtual DOM and compare the resulting objects (JSX frameworks). The output is pure Javascript, and this approach permits operations executing as close as if it was written natively.

With @lirx/dom, and due to its Observable based nature, only the absolutely essential and minimal javascript is executed; with just the relevant nodes refreshed and nothing else. Thus, the DOM is updated with the precision of a surgeon, resulting in insane performances.

🤨 Another framework for web-apps ? Isn't it redundant ?

You're partially right.

@lirx/dom is done for perfectionists: using Observables introduce you to a new paradigm called Reactive Programming, which is a totally different manner of thinking your code. It's usually complex and discouraging for beginners. But coding in RP garanties robust and fast applications. Observables are very impressive and bring incredible possibilities, they just require time to be adopted and mastered.

In another hand, @lirx/dom strongly focuses on the performances of your applications. The most popular frameworks are very intuitive, but this simplicity has a cost in execution time and bundle size. This cost is usually ignored because our machines are fast enough for most cases. However, for very large applications, it becomes non-negligible, and may be a bottleneck. This library was created to handle such use-cases.

As a conclusion:

If you're not focused on performances, or doesn't aim for a large and robust application with a powerful architecture, you're probably not the target of this framework.

However, if you care and are an adventurer and perfectionist like me, it may be worth experimenting with it.