Mini Reactive JS

Outline

There are tons of reactive libraries out there, REACT, VUE, Angular, etc... And while they are great, I always felt like they were too big for what I needed. So I decided to make my own mini-reactive JavaScript Library!
- Note: This is a very simple reactive library that I made for my own personal use. It is not meant to be a replacement for any of the other libraries out there, but rather a simple alternative for those who want something small yet still gets the job done.

Source Code: GitHub

Getting Started

Installation

<script src="https://cdn.jsdelivr.net/gh/IsaacLehman/mini-reactive-js/mini-reactive.js"></script>

That will give you access to the two classes that you need to get started. The Module class and the Component class.

Module

The Module class is the main class that you will be using. It is the container for all of your components. It is also the class that you will use to add components to the DOM.

const app = new Module('#app');

The constructor takes one argument, the selector for the element that you want to add the module to.

Component

The Component class is the class that you will use to create your components. It takes three arguments, the template, the initial state, and the event listeners.

const component = new Component(template, state, event_listeners);

Template

The template is a string that contains the HTML for your component. It can also contain placeholders for the state variables. The placeholders are in the form of {{variable_name}}.

const template = '<h1>{{title}}</h1> <p>{{text}}</p>';

Once rendered, variables are wrapped in special span tags that allow the library to update the values when the state changes without having to re-render the entire component.

For some elements, this doesn't work. An example is the src attribute for an img tag. In this case, you can triple-wrap the variable in {}. This will tell the library to use the value of the variable as the value of the attribute instead of the text content of the element.

const template = '<img src="{{{image_url}}}" alt="Image">';

State

The state is an object that contains the initial values for the variables in the template.

const state = {
    title: 'Title',
    text: 'Text'
};

Event Listeners

The event listeners are an array of objects that contain the event name and the event handler. The event handler is a function that takes two arguments, the event and the state. The event handler should return an object that contains the new values for the state variables.

const event_listeners = [
    {
        name: 'click', // Event Name
        handler: (event, state) => { // Event Handler
            return {
                title: 'New Title',
                text: 'New Text'
            };
        }
    }
];

Adding Components

Once you have created your components, you can add them to the module using the addComponents method. This method takes an array of components as an argument.

app.addComponents([component]);

Full Example

// Create a new module
const app = new Module('#app');

// Create a list of components dynamically
// =======================================

// Create a template
let general_template = '<h1>{{title}}</h1> <p>{{text}}</p> <input type="text" placeholder="Enter Text..."> <button>{{button_text}}</button>';

// Set the initial state
let general_state = {
    title: 'Title',
    text: 'Text',
    button_text: 'Button'
};

// Create a list of event listeners
let general_event_listeners = [
    {
        name: 'click', // Event Name
        handler: (event, state) => { // Event Handler
            // Check if the button was clicked
            console.log(event.target);
            if (event.target.tagName.toLowerCase() === 'button' || event.target.parentElement.tagName.toLowerCase() === 'button') {
                return {
                    title: 'Text Cleared!',
                    text: 'Enter something new...',
                    button_text: 'Nothing to clear...'
                };
            }
        }
    },
    {
        name: 'input', // Event Name
        handler: (event, state) => { // Event Handler
            return {
                title: 'Entering Text...',
                text: event.target.value,
                button_text: 'Clear Text'
            };
        }
    }
];

// Create a list of components
const components = [
    new Component(
        general_template,
        general_state,
        general_event_listeners
    ),
    new Component(
        general_template,
        general_state,
        general_event_listeners
    ),
    new Component(
        general_template,
        general_state,
        general_event_listeners
    ),
    new Component(
        general_template,
        general_state,
        general_event_listeners
    )
];

// Add the components to the module
app.addComponents(components);

Conclusion

This super simple, reactive library demonstrates how easy reactivity can be! Full-fledged libraries like REACT and VUE are great, but sometimes you just need something small and simple to get the job done. One other benefit is the lack of a "black box". At only 121 lines long (including comments and whitespace), this library is easy to understand and modify :)

Happy Coding!