# Introduction

# Pulse Framework 3.0

Created by @jamiepine (opens new window)

Pulse is a global state and logic framework for reactive TypeScript & Javascript applications. Supporting frameworks like VueJS, React and React Native.

Join Discord Follow Pulse on Twitter Follow Jamie Pine on Twitter
const App = new Pulse();

const Hello = App.State('the sound of music');

Lightweight, modular and powerful. An alternative to Redux/VueX/MobX and request libraries such as Axios/Request.js. Use Pulse to create a core state & logic library for your application; plug and play directly into any UI Framework.

# Why Pulse?

Pulse provides a clean-cut toolset to build a Javascript application quickly and efficiently. It encourages developers to construct a core library that can be dropped into any UI framework. Your core is the brain of your application, it will handle everything from state management, API requests to all logic and calculations. Pulse will supply pre-computed data to your UI components, in the framework of your choice with complete reactivity.

# TypeScript

Pulse is written in TypeScript and is designed to support it heavily. Everything is type safe out of the box and encourages you to write clean typed code, however Pulse can still be used without TypeScript.

# Quick Walk-Through

# ⚡️ StateApp.State()

A handy container to store, manipulate and relate data.

const MY_STATE = App.State(true);

...with a range of chainable methods.

MY_STATE.toggle().persist().set().type().watch().reset().undo(); // etc...

# 🤖 Computed State — App.Computed()

Computed State is an extension of State. It computes a value from a function that you provide, and caches it to avoid unnecessary recomputation.

const MY_COMPUTED = App.Computed(() => !!MY_STATE.value);

It will magically recompute when it's dependencies change and can track dependencies automatically or manually.

# ✨ Collections — App.Collection()

A DB/ORM-like class for front-end data collection.

Collections are designed for arrays of data following the same structure, usually returned from an API. They have handy features to work with that data and act as a single source of truth.

const AccountCollection = App.Collection()();


# ✨ Groups — Collection.Group()

Groups handy to provide arrays of collection data and can be used independently in your components.

const AUTHED = AccountCollection.Group([1, 2, 3]);

AUTHED.output; // [{ id: 1, ...}...]

When the index of a Group is modified, it will "rebuild" the output with actual collection data.

# 📞 Promise based HTTP request API — App.API()

Create an API instance to make requests.

const API = App.API({
  baseURL: 'https://my.api.me',
  timeout: 10000,
  options: { credentials: 'include' }

Create routes for your API as functions.

const GetAccount = async () => (await API.get('/account')).data;

# 💾 Persisted Storage API — App.Storage()

// localStorage is automatic, so here's a custom example
  async: true,
  get: AsyncStorage.getItem,
  set: AsyncStorage.setItem,
  remove: AsyncStorage.removeItem

# ⏲ Turn back the clock — State.undo()

const MY_STATE = App.State('hello');



MY_STATE.value; // Expected Output: "hello"

# 🚌 Events — App.Event()

const ALERT = App.Event();

ALERT.emit({ message: 'notify events best events!' });

useEvent(ALERT, renderAlert); // React Hook with auto cleanup!

ALERT.onNext(() => {}) // onetime-use callback useful for event chaining.

# ⏳ [WIP] CRON Jobs — App.Job()

App.Job(60000, () => {
  // do something

# 🌓 Lifecycle hooks — State.watch() / App.onReady() / App.nextPulse()

MY_STATE.watch('name', () => {
  // do something when MY_STATE changes

# 🚧 Task queuing for race condition prevention


# 📕 [WIP] Error handling

A global error handler can be very useful, this is a basic example. App.Action() uses this automatically.

// Set up error handler
App.onError((error, config) => {
  console.error('uh oh', error)
// Usage
try {
// do stuff here
} catch (e) {
  App.Error(e, { quiet: true });

# 🍃 Lightweight (only 37KB) with 0 dependencies

# 🔥 Supports Vue, React, React Native and NextJS

yarn add @pulsejs/core // install the Pulse core

yarn add @pulsejs/react // React integration
yarn add @pulsejs/vue // Vue integration
yarn add @pulsejs/next // Next integration

# 💛 Well documented (I'm getting there...)