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.
OFFICIAL BENCHMARK RESULTS
Usage
yarn add faster-dom@0.0.48-alpha
index.html
<div id="timer"></div>
timer.ts
import {
Component,
FastDomNode,
createComponent,
fdObject,
fdIf,
fdValue,
} from 'faster-dom';
class Timer extends Component {
private timer: number;
protected reactive = {
counter: fdValue(0),
classOdd: fdIf(true),
}
fdObjects = {
classList: new fdObject<boolean>({
"odd": this.currentClass
}),
}
get counter () {
return this.reactive.counter;
}
get currentClass () {
return this.reactive.classOdd;
}
onInit () {
const timer = () => {
this.timer = window.setTimeout(() => {
this.counter.value += 1;
this.currentClass.value = this.counter.value % 2 === 0 ? true : false;
timer();
}, 1000);
}
timer();
}
onDestroy () {
clearTimeout(this.timer);
}
template: FastDomNode = {
tag: 'div',
classList: this.fdObjects.classList,
textValue: this.counter,
}
}
export function createTimer() {
return createComponent(Timer);
}
index.ts
import { bootstrap } from 'faster-dom';
import { createTimer } from './timer';
bootstrap('#timer', 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!
Performance
Right now directive fdFor not optimized, on each change full rerender, and this have so much effect on (swap, remove, append)
CODE OF THE TESTS
OFFICIAL BENCHMARK RESULTS
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)
- Proper types annotation
- Html transpiler
Help me please if you are interested.