Skip to content

Commit bc88afd

Browse files
steadylearnersteadylearner
committed
Reset commits
0 parents  commit bc88afd

File tree

131 files changed

+34631
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

131 files changed

+34631
-0
lines changed

‎.gitignore

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Dependencies and results
2+
node_modules/
3+
4+
# .env for api keys and configuration variables
5+
.env
6+
set_env.sh
7+
8+
# Files with Cypress credentials
9+
cypress.json
10+
cypress.video.json
11+
cypress/
12+
record-video.bash
13+
14+
# AWS
15+
ecs-params.yml
16+
17+
# Heavy Python and its venv files and from dependencies.
18+
__pycache__
19+
python/
20+
admin/
21+
22+
# .swp files from vim
23+
*.swp
24+
25+
# db files
26+
*.db
27+
28+
# static and public in server/
29+
30+
server/*/static/
31+
server/*/public/
32+
*/react/static/

‎README.md

Lines changed: 239 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,239 @@
1+
[How to use React with Rust Actix]: https://www.steadylearner.com/blog/read/How-to-use-React-with-Rust-Actix
2+
[How to use Docker commands]: https://www.steadylearner.com/blog/read/How-to-use-Docker-commands
3+
[How to use Docker with Rust]: https://www.steadylearner.com/blog/read/How-to-use-Docker-with-Rust
4+
5+
# React Full Stack Example
6+
7+
React and various servers to test it. React, Webpack, Formik, Jest, React-Testing-Library, Cypress etc are used here.
8+
9+
[If you need a React developer, you can contact me.](https://www.linkedin.com/in/steady-learner-3151b7164/)
10+
11+
![user-signup](/src/images/screenshot/user-signup.png)
12+
13+
## Test React part only with Webpack
14+
15+
```console
16+
$nvm install 12.3.1
17+
$nvm use 12.3.1
18+
$yarn
19+
$yarn start
20+
```
21+
22+
## How to use it with servers
23+
24+
You can compare the performance with **$./loadtest.bash**.
25+
26+
I would use Express normally or Restify for simple Rest JavaScript projects.
27+
28+
If I care for speed, the choice will be among Actix, Golang, Vibora.
29+
30+
Actix shows the performance as expected. Golang was way better than I though.
31+
32+
Rocket, Django are not adequate for many concurrent requests without Nginx or Apache proxy.(When they are used alone.)
33+
34+
### Express
35+
36+
Webpack Dev server is based on Express. Therefore, prototype with it first. We will use it to learn how to deploy these web server to AWS. Only ports and frameworks will be different.
37+
38+
```console
39+
./express.bash
40+
```
41+
42+
1. The result form loadtest
43+
44+
```console
45+
// No errors but mean latency is problem?
46+
47+
INFO Requests: 0, requests per second: 0, mean latency: 0 ms
48+
INFO Requests: 1769, requests per second: 354, mean latency: 578.9 ms
49+
INFO Requests: 5636, requests per second: 774, mean latency: 786.2 ms
50+
INFO Requests: 10162, requests per second: 906, mean latency: 1392.7 ms
51+
INFO
52+
INFO Target URL: http://0.0.0.0:8000/
53+
INFO Max time (s): 20
54+
INFO Concurrency level: 10
55+
INFO Agent: keepalive
56+
INFO Requests per second: 2000
57+
INFO
58+
INFO Completed requests: 14669
59+
INFO Total errors: 0
60+
INFO Total time: 20.001914555 s
61+
INFO Requests per second: 733
62+
INFO Mean latency: 1012.1 ms
63+
INFO
64+
INFO Percentage of the requests served within a certain time
65+
INFO 50% 1052 ms
66+
INFO 90% 1537 ms
67+
INFO 95% 1629 ms
68+
INFO 99% 1974 ms
69+
INFO 100% 8906 ms (longest request)
70+
```
71+
72+
2. Memory usage(**113 MB**)
73+
74+
### Warp
75+
76+
```console
77+
./warp.bash
78+
```
79+
80+
1. The result from loadtest
81+
82+
```console
83+
// The best result considering its low memory usage compared to Golang
84+
85+
INFO Requests: 0, requests per second: 0, mean latency: 0 ms
86+
INFO Requests: 3832, requests per second: 767, mean latency: 8.3 ms
87+
INFO Requests: 11189, requests per second: 1473, mean latency: 5.2 ms
88+
INFO Requests: 19382, requests per second: 1638, mean latency: 4.8 ms
89+
INFO
90+
INFO Target URL: http://0.0.0.0:8000/
91+
INFO Max time (s): 20
92+
INFO Concurrency level: 10
93+
INFO Agent: keepalive
94+
INFO Requests per second: 2000
95+
INFO
96+
INFO Completed requests: 27364
97+
INFO Total errors: 0
98+
INFO Total time: 20.001672077 s
99+
INFO Requests per second: 1368
100+
INFO Mean latency: 5.5 ms
101+
INFO
102+
INFO Percentage of the requests served within a certain time
103+
INFO 50% 4 ms
104+
INFO 90% 8 ms
105+
INFO 95% 10 ms
106+
INFO 99% 16 ms
107+
INFO 100% 82 ms (longest request)
108+
```
109+
110+
2. Memory usage(**37.44 Mb**)
111+
112+
### Rocket
113+
114+
Use it to test you can deploy React Rocket application to AWS. Then, you should separate the project. Use **/static/<file..>** instead of current **/<file..>** in **routes/static_files.rs** to serve static files. It will help the Rocket server not to show errors from it.
115+
116+
```console
117+
./rocket.bash
118+
```
119+
120+
### Actix
121+
122+
[How to use React with Rust Actix]
123+
124+
```console
125+
./actix.bash
126+
```
127+
128+
1. The result from loadtest
129+
130+
```console
131+
// No errors and fast with the lowest memory usage.
132+
133+
INFO Requests: 0, requests per second: 0, mean latency: 0 ms
134+
INFO Requests: 1797, requests per second: 360, mean latency: 43.2 ms
135+
INFO Requests: 4855, requests per second: 612, mean latency: 34.4 ms
136+
INFO Requests: 9126, requests per second: 833, mean latency: 29.6 ms
137+
INFO
138+
INFO Target URL: http://0.0.0.0:8000/
139+
INFO Max time (s): 20
140+
INFO Concurrency level: 10
141+
INFO Agent: keepalive
142+
INFO Requests per second: 2000
143+
INFO
144+
INFO Completed requests: 13300
145+
INFO Total errors: 0
146+
INFO Total time: 20.005901511 s
147+
INFO Requests per second: 665
148+
INFO Mean latency: 32.4 ms
149+
INFO
150+
INFO Percentage of the requests served within a certain time
151+
INFO 50% 26 ms
152+
INFO 90% 59 ms
153+
INFO 95% 64 ms
154+
INFO 99% 75 ms
155+
INFO 100% 110 ms (longest request)
156+
```
157+
158+
2. Memory usage(**13 Mb**)
159+
160+
### Restify
161+
162+
```console
163+
./restify.bash
164+
```
165+
166+
### Golang
167+
168+
```console
169+
./golang.bash
170+
```
171+
172+
1. The reults from loadtest
173+
174+
```console
175+
// It is one of the fastest and no errors. It is made for this.
176+
177+
INFO Requests: 0, requests per second: 0, mean latency: 0 ms
178+
INFO Requests: 3820, requests per second: 772, mean latency: 9 ms
179+
INFO Requests: 11529, requests per second: 1541, mean latency: 5 ms
180+
INFO Requests: 20169, requests per second: 1729, mean latency: 4.0 ms
181+
INFO
182+
INFO Target URL: http://0.0.0.0:8000/
183+
INFO Max time (s): 20
184+
INFO Concurrency level: 10
185+
INFO Agent: keepalive
186+
INFO Requests per second: 2000
187+
INFO
188+
INFO Completed requests: 27881
189+
INFO Total errors: 0
190+
INFO Total time: 20.002745433 s
191+
INFO Requests per second: 1394
192+
INFO Mean latency: 5.4 ms
193+
INFO
194+
INFO Percentage of the requests served within a certain time
195+
INFO 50% 4 ms
196+
INFO 90% 8 ms
197+
INFO 95% 10 ms
198+
INFO 99% 19 ms
199+
INFO 100% 339 ms (longest request)
200+
```
201+
202+
2. Memory usage(**231 Mb**)
203+
204+
### Vibora
205+
206+
You should use **$python3.6 -m venv python** and include Vibora folder in it.
207+
208+
```console
209+
./vibora.bash
210+
```
211+
212+
### Django
213+
214+
Some Python frameworks requires you to include all the static files in /static folder and not /. So it was not easy fo make it work.
215+
216+
This will be the last framework to compare for a while.
217+
218+
You should use **$python -m venv python** and include Django folder in it.
219+
220+
```console
221+
./django.bash
222+
```
223+
224+
## Blog posts
225+
226+
1. [How to use Webpack with React](https://www.steadylearner.com/blog/read/How-to-use-Webpack-with-React)
227+
2. [How to use Cypress with React](https://www.steadylearner.com/blog/read/How-to-use-Cypress-with-React)
228+
3. [How to use gRPC with Rust Tonic and Postgresql database](https://www.steadylearner.com/blog/read/How-to-use-gRPC-with-Rust-Tonic-and-Postgresql-database)
229+
4. [How to use Docker commands]
230+
5. [How to use Docker with Rust]
231+
232+
## What left
233+
234+
I should edit each bash files to make every servers copy src/images instead of current implementation to have less folder size.
235+
236+
## Screenshots
237+
238+
![user-result](/src/images/screenshot/user-result.png)
239+
![user-list](/src/images/screenshot/user-list.png)

‎actix.bash

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#!/bin/bash
2+
3+
# Webpack dev server is based on Express. The structure of Acti is similar to the Express project to simplify the test.
4+
5+
echo "[Web]"
6+
yarn build
7+
8+
cp -R src/images/* server/actix/public/src/images
9+
cp -R dist/* server/actix/public
10+
11+
(
12+
echo "[Server]"
13+
cd server/actix
14+
cargo run --release
15+
)
16+
17+

‎django.bash

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#!/bin/bash
2+
3+
(
4+
echo "[Server]"
5+
cd server/python
6+
source bin/activate
7+
python Django/manage.py runserver 0.0.0.0:8000
8+
)
9+

‎express.bash

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
#!/bin/bash
2+
3+
# Webpack dev server is based on Express. Then, use it to test the single page app first.
4+
5+
echo "[Web]"
6+
yarn build
7+
8+
cp -R src/images/* server/express/public/src/images
9+
cp -R dist/* server/express/public
10+
11+
(
12+
echo "[Server]"
13+
cd server/express
14+
yarn
15+
yarn serve
16+
)
17+
18+

‎golang.bash

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#!/bin/bash
2+
3+
# Webpack dev server is based on Express. The structure of Rocket is similar to the Express project to simplify the test.
4+
5+
echo "[Web]"
6+
yarn build
7+
8+
cp -R src/images/* server/golang/public/src/images
9+
cp -R dist/* server/golang/public
10+
11+
(
12+
echo "[Server]"
13+
cd server/golang
14+
go run index.go
15+
)
16+
17+

‎install.bash

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
#!/bin/bash
2+
3+
nvm install 12.3.1
4+
nvm use 12.3.1
5+
yarn
6+

‎jest.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
module.exports = {
2+
verbose: true,
3+
setupFilesAfterEnv: ["<rootDir>/src/__tests__/setup/setupTests.js"],
4+
testPathIgnorePatterns: [
5+
"<rootDir>/src/__tests__/setup/",
6+
"<rootDir>/src/__tests__/examples/",
7+
"<rootDir>/cypress",
8+
"<rootDir>/before"
9+
],
10+
};

‎loadtest.bash

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
#!/bin/bash
2+
# https://www.npmjs.com/package/loadtest
3+
4+
# When you want to see the memory usage, use the command below.
5+
# $ps -eo size,pid,user,command --sort -size | awk '{ hr=$1/1024; printf("%13.2f Mb ",hr) } { for ( x=4 ; x<=NF ; x++ ) { printf("%s ",$x) } print "" }' | cut -d "" -f2 | cut -d "-" -f1
6+
7+
# Use it with grep if you want. For example,
8+
# $ps -eo size,pid,user,command --sort -size | awk '{ hr=$1/1024; printf("%13.2f Mb ",hr) } { for ( x=4 ; x<=NF ; x++ ) { printf("%s ",$x) } print "" }' | cut -d "" -f2 | cut -d "-" -f1 | grep "cargo"
9+
10+
npm install -g loadtest
11+
loadtest http://0.0.0.0:8000/ -t 20 -c 10 --keepalive --rps 2000
12+

0 commit comments

Comments
 (0)