AgileTs

Spacy, Simple, Scalable State Management Framework

🔥warning

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
  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 or 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 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