Composi

Make Component-Based Interfaces

Star

This version of Composi is no longer in development. We have moved everything related to Composi into its own namespace on NPM (@composi/core) and its own dedicated group on Github: composi. As such there is a new website for @composi/core: composi.github.io

Modular

Create simple components and combine them into more complex ones. The virtual DOM takes care of efficiently updating the HTML when a component's state changes.

Composi is small, only 3KB. You can use it with Lodash, Ramda, Bootstrap, Material Design Lite, Redux, Mobx, etc.

Declarative

Define your component markup with JSX, or Hyperscript, or ES6 template literals.

Everything is just JavaScript. You can use JavaScript expressions inside your component code.

No need for special markup syntax for templates. Use standard JavaScript for everything.

Reusable

Because components encapsulate their behavior and properties, you can reuse them throughout your application, and even in other applications.

Render default HTML on the server and bring everything to life at load time with Composi. Use whatever backend you want. Your frontend can stay the same.


A Simple Component

Componets use a render function. This takes data and returns the HTML to create. The render function expects a name to render. We pass that to the component through its update method.

Update with a name trigger's the virtual DOM, which then patches the document.

See the Pen Composi Front Page-1 by Robert Biggs (@rbiggs) on CodePen.

A Stateful Component

Beside passing data to a component through its update method, we can make a component stateful. When we do this, whenever the component's state changes, the component will automatically invoke its update method with the new data.

We've put a guard in the tick method to stop after 30 seconds. We use the lifecycle method componentWasCreated to start the tick method.

See the Pen Composi Front Page-2 by Robert Biggs (@rbiggs) on CodePen.

A Todo List

Here we put together a todo list. We give the component state and pass down that state to child components as props in curly braces.

Inline events handle user interactions. All todos are saved to localStorage. On reloads, the saved items are used.

This is available on Github for download.

See the Pen Composi Todo List by Robert Biggs (@rbiggs) on CodePen.

A Calculator

Here is a simple calculator. The parent component manages events for all the subcomponents through the handleEvent interface. This component has many custom methods for handling all the Math computations, etc.

This is available on Github for download.

See the Pen Mac Calculator by Robert Biggs (@rbiggs) on CodePen.

An Image Browser with Popup

An image viewer. It grabs images from Flickr. You can click on an image to get a closer look. Clicking again will close it.

This is available on Github for download.

See the Pen Composi Image Browser by Robert Biggs (@rbiggs) on CodePen.

SVG Animation

Here we're using D3 to animate a Pythagoras tree using Composi's virtual DOM to update the SVG in real time. Move the cursor over the panel, or move your finger on mobile devices. As you do so, upto 2,000 rectanges will be created and destroyed based on the cursor position. This shows how efficient Composi's virtual DOM is.

You can use many third-party libraries and frameworks with Composi, such a Redux, Mobx, RxJS, Lodash, Bootstrap, Material Design Lite, etc.

This is available on Github for download.

See the Pen Pythagoras Dancing Tree-Functional by Robert Biggs (@rbiggs) on CodePen.

Dynamic Counters

This is a single stateful component that generates keyed couters. This is similar to how the todo app is implemented above. Each counter occupies a keyed list item. This makes it more efficient for deleting random counters from the list.

Each counter has the events and functionality it needs to act like an independent component. In reality they are just part of a larger, all-encomposing component.

We're also using the Fragment tag to generate a group of sibling elements--the buttons that constitute the counter.

See the Pen Dynamic Counters by Robert Biggs ( @rbiggs) on CodePen.