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.