Spacy, Simple, Scalable State Management Framework

GitHub Licensenpm minified sizenpm total downloadsBuild StatusBuild Status


These docs are work in progress and not completed yet!

πŸ‘‹ Introduction#

AgileTs is a simple, fast, and well-tested State Management Framework implemented in TypeScript. It's more flexible and boilerplate-free than Redux and has an interesting 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
  • 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 or Check States with simple Functions
    MY_STATE.undo(); // Undo latest change{hello: "jeff"}); // Check if State has the Value '{hello: "jeff"}'

πŸ€Έβ€ Flexible#

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

🎯 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 are no fan of following any tutorial, check out the Example section.

⏳ Quick Example#

Instead of talking too much about the advantages of AgileTs, we should start coding.

😎 Our first State#

// -- core.js ------------------------------------------
// Let's start by creating an Instance of AgileTs
const App = new Agile();
// Now we are able to create our first State πŸ˜ƒ
const MY_FIRST_STATE = App.createState("Hello Stranger!");
// -- myComponent.whatever ------------------------------------------
// Finally, we bind the just initialized State to our desired UI-Component
// And wolla, it's 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, check out our Quick Start Guides.

⛳️ 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.

πŸ‘¨β€πŸ« Learn AgileTs#

We have a variety of resources available to help you learn AgileTs. An excellent place to start are our Quick Start Guides, where you learn the basics about how to use AgileTs in a specific Framework. After knowing the ground concept of AgileTs, we recommend checking out the Style Guides. The Style Guides will help you get some inspiration on structuring a scalable application using AgileTs. Now you are ready to use AgileTs wherever you want. In case you need some more information about some functionalities of AgileTs, use the search bar in the top right corner. If you have any questions and can't find the correct answer in the documentation, don't hesitate to join our Discord Community.

🏒 Structure of Documentation#

πŸ“ AgileTs#

You are currently in the AgileTs section, which serves as source for general topics like the Style Guide or an Installation Guide.

πŸ“ Quick Start#

The quick start section is all about how to get AgileTs up and running in different environments like React or Vue. In each Quick Start Guide the basics of some AgileTs classes (State, ..) are covered too.

πŸ“ Packages#

In the packages section all the AgileTs packages are listed. For instance the core and the api package. If you click on one of them, it will reveal you an Introduction about the package, an Installation Guide and all its features. In case of the core package you find the State and Collection docs in the Features Section.

πŸ“ Examples#

Some interactive examples can be found in the example section.

πŸ“ Interfaces#

Without any context this section might be useless to you. As the name suggests, it's all about typescript interfaces of AgileTs, which are outsourced for a better overview. You might get redirected to parts of the Interface Section from other docs. Often to learn some more about specific properties of an interface.

❓ Something missing#

If you find issues with the documentation or have suggestions on how to improve the documentation or the project in general, please file an issue for us or join our Discord Community.

πŸŽ‰ Credits#

AgileTs is inspired by MVVM frameworks like MobX and PulseJs.

πŸ’¬ What others say#

Actually nothing, hehe

Last updated on