Skip to content

Commit d32fc55

Browse files
b09b09
committed
notes ammended with modular notes and scripts have top 10 animals started
1 parent 7abb46d commit d32fc55

Some content is hidden

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

54 files changed

+31085
-5
lines changed

‎super_notes.md

+182
Original file line numberDiff line numberDiff line change
@@ -4555,3 +4555,185 @@ BeerData.prototype.getData = function () {
45554555
}
45564556
```
45574557
</details>
4558+
4559+
## Pub/Sub with Nested Reusable Views
4560+
4561+
<details>
4562+
<summary>
4563+
Intro
4564+
</summary>
4565+
4566+
### Intro
4567+
4568+
Until now we have been using the Pub/Sub pattern with custom events to create applications that have modular front-end code. The Pub/Sub pattern has enabled us to design our programs to be extensible and maintainable, adhering to the single responsibility principle and keeping a clear separation of concerns.
4569+
4570+
As our applications grow in size and the information being is displayed on the page becomes more complex, we want to ensure that our applications continue to be well-structured and easy to reason about. One way that we can do this is to use nested and reusable views.
4571+
4572+
#### Reusable Views
4573+
4574+
By making our views generic we make them reusable. We can then populate the same view with different information, enabling us to use it multiple times in the same application, which makes our code DRY, or to use it in again in different applications.
4575+
4576+
Let's look at an exmaple on the [BBC Weather website] (https://www.bbc.co.uk/weather)
4577+
4578+
![An example of a reused view, where each hour's weather information makes use of the same view](images/reusable_views_weather.png)
4579+
*An example of a reused view, where each hour's weather information makes use of the same view*
4580+
4581+
A view is created to display one hour's weather data, and that view is then reused, each time populated with relevant information.
4582+
4583+
#### Nested Views
4584+
4585+
Implementing nested views is of organising our views in a tree-like structure. A nested view is a view that is rendered by another view.
4586+
4587+
For example, if we look at [BBC Weather's homepage](https://www.bbc.co.uk/weather), there might be a Header view that is responsible for rendering a Logo view, a NavBar view and a SearchBar view. The Logo, NavBar and SearchBar view would be nested inside the Header view.
4588+
4589+
![Example structure of nested views in the BBC weather website](images/nested_views.png)
4590+
*Example structure of nested views in the BBC weather website*
4591+
4592+
![Nested views showing the rendering responsibilities](images/view_render_responsibilties_weather.png)
4593+
*Nested views where the Header view is responsible for rendering the other views*
4594+
4595+
If each section of our application follow this pattern, as the complexity of the page display increases, the views will continue to be easy to reason about.
4596+
4597+
> Instructor note: Give out code
4598+
4599+
</details>
4600+
4601+
<details>
4602+
<summary>
4603+
Paired Discussion Task
4604+
</summary>
4605+
4606+
#### Paired Discussion Task: (40 minutes)
4607+
4608+
Your task is to investigate the provided codebase to understand the application architecture. Thinking about the design decisions that have been made and why, will help us understand how we might structure our more complex applications in the future.
4609+
4610+
Run the _Languages of the World_ application:
4611+
4612+
```bash
4613+
npm run build
4614+
```
4615+
Open index.html in the browser and select a continent from the menu.
4616+
4617+
#### Application Data
4618+
4619+
- The `Continents` model makes an `XMLHttpRequest` to an API. Make the same request in the browser to see what data the model is receiving. To do this you can copy-paste the URL into the address bar of your browser and view the JSON.
4620+
4621+
#### Application Architecture
4622+
4623+
- Looking at the codebase, draw a diagram to visualise the Pub/Sub event and data flow through the app.
4624+
4625+
#### Application Views
4626+
4627+
- Using the browser Inspect pane in the devtools to view the DOM, draw out the structure of the web page. Use the ids and classes as the labels.
4628+
4629+
- Looking at the codebase, draw a tree-diagram to show the view rendering responsibility hierarchy.
4630+
4631+
Answer the following questions:
4632+
4633+
2. Which views are rendered more than once?
4634+
3. Which views are nested in which other views?
4635+
4. What are the benefits of reusing views in this way?
4636+
4637+
</details>
4638+
4639+
<details>
4640+
<summary>
4641+
Solutions
4642+
</summary>
4643+
4644+
### Solutions
4645+
4646+
#### Application Architecture
4647+
4648+
![Event and data flow](images/languages_of_the_world_data_flow_diagram.png)
4649+
*Pub/Sub event and data flow through the app*
4650+
4651+
#### Application Views
4652+
4653+
![Structure of the web page](images/languages_of_the_world_page_structure.png)
4654+
*Structure of the web page*
4655+
4656+
![Event and data flow](images/view_render_responsibilities.png)
4657+
*Hierarchy of responsibilities for view rendering*
4658+
4659+
Which views are rendered more than once on the page?
4660+
<details>
4661+
<summary>Answer:</summary>
4662+
4663+
`CountryView` and `LanguageListView`
4664+
4665+
</details>
4666+
<br>
4667+
4668+
4669+
Which views are nested in which other views?
4670+
<details>
4671+
<summary>Answer</summary>
4672+
4673+
- The `CountryView`s are nested in `ContinentView`, displaying all the countries of the selected continent.
4674+
- One `LanguageListView` is nested inside each `CountryView` to display the country's languages.
4675+
4676+
</details>
4677+
<br>
4678+
4679+
What is the benefits of nesting views in this way?
4680+
<details>
4681+
<summary>Answer</summary>
4682+
4683+
By nesting views we can maintain modularity in our front-end code, where each view is responsible for rendering one section of the page. The tree-like structure that it produces is easy to reason about.
4684+
4685+
</details>
4686+
<br>
4687+
4688+
What is the benefits of reusing views in this way?
4689+
<details>
4690+
<summary>Answer</summary>
4691+
4692+
By creating generic views that can be populated for each item keeps the code DRY and maintainable.
4693+
4694+
</details>
4695+
</details>
4696+
4697+
<details>
4698+
<summary>
4699+
Protecting API Keys
4700+
</summary>
4701+
4702+
### Protecting your API key
4703+
4704+
There are bots that scan GitHub for these keys to abuse them. Maybe there's not much damage someone can do with a Spotify key. But if someone had your AWS one...they could spin up a million servers and charge it to your credit card!
4705+
4706+
The solution is to stick it in another file that you then `.gitignore`.
4707+
4708+
```js
4709+
// helpers/api_key.js
4710+
4711+
const API_KEY = '<paste in the key (token) you were given when you signed up for the API>';
4712+
4713+
module.exports = API_KEY;
4714+
4715+
// e.g const API_KEY = "BQAdE9IadrGHpgckmYyIlRGH..."
4716+
4717+
```
4718+
4719+
```bash
4720+
# .gitignore
4721+
4722+
api_key.js
4723+
```
4724+
4725+
#### Using the key in our request
4726+
4727+
Before we send our request (ie before `request.send()`) we need to include this key in our request so we can be authorized. The way you do this **will vary between APIs** - here is one example -
4728+
4729+
```js
4730+
const API_KEY = require('./helpers/api_key.js')
4731+
4732+
const authorizationHeader = `Bearer ${API_KEY}`;
4733+
request.setRequestHeader("Authorization", authorizationHeader);
4734+
// ...
4735+
// request.send();
4736+
4737+
```
4738+
4739+
</details>

‎super_scripts.md

+22-5
Original file line numberDiff line numberDiff line change
@@ -3174,7 +3174,7 @@ Draw a diagram of your files, detailing the publishing of and subscribing to eve
31743174

31753175
<details>
31763176
<summary>
3177-
public/ **index.html**
3177+
~/public/ **index.html**
31783178
</summary>
31793179

31803180
```html
@@ -3226,7 +3226,7 @@ public/ **index.html**
32263226

