faster-dom

Faster Dom

Lightweight replacement of React + MobX + React Router (I hope in future Angular/Vue), which does not use the virtual DOM comparison, but the re-render of only the changed parts. Abandon the HTML template in favor of their interpretation in JS, give to us tree-shaking is components/templates and the speed of work increases since the time to parse the template is zero.

The library allows you to create quick and responsive interfaces using only JS / TS. With this you will get the minimum application size, speed and ease of development.

Usage

yarn add faster-dom@0.0.24-alpha

index.html

<div id="timer"></div>

timer.ts

import {
    Component,
    FastDomNode,
    createComponent,
    fdObject,
    fdIf,
    fdValue,
} from 'faster-dom';
// Extends your class from Component
class Timer extends Component {
    private timer: number;

    // Put here all reactive values, when component will be destroyed
    // They will be destroy automatically
    protected reactive = {
        // create reactive value
        // if you provide here object/array, you on change need always return new one, not link on previous
        counter: fdValue(0),
        // create reactive for true/false
        classOdd: fdIf(true),
    }
    // All fdObjects(for attrs/prop/classList binding) must be here for auto destroy
    fdObjects = {
        classList: new fdObject<boolean>({
            "odd": this.currentClass
        }),
    }

    // Create shortcuts, not required
    get counter () {
        return this.reactive.counter;
    }
    // Create shortcuts, not required
    get currentClass () {
        return this.reactive.classOdd;
    }

    onInit () {
        const timer = () => {
            this.timer = window.setTimeout(() => {
                this.counter.value += 1; // increase counter on '1'
                // If counter value odd then 'true'
                this.currentClass.value = this.counter.value % 2 === 0 ? true : false;
                timer();
            }, 1000);
        }

        timer();
    }

    onDestroy () {
        // Use destroy hook for clear timeout
        clearTimeout(this.timer);
    }
    // Provide template
    template: FastDomNode = {
        tag: 'div',
        // Create reactive class
        classList: this.fdObjects.classList,
        // Create reactive textValue
        textValue: this.counter,
    }
}

export function createTimer() {
    return createComponent(Timer);
}

index.ts

import { generateNode } from 'faster-dom';
import { createTimer } from './timer';

const timerContainer = document.getElementById('timer');
// create real node element from component
timerContainer.appendChild(generateNode(createTimer()));

📺 DEMO 📺 DEMO at StackBlitz

Features

• Size - 4.1 kB or 1.38 kB gzipped.
• The library rewrites only changes and only when it is necessary.
• Performance - going to guarantee 60 fps.
• Names of imported functions and classes are not finally and can be discussed.
• There is a tree-shaking for components and templates !!!.
• Router + Resolver support!

How it works

Here will be good api

Motivation

• The performance of user interaction and interface speed.
• The large size of top frameworks (Angular / React / VueJs).
• Implements the component approach of creating interfaces with optimal speed, and the least number of a possible hacks.
• The ability of support a tree-shaking in a component's templates.
• Component should be splited by a file (template/reactive/listeners).

Current Status

• The support of events.
• Lifecycle hooks onInit and onDestroy.
• The support of inputs.
• if condition and for directive.
• Reactive classes and attributes bindings.
• Supports router

TODO (contributing is appreciated)

• Reactive styles.
• Proper types annotation
• Proper routing supports.

Help me please if you are interested.