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

Commit 9a676c1

Browse files
authored
Merge pull request #69 from agile-ts/readme-improvements
Readme improvements
2 parents 76f9eca + f8bc174 commit 9a676c1

19 files changed

+228
-121
lines changed

CONTRIBUTING.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ AgileTs has two primary branches: `master` and `develop`
5050

5151
`develop` is where development takes place
5252

53-
<img src="static/branch_organization.png" alt="Banner">
53+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/branch_organization.png" alt="Branch Organisation"/>
5454

5555
The root of all your branches have to be the `develop` branch!
5656

README.md

Lines changed: 113 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,154 @@
1-
<img src="static/header_background.png" alt="Banner">
1+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/header_background.png" alt="AgileTs">
22

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

7-
<a href="https://github.com/agile-ts/agile">
8-
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
7+
<a href="https://github.com/agile-ts/agile">
8+
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
99
<a href="https://npm.im/@agile-ts/core">
10-
<img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"></a>
10+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg" alt="npm minified size"/></a>
11+
12+
<br />
13+
14+
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
15+
<img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg?style=flat-square" alt="Build Status"/></a>
16+
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
17+
<img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/></a>
18+
<a href="https://codeclimate.com/github/agile-ts/agile/coverage">
19+
<img src="https://codeclimate.com/github/agile-ts/agile/badges/gpa.svg" alt="Maintainability"/></a>
20+
21+
<br />
22+
1123
<a href="https://npm.im/@agile-ts/core">
12-
<img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"></a>
24+
<img src="https://img.shields.io/npm/dm/@agile-ts/core.svg" alt="npm monthly downloads"/></a>
1325
<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>
26+
<img src="https://img.shields.io/npm/dt/@agile-ts/core.svg" alt="npm total downloads"/></a>
27+
1928

2029