32273227
<details>
32283228
<summary>
3229-
src/data/ **planets.js**
3229+
~/src/data/ **planets.js**
32303230
</summary>
32313231

32323232
```js
@@ -3321,7 +3321,7 @@ module.exports = planets;
33213321

33223322
<details>
33233323
<summary>
3324-
src/helpers/ **pub_sub.js**
3324+
~/src/helpers/ **pub_sub.js**
33253325
</summary>
33263326

33273327
```js
@@ -3347,7 +3347,7 @@ module.exports = PubSub;
33473347

33483348
<details>
33493349
<summary>
3350-
src/models/ **solar_system.js**
3350+
~/src/models/ **solar_system.js**
33513351
</summary>
33523352

33533353
```js
@@ -3381,7 +3381,7 @@ module.exports = SolarSystem;
33813381

33823382
<details>
33833383
<summary>
3384-
src/views
3384+
~/src/views
33853385
</summary>
33863386
<br />
33873387

@@ -3490,3 +3490,20 @@ module.exports = PlanetsMenuView;
34903490

34913491
<br />
34923492
</details>
3493+
3494+
<details>
3495+
<summary>
3496+
Top 10 Fastest Animals - Modular Front-End
3497+
</summary>
3498+
<br />
3499+
3500+
<details>
3501+
<summary>
3502+
~/public/ **index.html**
3503+
</summary>
3504+
3505+
3506+
<br />
3507+
</details>
3508+
3509+
</details>

‎week_12/day_4/lab_reuseable_nested_views_munros/images/screen_shot_extensions.png

102 KB
Loading

‎week_12/day_4/lab_reuseable_nested_views_munros/images/screen_shot_mvp.png

99.8 KB
Loading

‎week_12/day_4/lab_reuseable_nested_views_munros/lab_pubsub_requests_munros.md

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
# Scottish Munros App
3+
4+
### Learning Objectives
5+
6+
- Be able to create a web app with a modular front-end
7+
- Be able to implement reusable and nested views
8+
9+
## Brief
10+
11+
Your task is to create an app that displays a list of all the Scottish Munros. (A Munro is a mountain over 3,000 feet). Use the [Munros API](https://munroapi.herokuapp.com/) to make a request to get the data.
12+
13+
### MVP
14+
15+
- Display a list of the mountains.
16+
- Views should be reused where ever possible.
17+
- Any views that are created dynamically should be nested within a wrapper view to avoid app.js having too many responsibilities.
18+
19+
![MVP screenshot](images/screen_shot_mvp.png)
20+
21+
*Screenshot of example result after completing MVP*
22+
23+
### Extensions
24+
25+
Allows a user to filter Scottish Munros by region. When a user selects a region from the drop-down, the mountains for that region, with a selection of their information, should be displayed.
26+
27+
- Add a select that contains a list of regions and allows a user to filters displayed list of mountains by region.
28+
29+
![Extentions screenshot](images/screen_shot_extensions.png)
30+
31+
*Screenshot of example result with extensions complete*
32+
33+
## Considerations
34+
35+
What are the responsibilities of the views and models? What is responsible for listening to the change of the select? What is responsible for rendering the filtered mountains?
36+
37+
Where is there repeated information being displayed where a reusable view could be implemented to help make the front-end code dry? What will be responsible for populating that reusable view for the collection of data?
38+
39+
## Planning
40+
41+
Draw a diagram of your files, detailing:
42+
43+
- the publishing of and subscribing to events.
44+
- the flow of data through the application.
45+
- views that render other views.
46+
47+
A possible approach you could take:
48+
49+
- Make the request for the Munros data in a model
50+
- Publish the Munros data to the rest of the application
51+
- In a list view, subscribe to the channel on which the Munros data has been published
52+
- When you have the Munros data in your list view, iterate over the collection of data and for each munro object, create a detail view that is responsible for rendering one mountain's informtation
53+
54+
In this case, the detail view is the reused view as it is reused for each munro in the data collection. As the list view is responsible for rendering the detail views, the detail views are nested inside the list view.

‎week_12/day_4/lab_reuseable_nested_views_munros/lab_pubsub_requests_munros_end_extensions/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
bundle.js
3+
npm-debug.log

0 commit comments

Comments
 (0)