Skip to content

Commit

Permalink
Merge pull request AdaGold#11 from AdaGold/dpr/rolodex-questions
Browse files Browse the repository at this point in the history
Looks good.

Add Rolodex Questions, do some more organizing
  • Loading branch information
CheezItMan authored Dec 15, 2016
2 parents 027e4e1 + a21c876 commit ae132a4
Showing 1 changed file with 52 additions and 9 deletions.
61 changes: 52 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
# Backbone Review
Today we'll be doing a review of Backbone. This is important, because tomorrow we'll be modifying your tic-tac-toe program to use a Backbone front-end.

## Intention
Let's think about the types of applications that we have built using JavaScript thus far. Scrabble was a basic functional program, but didn't really have any front-end component that did DOM manipulation or eventing. Trek was a nice SPA that used AJAX to interact with an API and jQuery events to provide much of the functionality. These types of applications were fairly small with not a lot of features or components that were difficult to keep track of.

Let's say that Trek had 5 times as many features that were built with similar interactions with APIs and events. This would be much harder to keep track of utilizing the unstructured process we were using originally. **This is where we will see the greatest use-case for utilizing Backbone as our JS library.**
This review will have three sections:

## Setup
This repo includes a completed Backbone application version of Trek that we will refer to for these activities.

You should **fork and clone this repository to follow along.**
1. General Backbone review
1. Looking back at Rolodex, and Charles' implementation
1. Looking at a new Backbone site (this repo)

***

Expand Down Expand Up @@ -94,7 +91,7 @@ App.js is our starting file for execution. It creates the models & our Applicat
### Views
- **ApplicationView** was the most arbitrary. Why is it there?
- The ApplicationView controls the whole viewport and handles the form for creating new Contacts.
- **RolodexView**
- **RolodexView**
- The RolodexView manages the list of Contacts and listens for events on the collection and when individual cards are selected. When a card is selected it triggers an event which the Rolodex listens to. Then the Rolodex updates the modal to show the contact details.
- **ContactView**
- A ContactView renders one Contact Model using an underscore template.
Expand Down Expand Up @@ -129,9 +126,55 @@ If this process sounds familiar, it's because it's basically the same as having

- **JQuery** Anytime you see that money sign, you're working with a Jquery object. That Jquery object is set by referring to a CSS selector for example $('body') to select the body element of the DOM.

### Questions from Homework
**What parts of the page does the ApplicationView directly manage?**

The ApplicationView manages the "New Contact" form.

**What parts of the page does the RolodexView directly manage?**

The RolodexView manages the list of contacts and the details modal. It also listens for click events to hide the modal.

**What parts of the page does the ContactView directly manage?**

A ContactView manages a single contact card.

**Which views are rendered when the RolodexCollection has been updated?**

The RolodexView and all ContactViews.

**For all custom events, list the following:**

1. Which view triggers the event
1. Which view handles/listens for the event

We'll include all events here, not just custom ones.

| Event | Type | What Triggers | What Handles/Listens |
|:-------------------------|:-------------------|:--------------|:---------------------|
| Click on `Save` button | DOM | The user | ApplicationView |
| Click on `Clear` button | DOM | The user | ApplicationView |
| Click on a contact card | DOM | The user | ContactView |
| Click off a contact card | DOM | The user | RolodexView |
| `update` the Rolodex | Backbone Automatic | Backbone when the collection is updated. Updates come from ApplicationView (add a contact) | RolodexView |
| `select` a contact card | Custom | ContactView when the card is clicked | RolodexView |

Is anything missing from this list that you used in your version of Rolodex?

***

## 3) Looking at Trek-Backbone How Elements Interact

### Intention
Let's think about the types of applications that we have built using JavaScript thus far. Scrabble was a basic functional program, but didn't really have any front-end component that did DOM manipulation or eventing. Trek was a nice SPA that used AJAX to interact with an API and jQuery events to provide much of the functionality. These types of applications were fairly small with not a lot of features or components that were difficult to keep track of.

Let's say that Trek had 5 times as many features that were built with similar interactions with APIs and events. This would be much harder to keep track of utilizing the unstructured process we were using originally. **This is where we will see the greatest use-case for utilizing Backbone as our JS library.**

### Setup
This repo includes a completed Backbone application version of Trek that we will refer to for these activities.

You should **fork and clone this repository to follow along.**

Each component is responsible for specific functionality of our application. These components rely on each other, which can quickly complicate how data flows through our application.

The below activities practice understanding how the components interact with each other.
Expand Down

0 comments on commit ae132a4

Please sign in to comment.