Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agile-ts/agile
🌌 Global State and Logic Library for JavaScript/Typescript applications
https://github.com/agile-ts/agile
agiel-ts agile api functional-reactive-programming global-state javascript modular react-global-state react-native react-state-management reactive reactjs redux-alternative replace-redux simple spacy state state-management typescript vue
Last synced: about 1 month ago
JSON representation
🌌 Global State and Logic Library for JavaScript/Typescript applications
- Host: GitHub
- URL: https://github.com/agile-ts/agile
- Owner: agile-ts
- License: mit
- Archived: true
- Created: 2020-08-24T19:15:27.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-07T10:05:28.000Z (5 months ago)
- Last Synced: 2024-10-28T18:35:39.925Z (about 2 months ago)
- Topics: agiel-ts, agile, api, functional-reactive-programming, global-state, javascript, modular, react-global-state, react-native, react-state-management, reactive, reactjs, redux-alternative, replace-redux, simple, spacy, state, state-management, typescript, vue
- Language: TypeScript
- Homepage: https://agile-ts.org
- Size: 9.38 MB
- Stars: 95
- Watchers: 2
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-state-management - agile-ts - Spacy, fast, simple State Management Framework (List)
README
> ⚠️ **No longer actively maintained**.
>
> Check out [`feature-state`](https://github.com/inbeta-group/monorepo/tree/develop/packages/feature-state)! It offers similar functionality to AgileTs but is significantly more lightweight. I've incorporated my learnings over the years, including insights from AgileTs, to create this new state management library, embracing the principle that the best code is no code :)
>
> 👉 If you face any problem feel free open an [issue](https://github.com/agile-ts/agile/issues).
>
> ❓ If you've any questions, don't hesitate to start a [discussion](https://github.com/agile-ts/agile/discussions).
> 🎇 **Global State and Logic Library**
```tsx
// -- core.js ------------------------------------------
// 1️⃣ Create State with the initial value "Hello Friend!"
const MY_FIRST_STATE = createState("Hello Friend!");
// -- MyComponent.whatever ------------------------------------------
// 2️⃣ Bind initialized State to the desired UI-Component.
// And wolla, the Component is reactive.
// Everytime the State mutates the Component re-renders.
const myFirstState = useAgile(MY_FIRST_STATE);
console.log(myFirstState); // Returns "Hello Friend!"
```
Want to learn how to implement AgileTs in your preferred UI-Framework?
Check out our [Quick Start Guides](https://agile-ts.org/docs/Installation.md).
### ⛳️ Sandbox
Test AgileTs yourself in a [codesandbox](https://codesandbox.io/s/agilets-first-state-f12cz).
It's only one click away. Just select your preferred Framework below.
- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
- [React-Native](https://snack.expo.io/@bennodev/agilets-first-state)
- [Vue](https://codesandbox.io/s/agilets-first-state-i5xxs)
- Svelte (coming soon)
More examples can be found in the [Example section](https://agile-ts.org/docs/examples).
AgileTs is an atom based global State and Logic Library implemented in Typescript.
It offers a reimagined API that focuses on **developer experience**
and allows you to **easily** and **flexible** manage your application States.
Besides [States](https://agile-ts.org/docs/core/state),
AgileTs offers some other powerful APIs that make your life easier,
such as [Collections](https://agile-ts.org/docs/core/collection)
and [Computed States](https://agile-ts.org/docs/core/computed).
The philosophy behind AgileTs is simple:
### 🚅 Straightforward
Write minimalistic, boilerplate-free code that captures your intent.
```ts
// Create State with the inital value 'frank'
const MY_STATE = createState('frank');
// Update the State value from 'frank' to 'jeff'
MY_STATE.set('jeff');
// Undo the latest State value change
MY_STATE.undo();
// Reset the State value to its initial value
MY_STATE.reset();
// Permanently store the State value in an external Storage
MY_STATE.persist("storage-key");
```
### 🤸 Flexible
- Works in nearly any UI-Framework (currently supported are [React](https://reactjs.org/), [React-Native](https://reactnative.dev/) and [Vue](https://vuejs.org/)).
- Surly behaves with the workflow that suits you best.
No need for _reducers_, _actions_, ..
- Has **0** external dependencies.
### ⛳️ Centralize
AgileTs is designed to take all business logic out of the UI-Components
and put them in a central place, often called `core`.
The advantage of keeping logic separate to UI-Components,
is that your code is more decoupled, portable, scalable,
and above all, easily testable.
You can learn more about ways to centralize your application logic with AgileTs
in our [Style Guides](https://agile-ts.org/docs/style-guide).
### 🎯 Easy to Use
Learn the powerful tools of AgileTs in a short period of time.
An excellent place to start are our [Quick Start Guides](https://agile-ts.org/docs/Installation),
or if you don't like to follow tutorials,
you can jump straight into the [Example section](https://agile-ts.org/docs/examples/Introduction).
In order to use AgileTs in a UI-Framework, we need to install **two packages**.
- The [`core`](https://agile-ts.org/docs/core) package contains the State Management Logic of AgileTs
and therefore provides powerful classes like the [`State Class`](https://agile-ts.org/docs/core/state).
```
npm install @agile-ts/core
```
- A _fitting Integration_ for the UI-Framework of your choice, on the other hand,
is an interface to the actual UI and provides useful functionalities
to bind States to UI-Components for reactivity.
I prefer React, so let's go with the [React Integration](https://www.npmjs.com/package/@agile-ts/react) for now.
```
npm install @agile-ts/react
```
Does AgileTs sound interesting to you?
Take a look at our **[documentation](https://agile-ts.org/docs/introduction)**,
to learn more about its functionalities and capabilities.
If you have any further questions,
feel free to join our [Community Discord](https://discord.gg/T9GzreAwPH).
We will be happy to help you.
- Overview
- [Introduction](https://agile-ts.org/docs/introduction/)
- [Installation](https://agile-ts.org/docs/installation)
- [Style Guides](https://agile-ts.org/docs/style-guide)
- [Supported Frameworks](https://agile-ts.org/docs/frameworks)
- [Contributing](https://agile-ts.org/docs/contributing)
- Quick Start
- [React](https://agile-ts.org/docs/quick-start/react)
- [Vue](https://agile-ts.org/docs/quick-start/vue)
- Packages
- [core](https://agile-ts.org/docs/core)
- [Agile Instance](https://agile-ts.org/docs/core/agile-instance)
- [State](https://agile-ts.org/docs/core/state)
- [Collection](https://agile-ts.org/docs/core/collection)
- [Computed](https://agile-ts.org/docs/core/computed)
- [Storage](https://agile-ts.org/docs/core/storage)
- [Integration](https://agile-ts.org/docs/core/integration)
- [react](https://agile-ts.org/docs/react)
- [React Hooks](https://agile-ts.org/docs/react/hooks)
- [AgileHOC](https://agile-ts.org/docs/react/AgileHOC)
- Examples
- [React](https://agile-ts.org/docs/examples/react)
- [React-Native](https://agile-ts.org/docs/examples/react-native)
- [Vue](https://agile-ts.org/docs/examples/vue)
- [Typescript Interfaces](https://agile-ts.org/docs/interfaces)
Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀
To find out more about contributing, check out the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
### ♥️ Contributors
[Become a contributor](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md)
| Name | Latest Version | Description |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| [@agile-ts/core](/packages/core) | [](https://www.npmjs.com/package/@agile-ts/core) | State Manager Logic |
| [@agile-ts/react](/packages/react) | [](https://www.npmjs.com/package/@agile-ts/react) | React Integration |
| [@agile-ts/vue](/packages/vue) | [](https://www.npmjs.com/package/@agile-ts/vue) | Vue Integration |
| [@agile-ts/api](/packages/api) | [](https://www.npmjs.com/package/@agile-ts/api) | Promise based API |
| [@agile-ts/multieditor](/packages/multieditor) | [](https://www.npmjs.com/package/@agile-ts/multieditor) | Simple Form Manager |
| [@agile-ts/event](/packages/event) | [](https://www.npmjs.com/package/@agile-ts/event) | Handy class for emitting UI Events |
| [@agile-ts/logger](/packages/logger) | [](https://www.npmjs.com/package/@agile-ts/logger) | Logging API of AgileTs |
| [@agile-ts/utils](/packages/utils) | [](https://www.npmjs.com/package/@agile-ts/utils) | Utilities of AgileTs |
| [@agile-ts/proxytree](/packages/proxytree) | [](https://www.npmjs.com/package/@agile-ts/proxytree) | Proxy Tree for tracking accessed properties | |
AgileTs is inspired by [MVVM Libraries](https://de.wikipedia.org/wiki/Model_View_ViewModel)
like [MobX](https://mobx.js.org/README.html) and [PulseJs](https://github.com/pulse-framework/pulse).
### 🕐 Time spent building this project
[](https://wakatime.com/badge/user/aa5a8ce7-1c57-4f26-a159-ea57ec5ea7c1/project/6d1a7308-89b1-4e95-9623-64c0c6116d0a)
