Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dfilatov/vidom
Library to build UI based on virtual DOM
https://github.com/dfilatov/vidom
isomorphism javascript jsx react reactive server-side-rendering ui vidom virtual-dom
Last synced: 24 days ago
JSON representation
Library to build UI based on virtual DOM
- Host: GitHub
- URL: https://github.com/dfilatov/vidom
- Owner: dfilatov
- License: mit
- Created: 2014-05-16T15:39:04.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2022-02-17T17:58:02.000Z (over 2 years ago)
- Last Synced: 2024-09-29T06:41:08.939Z (about 1 month ago)
- Topics: isomorphism, javascript, jsx, react, reactive, server-side-rendering, ui, vidom, virtual-dom
- Language: JavaScript
- Homepage:
- Size: 3.04 MB
- Stars: 415
- Watchers: 27
- Forks: 16
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vidom
[](https://travis-ci.org/dfilatov/vidom/branches)
[](https://www.npmjs.com/package/vidom)
[](https://david-dm.org/dfilatov/vidom)
[](https://www.npmjs.org/package/vidom)
Vidom is just a library to build UI. It's highly inspired from [React](https://facebook.github.io/react/) and based on the same ideas. Its main goal is to provide as fast as possible lightweight implementation with API similar to React.
## Main features
* Fast virtual DOM builder and patcher under the hood
* Update batching and synchronization with browsers rendering lifecycle by default
* Fast server-side rendering with ability to reuse existing DOM in the browsers also known as isomorphism
* Easy and clear way to subscribe to DOM Events
* API to build your own high-level components
* Namespaces support (e.g., SVG, MathML)
* Ability to render multiple components without unwanted DOM wrappers
* No extra markup in the result HTML
* JSX support via [babel plugin](https://github.com/dfilatov/babel-plugin-vidom-jsx)
* TypeScript support
* Small footprint, 9KB after gzip
* Zero dependencies
## Benchmarks
* [repaint rate challenge](http://mathieuancelin.github.io/js-repaint-perfs/)
* [vdom-benchmark](http://vdom-benchmark.github.io/vdom-benchmark/)
* [uibench](https://localvoid.github.io/uibench/)
* server-side rendering (nodejs 8.8.1)
```
mean time ops/sec
vidom v0.9.23 0.505ms 1981
inferno v3.10.1 0.511ms 1958
preact v8.2.6 1.414ms 707
react v16.0.0 1.479ms 676
vue v2.5.2 8.883ms 113
```
## Playground
Try [live playground](http://dfilatov.github.io/vidom/playground/) to play with Vidom in your browser.
## Documentation
* [Getting started](../../wiki/Getting-started)
* [Tutorial](../../wiki/Tutorial)
* [Top-level API](../../wiki/Top-Level-API)
* [DOM Events API](../../wiki/DOM-Events-API)
* [Component properties](../../wiki/Component-properties)
* [Component lifecycle](../../wiki/Component-lifecycle)
* [Component methods](../../wiki/Component-methods)
* [Function component](../../wiki/Function-Component)
* [JSX](../../wiki/JSX)
* [Isomorphism](../../wiki/Isomorphism)
* [FAQ](../../wiki/FAQ)
* [Changelog](../../releases)
## Tools
* [Vidom inspector](https://github.com/dfilatov/vidom-inspector) developer tool which helps debug vidom-based applications
## Addons
* [vidom-css-animation-group](https://github.com/dfilatov/vidom-css-animation-group) API for "appearance", "entering" and "leaving" animation via CSS transitions and animation
* [vidom-ui](https://dfilatov.github.io/vidom-ui/) Set of basic UI components
* [vidom-redux](https://github.com/dfilatov/vidom-redux) Redux bindings
## Examples
* [TodoMVC](http://dfilatov.github.io/vidom-todomvc/) ([source](https://github.com/dfilatov/vidom-todomvc))
## Thanks
* [cdnjs](https://github.com/cdnjs/cdnjs) for library is avalaible on CDN.