# 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
Latest version **0.0.48-alpha** (published 2019-04-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install faster-dom
pnpm add faster-dom
yarn add faster-dom
bun add faster-dom
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.48-alpha |
| Published | 2019-04-26 |
| First published | 2019-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Iurii Panarin |
| Maintainers | pxyup |
| Keywords | dom, fast, performance, reactive, virtual, js, class |
## Links
- npm: https://www.npmjs.com/package/faster-dom
- Repository: https://github.com/PxyUp/test
- Homepage: https://github.com/PxyUp/test#readme
- Issues: https://github.com/PxyUp/test/issues
- npm.io page: https://npm.io/package/faster-dom
## Alternatives
- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads
## Recent versions
- 0.0.48-alpha (latest) — 2019-04-26
- 0.0.47-alpha — 2019-04-25
- 0.0.46-alpha — 2019-04-25
- 0.0.45-alpha — 2019-04-25
- 0.0.44-alpha — 2019-04-25
- 0.0.43-alpha — 2019-04-15
- 0.0.42-alpha — 2019-04-14
- 0.0.41-alpha — 2019-04-14
- 0.0.40-alpha — 2019-04-13
- 0.0.39-alpha — 2019-04-04
- 0.0.38-alpha — 2019-04-04
- 0.0.37-alpha — 2019-04-03
- 0.0.36-alpha — 2019-04-03
- 0.0.35-alpha — 2019-04-03
- 0.0.34-alpha — 2019-04-02
- … 34 more at https://npm.io/package/faster-dom/versions
## README
# Faster Dom  [](https://circleci.com/gh/PxyUp/FastDom/tree/master)
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](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html)**
## Usage
```sh
yarn add faster-dom@0.0.48-alpha
```
*index.html*
```html
```
*timer.ts*
```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({
"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*
```ts
import { bootstrap } from 'faster-dom';
import { createTimer } from './timer';
bootstrap('#timer', createTimer);
```
**[📺 DEMO](https://pxyup.github.io/FastDom/)**
**[📺 DEMO at StackBlitz](https://stackblitz.com/edit/typescript-wgjbzf)**
## Features
1. Size - **4.1 kB** or **1.38 kB** gzipped.
2. The library rewrites only changes and only when it is necessary.
3. Performance - **going to guarantee 60 fps**.
4. Names of imported functions and classes are not finally and *can be discussed*.
5. There is **a tree-shaking for components and templates !!!**.
6. **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](https://github.com/PxyUp/js-framework-benchmark/pull/1/files)**
**[OFFICIAL BENCHMARK RESULTS](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html)**
## How it works
> Here will be good api
### Motivation
1. The performance of user interaction and interface speed.
2. The large size of top frameworks (Angular / React / VueJs).
3. Implements the component approach of creating interfaces with optimal speed, and the least number of a possible hacks.
4. The ability of support a tree-shaking in a component's templates.
5. Component should be splited by a file (template/reactive/listeners).
### Current Status
1. The support of events.
2. Lifecycle hooks `onInit` and `onDestroy`.
3. The support of inputs.
4. `if` condition and `for` directive.
5. Reactive classes and attributes bindings.
6. Supports router
### TODO (contributing is appreciated)
1. Proper types annotation
2. Html transpiler
> Help me please if you are interested.
---
_Source: https://npm.io/package/faster-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._