Overview

1. What is uiloos

"uiloos" can best be described as a "Headless JavaScript / TypeScript Component Library".

"uiloos" is a headless component framework because it does not contain any HTML or CSS, it only contains behavior. This gives you the developer / designer complete control over the graphical design of the website / application / game.

The idea for "uiloos" came when we had the following realization: across many websites / applications we are re-implementing the same behaviors over and over again. Just with a new look and feel.

Surely there must be a better way of doing things?

We think the answer is "uiloos".

2. When to use uiloos

You might want to use uiloos when when you find yourself in the following situation:

You need complete control over the design / appearance of the website and you do not want to sacrifice on the design one bit.

When you are put into this situation using third party components is often out of the question. Some third party components cannot be re-skinned to fit your design, or they can only be re-skinned partially which can look awkward.

At this point you are forced to write you own code / behaviors. This is where "uiloos" can accelerate you greatly by providing these behaviors.

3. Components

At this moment uiloos provides the following components:

Take a look at our future plans to see what is coming next in uiloos.

4. Usage

There are two main ways of using uiloos:

4.1 Using Vanilla JavaScript / TypeScript

When using vanilla JavaScript or TypeScript you will be responsible for manipulating the DOM based on the events that occur.

All uiloos components can be observed, this means that you can subscribe to changes of the component. Whenever the component changes you will receive an event in the subscriber.

When an event occurs you must then synchronize with the DOM. This means altering the DOM so it represents the new state. You might add a CSS class to an element, remove elements, add elements or change an elements text.

For example when using the ActiveList one event that exist is called the "ACTIVATED" event. When this event occurs you might add an .active CSS class, to the element which became active.

4.2 With a reactive framework

With a reactive framework such as Svelte, React, Vue, Angular etc etc. Manually performing the DOM manipulation is not necessary, as your framework of choice will handle the DOM manipulation for you.

uiloos works nicely with reactive frameworks because reactive frameworks are good at detecting changes in JavaScript state. State being arrays, objects and variables. Whenever the state changes the frameworks re-render. Since uiloos provides only "state" in the form of objects they work nicely together.

uiloos does however provide bindings for React, Vue, Svelte, Alpine, and Angular. With these bindings using uiloos with a framework becomes easier. For example the React bindings provides various hooks, and the vue bindings provides various composables.