21-
## 🚀 Look how easy it is
22-
Below example is based on React
30+
<br />
31+
32+
33+
<br />
34+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/how_to_create_state_header.png" alt="How to create a State?"/>
35+
2336
```tsx
24-
// At first we have to create an Instance of Agile
37+
// -- core.js ------------------------------------------
38+
39+
// Let's start by creating an Instance of AgileTs
2540
const App = new Agile();
2641

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

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-
}
45+
// -- myComponent.whatever ------------------------------------------
46+
47+
// Now we are able to bind our State to nearly any UI-Component
48+
// And wolla its reactive. Everytime the State mutates the Component gets rerendered
49+
const myFirstState = useAgile(MY_FIRST_STATE); // returns value of State ("Hello Stranger!")
4950
```
50-
_You can't believe the simplicity?! Convince yourself [here](https://codesandbox.io/s/agilets-first-state-f12cz)._
51+
To find out more checkout our [documentation](https://agile-ts.org/docs).
52+
53+
### ⛳️ Sandbox
54+
Test AgileTs yourself, it's only one click away. Just select your preferred Framework below.
55+
- [React](https://codesandbox.io/s/agilets-first-state-f12cz)
56+
- Vue (coming soon)
57+
- Angular (coming soon)
58+
59+
60+
<br />
61+
5162

63+
<br />
64+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/why_should_i_use_agile.png" alt="Why should I use AgileTs?"/>
5265

53-
## ❓ Why AgileTs
66+
### 🚅 Straightforward
67+
Write minimalistic, boilerplate free code that captures your intent.
5468

55-
#### 🚅 Straightforward
56-
Write minimalistic, boilerplate free code that captures your intent. <br />
57-
**For instance**
58-
- Store State in Local Storage
69+
**Some straightforward syntax examples:**
70+
- Store State in the Local Storage
5971
```ts
6072
MY_STATE.persist("storage-key")
6173
```
62-
- Reactive Collection of States
74+
- Create reactive Collection of States
6375
```ts
6476
const MY_COLLECTION = App.Collection();
6577
MY_COLLECTION.collect({id: 1, name: "Frank"});
6678
MY_COLLECTION.collect({id: 2, name: "Dieter"});
6779
```
68-
- Cool State checks and mutations
80+
- Mutate or Check States with simple Functions
6981
```ts
7082
MY_STATE.undo(); // Undo last change
7183
MY_STATE.is({hello: "jeff"}); // Check if State has the Value {hello: "jeff"}
7284
```
7385

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_, ..
86+
### 🤸‍ Flexible
87+
- Works in nearly every UI-Framework. Check [here](https://agile-ts.org/docs/frameworks) if the Framework you are using is supported, too.
88+
- Surly behaves with the workflow that suits you best.
89+
No need for _reducers_, _actions_, ..
90+
- Has **no** external dependencies
7891

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

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.
96+
### 🎯 Easy to Use
97+
Learn the powerful tools of AgileTs in a short amount of time.
98+
A good place to start is in our [documentation](https://agile-ts.org/docs).
8599

86-
#### 🍃 Lightweight
87-
Agile has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/[email protected])
100+
### 🍃 Lightweight
101+
AgileTs has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/[email protected])
88102
and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
89103

90104

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, ..
96105
<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).
101106

102107

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

111+
To use AgileTs properly, in an UI-Framework we have to install **2** packages.
112+
113+
- The _Core Package_, which is the brain of AgileTs and handles your States, Collections, ..
114+
```
115+
npm install @agile-ts/core
116+
```
117+
118+
- A _fitting integration_ for the UI-Framework you are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
119+
Check [here](https://agile-ts/docs/framework) your Framework is supported, too.
120+
```
121+
npm install @agile-ts/react
122+
```
123+
124+
125+
<br />
126+
127+
128+
<br />
129+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/documentation_header.png" alt="Documentation"/>
130+
131+
If AgileTs sounds interesting to you.
132+
Checkout our **[docs](https://agile-ts.org/docs/)**.
133+
And I am sure you will be able to use it in no time.
134+
In case you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
135+
136+
137+
<br />
138+
139+
140+
<br />
141+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/contribute_header.png" alt="Contribute"/>
142+
143+
Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](https://github.com/agile-ts/agile/blob/master/CONTRIBUTING.md).
144+
145+
146+
<br />
147+
148+
149+
<br />
150+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/packages_of_agile.png" alt="Packages of Agile"/>
106151

107-
## 🗂 Packages of Agile
108152
| Name | Latest Version | Description |
109153
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
110154
| [@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 +157,10 @@ The Agile Docs are located [here](https://agile-ts.org/docs/)
113157
| [@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 |
114158

115159

116-
## 👨‍💻 Contribute
117-
Feel free to contribute
160+
<br />
161+
118162

163+
<br />
164+
<img src="https://raw.githubusercontent.com/agile-ts/agile/master/static/credits_header.png" alt="Credits"/>
119165

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

packages/api/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
> Promise based HTTP request API for Node.js
44
55
<a href="https://npm.im/@agile-ts/api">
6-
<img src="https://img.shields.io/npm/v/@agile-ts/api.svg" alt="npm version"></a>
6+
<img src="https://img.shields.io/npm/v/@agile-ts/api.svg" alt="npm version"/></a>
77
<a href="https://github.com/agile-ts/agile">
8-
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
8+
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
99
<a href="https://npm.im/@agile-ts/api">
10-
<img src="https://img.shields.io/npm/dm/@agile-ts/api.svg" alt="npm monthly downloads"></a>
10+
<img src="https://img.shields.io/npm/dm/@agile-ts/api.svg" alt="npm monthly downloads"/></a>
1111
<a href="https://npm.im/@agile-ts/api">
12-
<img src="https://img.shields.io/npm/dt/@agile-ts/api.svg" alt="npm total downloads"></a>
12+
<img src="https://img.shields.io/npm/dt/@agile-ts/api.svg" alt="npm total downloads"/></a>
1313
<a href="https://npm.im/@agile-ts/api">
14-
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg" alt="npm minified size"></a>
14+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/api.svg" alt="npm minified size"/></a>
1515

1616
## ⏰ Short Example
1717
```ts

packages/multieditor/README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
> Simple Form Manager for UI-Frameworks
44
55
<a href="https://npm.im/@agile-ts/multieditor">
6-
<img src="https://img.shields.io/npm/v/@agile-ts/multieditor.svg" alt="npm version"></a>
6+
<img src="https://img.shields.io/npm/v/@agile-ts/multieditor.svg" alt="npm version"/></a>
77
<a href="https://github.com/agile-ts/agile">
8-
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"></a>
8+
<img src="https://img.shields.io/github/license/agile-ts/agile.svg" alt="GitHub License"/></a>
99
<a href="https://npm.im/@agile-ts/multieditor">
10-
<img src="https://img.shields.io/npm/dm/@agile-ts/multieditor.svg" alt="npm monthly downloads"></a>
10+
<img src="https://img.shields.io/npm/dm/@agile-ts/multieditor.svg" alt="npm monthly downloads"/></a>
1111
<a href="https://npm.im/@agile-ts/multieditor">
12-
<img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg" alt="npm total downloads"></a>
12+
<img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg" alt="npm total downloads"/></a>
1313
<a href="https://npm.im/@agile-ts/multieditor">
14-
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.svg" alt="npm minified size"></a>
14+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/multieditor.svg" alt="npm minified size"/></a>
1515

1616
## ⏰ Short Example
1717
```ts

0 commit comments

Comments
 (0)