Repository files navigation

A Javascript library to write reactive user interface for the web under 350 lines of code.

No JSX, no templating, no virtual DOM, no compiler, just a simple way to write UI components using Javascript.

Bau is reactive, data mutation drives the various views binded to this data. When the data is modified, the mutation is intercepted via carefully crafted Javascript proxies, and the DOM is updated accordingly.

In addition to this core library, a set of others has been released to provide a full ecosystem:

• bau-css: a CSS in JS library in 33 lines of code.
• bau-ui: a 50+ set of themable components such as Button, Input, Tabs, Tree View, Modal, etc...
• bau-router: a router with nested route, asynchronous loading, layout. Under 0.6kB
• bau-kit: a Multi Page App starter kit, all of these features packed under 5KB, a20X decreased compared to the combo React/Redux/React Router/Style Component.
• bausaurus: A Static Site Generator (SSG) from Markdown content.
• bau-astro: Bau integration forAstro, allowing to leverage the SSR implementation provided by Astro.

Let's compare the bundle sizes thanks tobundlephobia:

Bau aims to be easy to use and its API surface consits of few functions:tags,state,loop, andderive

// main.js// Import the libraryimportBaufrom"@grucloud/bau";// Instantiate the libraryconstbau=Bau();// Destructure any html tags used to describe the componentconst{ button, span}=bau.tags;// Create a state containing an integerconstcounter=bau.state(0);// Create a component defined by a function that return a real DOM node.functionCounter(){returnspan("❤️ ",counter," ",button({onclick:()=>++counter.val},"👍"),button({onclick:()=>--counter.val},"👎"));}// Your html file must contain an element with the id "app"document.getElementById("app").replaceChildren(Counter());

Install the dependencies:

npm install @grucloud/bau

Have a look at theexamples directory to find out how to use this library.

Check out the minimalistichello world example on CodeSanbox

• Component pattern
• Reactivity with bau.state
• Event Handling
• Conditional Rendering
• Lifecycle Methods: bauCreated, bauMounted, bauUnmounted
• Create a state array and display views
• State Derivation and Side Effects
• Hash based router

Bau has been benchmarked against other thanks to the projectjs-framework-benchmark,It scores very well on most use cases, see prelimanary resultshere

The Chrome Lighthouse perfomance tool reports an overall 100% score even for an app built with all Bau UI components.

The Bau ecosystem exports Typescript definition files allowing to improve the Developer's eXperience. Enjoy the code completion with VS Code or your favorite IDE, which is obviously VS Code.

Please report bugs and suggestions tohttps://github.com/grucloud/bau

Bau is mostly inspired byvan.js, with the following differences:

• Van.js only support primitive value as state, Bau state management also supports array and object.
• Bau supports lifecycle methods such asbauCreated,bauMounted andbauUnmounted
• Bau does not use a global variable, multiple instances of Bau could eventually be created.

importBaufrom"@grucloud/bau";constbau=Bau();const{ div}=bau.tags;

• Bau reactive functions can return an array of elements, the equivalent of a React Fragment.
• Bau promotes only one paradigm: views derive from the state. Van could mix paradigms, imperative and state derived view. The imperative way is when your code directly maniplates the DOM, in the same way as vanilla js and jquery. This style of programming is error prone, therefore, preventing its use makes bauhard to misuse
• Bau supports undefined or null attribute, seeissue 39