Skip to content
This repository was archived by the owner on Oct 16, 2024. It is now read-only.

Commit f066835

Browse files
bennobuilderbennobuilder
authored
Merge pull request #67 from agile-ts/readme-improvements
Readme improvements
2 parents 39d7672 + 5d3a284 commit f066835

File tree

8 files changed

+102
-64
lines changed

8 files changed

+102
-64
lines changed

‎README.md‎

Lines changed: 102 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,147 @@
11
<img src="static/header_background.png" alt="Banner">
22

3-
> **Spacy**, **Simple**, **Scalable** State Management Framework
3+
> **Spacy, Simple, Scalable State Management Framework**
44
55
<br />
66

77
<a href="https://github.com/agile-ts/agile">
88
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
9+
<a href="https://npm.im/@agile-ts/core">
10+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"></a>
11+
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
12+
<img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg?style=flat-square" alt="Build Status"></a>
13+
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
14+
<img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"></a>
15+
16+
<br />
17+
918
<a href="https://npm.im/@agile-ts/core">
1019
<img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"></a>
1120
<a href="https://npm.im/@agile-ts/core">
1221
<img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"></a>
13-
<a href="https://npm.im/@agile-ts/core">
14-
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"></a>
15-
<a href="https://github.com/agile-ts/agile">
16-
<img src="https://img.shields.io/github/languages/code-size/agile-ts/agile.svg" alt="GitHub Code Size"></a>
17-
<a href="https://github.com/agile-ts/agile">
18-
<img src="https://img.shields.io/github/repo-size/agile-ts/agile.svg" alt="GitHub Repo Size"></a>
22+
1923

2024

21-
## 🚀 Look how easy it is
22-
Below example is based on React
25+
<br />
26+
27+
28+
<br />
29+
<img src="static/how_to_create_state_header.png" alt="How to create State Header">
30+
2331
```tsx
24-
// At first we have to create an Instance of Agile
32+
// -- core.js ------------------------------------------
33+
34+
// At first we need an Instance of Agile
2535
const App = new Agile();
2636

27-
// Now we can create a State which has an initial Value of "Hello Stranger!"
37+
// Than we can create our first State
2838
const MY_FIRST_STATE = App.State("Hello Stranger!");
2939

30-
// Our cool React Component
31-
const RandomComponent = () => {
32-
// With the Hook 'useAgile' we bind the State to our 'RandomComponent'
33-
const myFirstState = useAgile(MY_FIRST_STATE); // Returns "Hello Stranger!"
34-
// ^
35-
return ( // |
36-
<div> // | Through the 'set' action the State Value
37-
<p>{myFirstState}</p> // | gets changed to "Hello Friend!"
38-
<button // | and causes a rerender on this Component.
39-
onClick={() => { // | -> myFirstState has the Value "Hello Friend!"
40-
// Lets's update the State Value // |
41-
MY_FIRST_STATE.set("Hello Friend!") // -------------
42-
}}
43-
>
44-
Update State
45-
</button>
46-
</div>
47-
);
48-
}
40+
// -- myComponent.whatever ------------------------------------------
41+
42+
// Now we can bind our State to nearly any UI-Component
43+
// And wolla its reactive. Everytime the State mutates the Component gets rerendered
44+
const myFirstState = useAgile(MY_FIRST_STATE); // returns "Hello Stranger!"
4945
```
50-
_You can't believe the simplicity?! Convince yourself [here](https://codesandbox.io/s/agilets-first-state-f12cz)._
46+
To find out more checkout our [documentation](https://agile-ts.org/docs).
5147

48+
### ⛳️ Sandbox
49+
Test AgileTs yourself, it's just a click away. Select your preferred Framework below.
50+
- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
51+
- Vue (coming soon)
52+
- Angular (coming soon)
5253

53-
## ❓ Why AgileTs
5454

55-
#### 🚅 Straightforward
56-
Write minimalistic, boilerplate free code that captures your intent. <br />
57-
**For instance**
58-
- Store State in Local Storage
55+
<br />
56+
57+
58+
<br />
59+
<img src="static/why_should_i_use_agile.png" alt="Why should I use AgileTs">
60+
61+
### 🚅 Straightforward
62+
Write minimalistic, boilerplate free code that captures your intent.
63+
64+
**Some straightforward syntax examples:**
65+
- Store a State in the Local Storage
5966
```ts
6067
MY_STATE.persist("storage-key")
6168
```
62-
- Reactive Collection of States
69+
- Create a reactive Collection of States
6370
```ts
6471
const MY_COLLECTION = App.Collection();
6572
MY_COLLECTION.collect({id: 1, name: "Frank"});
6673
MY_COLLECTION.collect({id: 2, name: "Dieter"});
6774
```
68-
- Cool State checks and mutations
75+
- Mutate or Check States with simple Functions
6976
```ts
7077
MY_STATE.undo(); // Undo last change
7178
MY_STATE.is({hello: "jeff"}); // Check if State has the Value {hello: "jeff"}
7279
```
7380

74-
#### 🤸‍ Flexible
75-
Agile can be used in nearly every UI-Framework
76-
and surly works with the workflow that suits you best,
77-
since Agile isn't bound to _dispatches_, _reducers_, ..
81+
### 🤸‍ Flexible
82+
- Works in nearly every UI-Framework. Check [here](TODO) if the Framework you are using is supported, too.
83+
- Surly behaves with the workflow that suits you best.
84+
No need for _reducers_, _actions_, ..
85+
- Has **no** external dependencies
7886

79-
#### 🎯 Easy to Use
80-
Learn the powerful and simple tools of Agile in a short amount of time.
87+
### 🌌 Centralize
88+
Manage your Application Logic in a central place outside any UI-Framework.
89+
This makes your code more decoupled, portable, and above all, easily testable.
8190

82-
#### ⛳️ Centralize
83-
Manage your Application Logic outside of any UI-Framework in a central place.
84-
This makes your code more decoupled, portable, and above all, easily testable.
91+
### 🎯 Easy to Use
92+
Learn the powerful tools of AgileTs in a short amount of time.
93+
A good place to start is in our [documentation](https://agile-ts.org/docs).
8594

86-
#### 🍃 Lightweight
87-
Agile has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6)
95+
### 🍃 Lightweight
96+
AgileTs has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6)
8897
and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
8998

9099

91-
## ⬇️ Installation
92-
```
93-
npm install @agile-ts/core
94-
```
95-
To use Agile we have to install the _core_ package, it's the brain and handles your States, Collections, ..
96100
<br />
97-
```
98-
npm install @agile-ts/react
99-
```
100-
In addition, we need to install a _fitting integration_ for the Framework we are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
101101

102102

103-
## 📄 Documentation
104-
The Agile Docs are located [here](https://agile-ts.org/docs/)
103+
<br />
104+
<img src="static/installation_header.png" alt="Installation">
105105

106+
To use AgileTs properly, in an UI-Framework we have to install 2 packages.
107+
108+
- The _Core Package_, which is the brain of AgileTs and handles your States, Collections, ..
109+
```
110+
npm install @agile-ts/core
111+
```
112+
113+
- A _fitting integration_ for the UI-Framework you are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
114+
```
115+
npm install @agile-ts/react
116+
```
117+
118+
119+
<br />
120+
121+
122+
<br />
123+
<img src="static/documentation_header.png" alt="Documentation">
124+
125+
If AgileTs sounds interesting to you and you want to find out more.
126+
Checkout our **[docs](https://agile-ts.org/docs/)**.
127+
If you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
128+
129+
130+
<br />
131+
132+
133+
<br />
134+
<img src="static/contribute_header.png" alt="Contribute">
135+
136+
Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](./CONTRIBUTING.md).
137+
138+
139+
<br />
140+
141+
142+
<br />
143+
<img src="static/packages_of_agile.png" alt="Packages of Agile">
106144

107-
## 🗂 Packages of Agile
108145
| Name | Latest Version | Description |
109146
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
110147
| [@agile-ts/core](/packages/core) | [![badge](https://img.shields.io/npm/v/@agile-ts/core.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/core) | Brain of Agile |
@@ -113,9 +150,10 @@ The Agile Docs are located [here](https://agile-ts.org/docs/)
113150
| [@agile-ts/multieditor](/packages/multieditor) | [![badge](https://img.shields.io/npm/v/@agile-ts/multieditor.svg?style=flat-square)](https://www.npmjs.com/package/@agile-ts/multieditor) | Simple Form Manager |
114151

115152

116-
## 👨‍💻 Contribute
117-
Feel free to contribute
153+
<br />
154+
118155

156+
<br />
157+
<img src="static/credits_header.png" alt="Packages of Agile">
119158

120-
## 🌠 Credits
121159
AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)

‎static/contribute_header.png‎

131 KB
Loading

‎static/credits_header.png‎

130 KB
Loading

‎static/documentation_header.png‎

134 KB
Loading

‎static/how_to_create_state_header.png‎

144 KB
Loading

‎static/installation_header.png‎

176 KB
Loading

‎static/packages_of_agile.png‎

126 KB
Loading

‎static/why_should_i_use_agile.png‎

181 KB
Loading

0 commit comments

Comments
 (0)