Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit effe853

Browse files
Updated notes on JSON Server, JSON Schema Faker
1 parent 63c1c63 commit effe853

File tree

1 file changed

+105
-0
lines changed

1 file changed

+105
-0
lines changed

‎README.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -950,6 +950,111 @@ For example, we can use Polyfill.io to *only* polyfill FetchAPI:
950950
- JSON Server
951951

952952

953+
#### JSON Schema Faker
954+
955+
In order to emulate some behavior and make the test data more robust, we can employ a mocking library. In this case we used JSON Schema Faker to generate random test data based on a schema and then used that test data from our test page.
956+
957+
##### Details
958+
959+
1. Added functionality to `index.js` in order to make the `delete` links work next to each user
960+
961+
```javascript
962+
global.document.getElementById('users').outerHTML = usersBody;
963+
964+
const deleteLinks = global.document.getElementsByClassName('deleteUser');
965+
966+
Array.from(deleteLinks, link => {
967+
link.onclick = function (event) {
968+
event.preventDefault();
969+
970+
const element = event.target;
971+
deleteUser(element.attributes["data-id"].value);
972+
973+
const row = element.parentNode.parentNode;
974+
row.parentNode.removeChild(row);
975+
};
976+
});
977+
```
978+
979+
2. Next, since we don't yet have a deleteUser function, we need to modify the `userApi.js` to include a deleteUser function
980+
1. This new code uses the `fetch` library (see above)
981+
2. This new code also uses an update version of the `getBaseUrl` function from baseUrl.js
982+
983+
```javascript
984+
...
985+
const baseUrl = getBaseUrl();
986+
...
987+
export function deleteUser(id) {
988+
return del(`users/${id}`);
989+
}
990+
...
991+
function del(url) {
992+
const request = new Request(baseUrl + url, {
993+
method: 'DELETE'
994+
});
995+
996+
return fetch(request).then(onSuccess, onError);
997+
}
998+
...
999+
```
1000+
1001+
```javascript
1002+
export default function getBaseUrl() {
1003+
const inDevelopment = window.location.hostname === 'localhost';
1004+
1005+
return inDevelopment ? 'http://localhost:3001/' : '/';
1006+
}
1007+
```
1008+
1009+
3. Now, the `getBaseUrl` function returns differently based on local vs. "Production"
1010+
1. If the code is running locally, then in returns the JSON Server URL, `http://localhost:3001/`
1011+
4. Finally, in order to generate the fake data on the fly each time the application is started, we need to modify the `package.json` file by adding some new functions
1012+
1. We've created a script to generate the mock data, calling `generateMockData.js`
1013+
2. We've created a start (and prestart) for starting up JSON Server, which serves up the generated data from `db.json` via the JSON Server URL (`http://localhost:3001/users`)
1014+
1015+
```json
1016+
...
1017+
"start":"npm-run-all --parallel security-check open:src lint:watch test:watch start-mockapi",
1018+
...
1019+
"generate-mock-data": "babel-node buildScripts/generateMockData",
1020+
"prestart-mockapi": "npm run generate-mock-data",
1021+
"start-mockapi": "json-server --watch src/api/db.json --port 3001"
1022+
...
1023+
```
1024+
1025+
## Project Structure
1026+
1027+
### Demo Application
1028+
1029+
Provides examples of:
1030+
1031+
- Directory structure and file naming
1032+
- Framework usage
1033+
- Testing
1034+
- Mock API
1035+
- Automated deployment
1036+
- Codifies decisions
1037+
- coding standards, etc.
1038+
- Interactive example of working with starter kit
1039+
1040+
### Project Structure Tips
1041+
1042+
- JavaScript belongs in a .js file
1043+
- Avoid dynamically generating JavaScript logic. Dynamically generate JSON instead
1044+
- Consider organizing by feature (on larger projects) otherwise Organize by File Type
1045+
1046+
| Organization Type | Examples |
1047+
| --------------------- | ----------- |
1048+
| Organize by File Type | /components |
1049+
| | /data |
1050+
| | /models |
1051+
| | /views |
1052+
| Organize by Feature | /authors |
1053+
| | /courses |
1054+
| | |
1055+
1056+
- Extract logic into POJO (Plain Old JavaScript objects)
1057+
- Pure logic; no framework-specific code
9531058

9541059
## Bibliography
9551060

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /