Permalink
Browse files

Fixed markdownlint errors and updated js entry point.

We now use `app.js` as entry point.
  • Loading branch information...
deconstructionalism
deconstructionalism committed Oct 24, 2018
1 parent 7921541 commit 8a2de18c2bd6dce7654ac3398fa644c1d4d44b89
@@ -2,7 +2,7 @@
https://mermaidjs.github.io/mermaid-live-editor/
```mermaid
graph RL
B[fa:fa-code index.js]
B[fa:fa-code app.js]
A(fa:fa-home index.html)
subgraph <resource name> folder
C[fa:fa-code events.js]
@@ -15,7 +15,6 @@ graph RL
A == loads ==> B
E-. modifies .-> A
classDef js fill:#EAA,stroke:#333,stroke-width:4px;
classDef html fill:#EFA,stroke:#333,stroke-width:4px
class B,C,D,E js
@@ -27,86 +26,98 @@ graph RL

## Description

**Browser Template** allows us to use a specific pattern for separating our HTML from our HTTP Request Javascript, from our Event Handler Javascript, from our DOM update Javascript. This files is intended to help you understand how the different parts of this template interact and work together.

#### Characteristics

- this pattern was designed by General Assembly. Other people / organizations may use a different pattern
- the pattern is how the files are organized, how they `require` eachother, and how we hook up the functions within the files
- by following this pattern, we avoid giant code files and write short, modular code
- separating functionality accross files allows us to "separate concerns" within our program logic
**Browser Template** allows us to use a specific pattern for separating our HTML
from our HTTP Request Javascript, from our Event Handler Javascript, from our
DOM update Javascript. This files is intended to help you understand how the
different parts of this template interact and work together.

### Characteristics

- this pattern was designed by General Assembly. Other people / organizations
may use a different pattern
- the pattern is how the files are organized, how they `require` each other,
and how we hook up the functions within the files
- by following this pattern, we avoid giant code files and write short, modular
code
- separating functionality across files allows us to "separate concerns" within
our program logic
- there is more detailed info on **Browser Template** [here](https://git.generalassemb.ly/ga-wdi-boston/browser-template)

#### Required Knowledge
### Required Knowledge

- how to use `module.export` and `require` to export values/functions from files, and import modules, respectively
- how to use `module.export` and `require` to export values/functions from
files, and import modules, respectively
- standard jQuery DOM interactions / manipulations
- HTTP requests
- HTTP requests specifically using jQuery's `ajax` method, and how to handle success and failure callbacks from this function
- HTTP requests specifically using jQuery's `ajax` method, and how to handle
success and failure callbacks from this function

## Information Flow Between Files

<img src="./images/diagram.svg" />

## Details About Files

> We are only concerned with files within `assets/scripts/`. All files below are listed starting in `assets/scripts/`.
> We are only concerned with files within `assets/scripts/`. All files below are
> listed starting in `assets/scripts/`.
- `index.html`
- **WHERE DOM ELEMENTS LIVE**
- forms with special name attributes recognized by `getFormFields` module, allowing us to get nicely constructed data objects from our forms
- *for example a `form` in `index.html` like this, with a input value of `5`*:
- ```html
<form action="#" id="book-request">
<input type="text" name="book[id]" id="book-id">
<input type="submit">
</form>
```
- will allow `getFormFields` to get us data of the format:
- ```js
{
book {
id: 5
}
}
```
- `index.js`
- **WHERE EVENT HANDLERS ARE BOUND TO FORM ELEMENTS**
- **WHERE DOM ELEMENTS LIVE**
- forms with special name attributes recognized by `getFormFields` module,
allowing us to get nicely constructed data objects from our forms
- *for example a `form` in `index.html` like this, with a input value of `5`*:
- ```html
<form action="#" id="book-request">
<input type="text" name="book[id]" id="book-id">
<input type="submit">
</form>
```
- will allow `getFormFields` to get us data of the format:
- ```js
{
book {
id: 5
}
}
```
- `app.js`
- **WHERE EVENT HANDLERS ARE BOUND TO FORM ELEMENTS**

- "entry point" from which all other javascript files are loaded
- "entry point" from which all other javascript files are loaded

- *for example*:
- *for example*:

- ```js
// On document ready
$(() => {
$('#book-request').on('submit', bookEvents.onGetBooks);
});
```
- ```js
// On document ready
$(() => {
$('#book-request').on('submit', bookEvents.onGetBooks);
});
```
- `<resource name>` folder:
- `events.js`
- **WHERE EVENT HANDLER FUNCTIONS LIVE**

- event handlers run jQuery `ajax` http request functions &lArr; `api.js`

- event handlers also bind callbacks to the http request function succeeding or failing &lArr; `ui.js`
- event handlers also bind callbacks to the http request function succeeding
or failing &lArr; `ui.js`

- *for example*:

- ```js
const onGetBooks = function (event) {
event.preventDefault();
// this is a simple example that does
// not use `getFormFields`
let bookId = $('#book-id').val();
// this is the ajax request
booksApi.show(bookId)
// these are the callbacks
.done(booksUi.onSuccess)
.fail(booksUi.onError);
};
```
- `api.js`
@@ -133,8 +144,10 @@ graph RL
- *for example*:

- ```js
// these callbacks do not modify the DOM but you could refactor them so that they perhaps render the book info received on success, or render the error message on failure
// these callbacks do not modify the DOM but you could refactor them so
// that they perhaps render the book info received on success, or render
//the error message on failure
// this is what events.js uses as `bookUi.onSuccess'
const onSuccess = function (data) {
if (data.book) {
@@ -143,7 +156,7 @@ graph RL
console.table(data.books);
}
};
// this is what events.js uses as `bookUi.onError'
const onError = function (response) {
console.error(response);
Oops, something went wrong.

0 comments on commit 8a2de18

Please sign in to comment.