@agile-ts/core

Spacy, Simple, Scalable State Management Framework

Usage no npm install needed!

<script type="module">
  import agileTsCore from 'https://cdn.skypack.dev/@agile-ts/core';
</script>

README

AgileTs

Global, simple, spacy State and Logic Framework


GitHub License npm minified size npm total downloads

Build Status Build Status Coverage Badge

Tweet Join Discord


How to create a State?
// -- core.js ------------------------------------------

// Let's start by creating an Instance of AgileTs
const App = new Agile();

// Now we are able to build our first State πŸ˜ƒ
const MY_FIRST_STATE = App.createState("Hello Stranger!");


// -- myComponent.whatever ------------------------------------------

// Finally, we bind our just created State to our desired UI-Component
// And wolla its reactive. Everytime the State mutates the Component gets rerendered
const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")

To find out more checkout our documentation.

⛳️ Sandbox

Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.

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

More examples can be found in the Example Section.



Why should I use AgileTs?

AgileTs is a global, simple, well-tested State Management Framework implemented in TypeScript. It's more flexible and boilerplate-free than frameworks like Redux and has a powerful approach to reducing the codebase size through a centralized memory design pattern. The philosophy behind AgileTs is simple:

πŸš… Straightforward

Write minimalistic, boilerplate free code that captures your intent.

Some straightforward syntax examples:

  • Store State in any Storage, like 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"});
    
  • Mutate and Check States with simple Functions
    MY_STATE.undo(); // Undo latest change
    MY_STATE.is({hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'
    

πŸ€Έβ€ 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 boilerplate code.
  • Has 0 external dependencies

🎯 Easy to Use

Learn the powerful tools of AgileTs in a short amount of time. A good place to start are our Quick Start Guides or if you are no fan of following any tutorial, checkout your Examples.



Installation

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

  • The Core Package, which acts as the brain of AgileTs and manages all our States

    npm install @agile-ts/core
    
  • and a fitting Integration for our preferd UI-Framework. In my case the React Integration. Check here if your desired Framework is supported, too.

    npm install @agile-ts/react
    


Documentation

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. In case you have any further questions don't mind joining our Community Discord.



Contribute

Get a part of AgileTs and start contributing. We welcome any meaningful contribution πŸ˜€ To find out more checkout the CONTRIBUTING.md.

Maintainability

Packages of Agile
Name Latest Version Description
@agile-ts/core badge Brain of Agile
@agile-ts/react badge React Integration
@agile-ts/api badge Promise based Api
@agile-ts/multieditor badge Simple Form Manager
@agile-ts/event badge Handy class for emitting UI Events


Credits

AgileTs is inspired by MVVM Frameworks like MobX and PulseJs.