Announcing: compo
Tags: uilibrary, javascript, webdev, composingwebcompon
Published: 2019-08-23 07:42:04

---
title: Announcing: compo
published: true
tags: ui-library,javascript,web-development,composing-web-compon
canonical_url: https://medium.com/hackernoon/announcing-compo-3ba9e15890a7
---

#### 🎼 Compo·sing Web Compo·nents

[**compo**](https://github.com/Swiip/compo) is a new [JavaScript](https://hackernoon.com/tagged/javascript) Web UI library based on pure Web Components providing a modern [API](https://hackernoon.com/tagged/api) using function composition to easily define and enrich them.

Yes! It’s yet another new JavaScript Web UI library! Sorry for the “JavaScript fatigue” people still I thought there was some good ideas in this project and it deserved to be at least published.

### Inspiration

It’s inspired by many populars library such [React](https://reactjs.org/), [Redux](https://redux.js.org/), [Recompose](https://github.com/acdlite/recompose) or [styled-components](https://www.styled-components.com/), applying the modern concepts and API to the Custom Element standard.

The **Virtual Dom** concept introduced by **React** some time ago has been used to free the user to manage DOM transitions. The concept can be applied to standard Web Component world, each component diffs its template evaluation to the own Shadow DOM.

**Recompose** introduced a full function composition API allowing to enhance a component feature by feature as needed. Once again it could perfectly match Custom Elements by extending the definition class with the features needed.

Finally, using CSS in JS with **styled-components** for a while pushes to consider CSS as an integrant part of a UI library and treat it the same way as the markup. Shadow DOM CSS scoping does perfectly the job.

### **API**

What I regret in all the previous inspirations was the complexity of using a lot of different libraries to finally get a strange monster full of good ideas but with complex non homogeneous APIs.

So **compo** is a fully featured library presenting a single coherent API to manage all aspects of a component: state management, markup, style.

As said in the title, the chosen interface is function composition. You define a component with the **component** function, first parameter for the name, all others for enhancing functions like **withStore** , **withMarkup** or **withStyle**.

{% gist https://gist.github.com/Swiip/7d1f40dc97b766c11c2a0a3be02ec365 %}

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fyv5y14o6pj&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fyv5y14o6pj&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fyv5y14o6pj%2Fscreenshot.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codesandbox" width="1000" height="500" frameborder="0" scrolling="no"><a href="https://medium.com/media/b94188706ea7aad038c8bfc2f7524bdb/href">https://medium.com/media/b94188706ea7aad038c8bfc2f7524bdb/href</a></iframe>
### Standards

The whole process was driven by minimalism for both simplicity and bundle weight. What’s best for minimalism than taking as much as you can from your browser directly?

The point of **compo** is to present a powerful API by doing the less possible using as much as possible the standards. As such, it’s heavily built upon Custom Elements, Shadow DOM, ES2015 template strings. Even the Virtual DOM parser is in reality the native browser DOM parser.

Also, one of the guidelines was to use the power of new browsers. Not to ignore Web history or compatibility but to imagine what could be modern APIs without limitations. For example, **compo** is not (at all) transpiled. It’s written and published in modern ES2017. In fact, it works already in the vast majority of browsers and everyone can transpile it in its application if needed.

### Ambitions

**compo** is not yet, production ready. To be honest, it only really works on Chrome out of the box and Firefox with a flag. There is a compatibility example using Web Component polyfills to use it on every browsers.

In terms of performances, concepts should not be blocking but at this point don’t try aggressive benchmarks compared to an industry framework, it could not end up well. Still it’s powerful enough to build “standard size” application without have real issues.

To be perfectly honest, **compo** is also some kind of child dream. “I published my own JavaScript library 😃”. We’ll see how far it goes but I do think there is some good stuff in the library. If it only influence a bit the community, it will already be a huge success.

<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fdde502%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fhackernoon%2F&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0" scrolling="no"><a href="https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href">https://medium.com/media/3c851dac986ab6dbb2d1aaa91205a8eb/href</a></iframe>
* * *