JSPM

Global, simple, spacy State and Logic Framework

// -- core.js ------------------------------------------

// 1️⃣ Create Instance of AgileTs
const App = new Agile();

// 2️⃣ Create State with help of before defined Agile Instance
const MY_FIRST_STATE = App.createState("Hello Friend!");


// -- MyComponent.whatever ------------------------------------------

// 3️⃣ Bind initialized State to desired UI-Component
// And wolla, it's reactive. Everytime the State mutates the Component rerenders
const myFirstState = useAgile(MY_FIRST_STATE); // Returns value of State ("Hello Friend!")

Want to learn more? Check out our Quick Start Guides.

⛳️ Sandbox

Test AgileTs yourself in a codesandbox. It's only one click away. Just select your preferred Framework below.

• React
• React-Native
• Vue
• Angular (coming soon)

More examples can be found in the Example Section.

AgileTs is a global, simple, well-tested State Management Framework implemented in Typescript. It offers a reimagined API that focuses on developer experience and allows you to easily manage your States. Besides States, AgileTs offers some other powerful APIs that make your life easier. The philosophy behind AgileTs is simple:

🚅 Straightforward

Write minimalistic, boilerplate-free code that captures your intent.

const MY_STATE = App.createState('frank'); // Create State
MY_STATE.set('jeff'); // Update State value
MY_STATE.undo(); // Undo latest State value change
MY_STATE.is({hello: "jeff"}); // Check if State has the value '{hello: "jeff"}'
MY_STATE.watch((value) => {console.log(value);}); // Watch on State changes

Some more straightforward syntax examples:

• Store State in any Storage, like the Local Storage

  MY_STATE.persist("storage-key");

• Create a reactive Array of States

  const MY_COLLECTION = App.createCollection();
  MY_COLLECTION.collect({id: 1, name: "Frank"});
  MY_COLLECTION.collect({id: 2, name: "Dieter"});
  MY_COLLECTION.update(1, {name: "Jeff"});

• Compute State depending on other States

  const MY_INTRODUCTION = App.createComputed(() => {
     return `Hello I am '${MY_NAME.vale}' and I use ${MY_STATE_MANAGER.value} for State Management.`;
  });

🤸‍ Flexible

• Works in nearly any UI-Layer. Check here if your preferred Framework is supported too.
• Surly behaves with the workflow which suits you best. No need for reducers, actions, ..
• Has 0 external dependencies

⛳️ Centralize

AgileTs is designed to take all business logic out of UI-Components and put them in a central place, often called core. The benefit of keeping logic separate to UI-Components is to make your code more decoupled, portable, scalable, and above all, easily testable.

🎯 Easy to Use

Learn the powerful tools of AgileTs in a short amount of time. An excellent place to start are our Quick Start Guides, or if you don't like to follow any tutorials, you can jump straight into our Example Section.

In order to properly use AgileTs, in a UI-Framework, we need to install two packages.

• The core package, which contains the State Management Logic of AgileTs and therefore offers powerful classes such as the State Class.

  npm install @agile-ts/core

• And on the other hand, a fitting Integration for your preferred UI-Framework. In my case, the React Integration. Check here if your desired Framework is supported, too.

  npm install @agile-ts/react

Sounds AgileTs interesting to you? Checkout our documentation, to learn more. And I promise you. You will be able to use AgileTs in no time. If you have any further questions, don't hesitate to join our Community Discord.

Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀 To find out more about contributing, check out the CONTRIBUTING.md.

Name	Latest Version	Description
@agile-ts/core		State Manager
@agile-ts/react		React Integration
@agile-ts/vue		Vue Integration
@agile-ts/api		Promise based API
@agile-ts/multieditor		Simple Form Manager
@agile-ts/event		Handy class for emitting UI Events
@agile-ts/logger		Manages the logging of AgileTs
@agile-ts/utils		Util functions of AgileTs
@agile-ts/proxytree		Create Proxy Tree

AgileTs is inspired by MVVM Frameworks like MobX and PulseJs.