diff --git a/README.md b/README.md index da50c5e..6ff9823 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,40 @@ # Snabbdom -A virtual DOM library. Lighter, better, faster, simpler! +A virtual DOM library with focus on simplicity, modularity, powerful features +and performance. + +# Introduction + +Snabbdom consists of an extremely simple, performant and extensible core that +is only ≈ 200 SLOC. It offers a modular architecture with rich functionality +for extensions through custom modules. To keep the core simple all non-esential +functionality is delegated to modules. + +You can mold Snabbdom into whatever you want! Pick, choose and customize the +functionality that you want. Alternatively you can just use the default +extensions and get a virtual DOM library with high performance, small size and +powerful features. # Features -* Simplicity. The core is less than 200 SLOC -* Completely modular and extensible architecture. You can mold Snabbdom into - whatever you want. -* Performance. (yet unpublished) results from the vdom benchmarks show that - Snabbdom is among the fastest virtual DOM libraries. -* Provides the necessary features for doing complex animations. -* Patch function with a signature like a typical reduce/scan function. For - easier integration with a FRP library. -* A powerful set of hooks into the diffing and patching process. _WIP_. +* *Core features* + * About 200 SLOC – you could easily read through the entire core and fully + understand how it works + * Modules can hook into any part of the diff and patch process + * Extendable through modules + * Splendid performance. Snabbdom is among the fastest virtual DOM libraries + in the vdom benchmarks. + * Provides the necessary features for doing complex animations. + * Patch function with a function signature equivelant to a reduce/scan + function. Allows for easier integration with a FRP library. +* *The style module* +* *Event listeners* + * Typical attachment of function to an event + * Attach listeners function along with value passed to listener +* *The hero animation module* +* *Misc* + * Thunks. To optimize the diff and patch process even further -# Usage +# Example ```javascript var snabbdom = require('snabbdom'); @@ -29,14 +50,15 @@ var vnode = h('div#id.two.classes', {on: {click: someFn}}, [ ' and this is just normal text', h('a', {props: {href: '/foo'}, 'I\'ll take you places!'}) ]); -var c = document.getElementById('container'); +var container = document.getElementById('container'); // Patch into empty VNode – this modifies the DOM as a side effect -patch(snabbdom.emptyVNodeAt(c), h); +patch(container, vnode); ``` # Examples * [Animated reordering of elements](http://paldepind.github.io/snabbdom/examples/reorder-animation/) +* [Hero transitions](http://paldepind.github.io/snabbdom/examples/hero/) # Core modules