Beedle

Beedle is a tiny library to help you manage state across your application. Inspired by great libraries like Vuex and Redux, Beedle creates a central store that enables you predictably control and cascade state across your application.

This library was initially created as a prototype for this article on CSS-Tricks, where you learn how to build a state management system from scratch with Vanilla JavaScript.

See the documentation See the project structure

Demos

• Basic demo
• Advanced demo
• Vue JS demo
• React JS demo

How it works

Beedle creates a pattern where a single source of truth, the 'Application State' cascades state across your app in a predictable fashion. To modify state, a set flow of actions and mutations help create a traceable data-flow that makes things a little easier to debug.

Using a Pub/Sub pattern which notifies anything that is subscribed to changes, a fully reactive front-end can be achieved with a few kilobytes of vanilla JavaScript.

As the diagram above shows, a simple, predictable flow is created by pushing data into an action which subsequently calls one or more mutations. Only the mutation can modify state, which helps with keeping track of changes.

Continue reading the documentation

A mini library for small projects

Beedle is inspired by libraries like Redux, but certainly isn't designed to replace it. Beedle is aimed more at tiny little applications or where a development team might be looking to create the smallest possible footprint with their JavaScript.

Performance budget

Beedle is intended to be tiny, so the largest that the uncompressed size will ever get to is 5kb.

Browser support

Beedle is aimed at browsers that support ES6 by default. It also uses a Proxy to monitor state, so anything that supports Proxy will support Beedle.

You could use the Proxy polyfill to support more browsers.

Most major browsers will support Beedle with no issues.

Getting started

You can pull Beedle down via npm or take a zip of this repository. The rest of this guide assumes you've used npm.

1) Install

Run npm install beedle in your project directory.

2) Create a store instance

First up, import it into your JavaScript:

import Store from 'beedle';

Once you've got that you should create some actions, mutations and some initial state:

const actions = {
    saySomething(context, payload) {
        context.commit('setMessage', payload);
    }
};

const mutations = {
    setMessage(state, payload) {
        state.message = payload;

        return state;
    }
};

const initialState = {
    message: 'Hello, world'
};

Once you've got those setup, you can create a Store instance like this:

const storeInstance = new Store({
    actions,
    mutations,
    initialState
});

3) Use in your app

Let's say you've got a text box that you type a message into. When the content is changed, it could dispatch a new message to your store:

// Grab the textarea and dispatch the action on 'input'
const textElement = document.querySelector('textarea');

textElement.addEventListener('input', () => {

    // Dispatch the action, which will subsequently pass this message to the mutation
    // which in turn, updates the store's state
    storeInstance.dispatch('saySomething', textElement.value.trim());
});

4) Listen for changes

Beedle uses the Pub/Sub pattern to transmit changes. Let's attach the message to a DOM element:

// Grab the text element and attach it to the stateChange event
const messageElement = document.querySelector('.js-message-element');

// This fires every time the state updates
storeInstance.subscribe(state => {
    messageElement.innerText = state.message;
});

Head over to the basic demo to see this in action

Acknowledgements

Thanks to Eli Fitch for giving me the idea to call this Beedle. This matches my preference to call my little projects names based on Zelda. Here's Beedle from Zelda.

Thanks to the incredible people who maintain projects such as Redux, Vuex and MobX et. al. Thanks for making our lives easier and for inspiring this project.