Introduction

All small and medium sized companies suffer the same problem: code is a mess and disorganized, there are multiple different naming conventions, folder and file conventions, and implementation conventions. Actions are classified in different ways and placed into different files and modules, which makes sense to some and is difficult to understand for others. There is not much consistency in the implementation of the look and feel, and CSS is all over the place in different implementations. Overall, there is no clear and systematic approach to the frontend that cleans up the conventions and implementation styles and at the same times keeps it simple.

This project is a solution to this problem. It is very few lines of code and is freely and openly licensed so it can be used at any company. All it does is create a convention to place all of your actions in one place, and actions manage state. As you will learn this solves the problem of managing vendor lockin, of testability of the code, of centralizing the knowledge base and of knowing where to find things. It is not an over-abstraction, it just treats everything as they are: as actions. All actions start at one state and end at another. If there are two main things in programming they are objects and actions. This project manages them both without any dependencies, so it is as secure as it can be.

Companies looking to take control of their code should start here. Gain control over the actions in the application. Shed the excess files that kept the actions siloed. Write tests for each action to verify its behavior. This will help improve the codebase. In addition, save the objects of your actions here. Keep configuration and settings and arbitrary data in one place to ease debuggability. To make it simple to stub out a complicated action. To help ease newcomers into the code, so they don't have to weed through a complicated network of imports and files. This will make the code easier to understand for everyone, and will increase the velocity at which product is developed.

Installation

npm install @7rabbit/lead

Illustration

Generalized Object Action Management System (OAMS)

import { Lead, Zone } from '@7rabbit/lead'

let lead = new Lead()

lead.flow(...)

lead.zone('Button', props => <Zone border='b' click={open}>Click</Zone>)

lead.size('small', {
  minHeight: 100
  maxHeight: 100
  height: 100
  orientation: 'landscape'
})

lead.mark('font-fill', {
  a: 'black',
  b: 'white'
})

lead.live()

function open() {
  lead.call('openWindow', 'https://7.rabbit.cx')
}