About

Composi is the gradual evolution of front-end development since 2007. Its genesis was in the library ChocolateChip-UI. As an experiment, we took the component API from ChocolateChip-UI and combined it with a small and fast virtual DOM. The result was Composi. Because of the virtual DOM, when you change the state or data that a component uses, it updates automatically.

Composi is Small

Although only 3KB, Composi includes everything you need to create complex components. The Composi virtual DOM code is less that 1KB. It will only update the parts of the DOM that do not match the current state of a component. If you try to render a component with the same data again, no update will occur.

Composi Works Well with Others

Composi was designed to be used with other libraries. You can use Lodash, Ramda, Boostrap, Material Design Lite, Redux, Mobx and other third party libraries with Composi. You can also use jQuery plugins in the same document. You cannot use jQuery on a Composi component. You can use any pubsub library to implement communication between jQuery plugins and Composi components.

Similar to React

Composi shares some features and many development patterns with React, Preact and Inferno. All have a Component class and a virtual DOM. However, Composi is not a React clone. Internally it works quite differently. Most of the similarities arrise from the use of JSX. Composi's Component class shares some naming conventions with React.Component. Both have a render function, which works basically the same. It takes some data and returns some markup that gets converted into a virtual node. With React and friends, you pass a component class definition to the render function along with an elemement in which you want to insert it. This is completely unnecessary with Composi components. Instead you define a container property directly in the component definition.

Lifecycle Methods

All of these have lifecycle methods. The React family generally has the following ones:

• componentWillMount()
• componentDidMount()
• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()

In contrast, Composi has only the following:

• componentWillMout()
• componentDidMount()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()

Composi's componentWillMount is the same as React's componentWillMount. Composi's componentDidMount is like React's componentDidMount. Composi's componentWillUpdate is the same as React's componentWillUpdate. Composi's componentDidUpdate is the same as React's componentDidUpdate. Composi's componentWillUnmount is the same as React's componentWillUnmount.

React has ReactDOM.render. Preact has render. Inferno has Inferno.render. And Composi has render. Although all of these use the same name, Composi's implementation is different. All of them can take JSX tags, functional components, and use them to patch the DOM. However, the React family expects you to pass class components into this as well in order to render them. This is not necessary with Composi components since they encapsulate the container they should render in and state assign automatically triggers rending of a component in the DOM.

Class Component

Here's an example of extending the React component class. To render the component we pass it as a tag to the ReactDOM.render function, along with a query for the selector #root:

See the Pen React About by Robert Biggs (@rbiggs) on CodePen.

And here's the same example using a Composi class component. Notice that we provide the container selector #root in the call signature for the component instance. And no need to render. We just create a new instance. That will trigger the render.

See the Pen Composi-About by Robert Biggs (@rbiggs) on CodePen.

The main different here is that Composi requires the use of the new keyword.

Similar But Different

So, in short Composi and React are similar. But in the details they are different. If you've used React, Preact or Inferno, you should be comfortable using Composi in an hour. If you're coming from Angular or Vue, it might take two hours.