Hello world

Basis.js uses DOM concept to build interface. Each view or component and their parts is a UI node which has a xhtml-like template with markup.

Here is the simplest app that adds single UI node to document body. Note that you can modify the source code of example and see the effect at the right.

Loose coupling

Usually templates store outside of JavaScript in separate files. View knows nothing about its markup. Template nothing know about component using it.

UI nodes provides a value list they can compute (bindings) and a command list they can handle (actions). Templates use values and link DOM events with actions.

Simple ToDo app

Data abstractions like Object (model) and Dataset (collection) helps avoid direct node hierarchy transformation and build user interface according to data and its state.

Moving markup outside JavaScript makes it clean. Also templates in separate files can include other templates and styles by relative paths, can isolate CSS styles out of the box (look at app’s DOM – all CSS classes are prefixed), and support live update for templates and styles (try to change *.tmpl or *.css files).

Data flow

Basis.js uses FRP concepts that simplify logic description and data synchronization. Doesn’t matter how complicated you dependencies – frameworks tools can untwist reactive value dependency graph.

Try yourself – write some code and see how does it work under the hood.