amaseda

Time	Monday	Tuesday	Wednesday	Thursday
9:00am - 10:00am	Robin	Adrian	Adrian	Andy
10:00am - 10:30am, 1:30pm - 2:00pm	Matt	Robin	Adam	Adrian
2:00pm - 3:00pm	Jesse	Matt	Robin	Adam
3:00pm - 4:00pm	Andy	Jesse	Matt	Robin
4:00pm - 5:00pm	Adam	Andy	Jesse	Matt

amaseda

NOTE: This weekend's homework is OPTIONAL! Feel free to spend the next two days taking it easy.

Fun with APIs

Your homework prompt for this weekend is an open-ended one: make something cool using a 3rd party API! There's no need to create a backend for this assignment -- just stick to HTML, CSS and Javascript.

Not sure where to start? Here is a suggested workflow...

1. Set up your HTML and CSS. Figure out what you want your app to look like.
2. Create your AJAX call. Just make sure it's working -- don't worry about handling the response yet.
3. Extract information from your response. How do you go about accessing it?

amaseda

Learning Objectives

• Explain what ReactJS is.
• Compare React to other Javascript frameworks and libraries.
• Create and render a React component in the browser.
• Nest React components.
• Modify the state of a React component through events.

What is ReactJS?

amaseda

// Model / Constructor
var Post = function( info ){
  this.title = info.title;
  this.author = info.author;
  this.body = info.body;
  this.comments = info.comments;
}

// Create Post object

amaseda

var Post = function( info ){
  this.title = info.title;
  this.author = info.author;
  this.body = info.body;
  this.comments = info.comments;
}

var post = new Post({
 title: "My First Post",

amaseda

var Post = function( info ){
  this.title = info.title;
  this.author = info.author;
  this.body = info.body;
  this.comments = info.comments;
}

var post = new Post({
  title: "My First Post",

amaseda

Collection and Specialty Views

Learning Objectives

• Define the role of collection views in Backbone.
• Define the purpose of the el property on a Backbone View.
• Write a collection view that renders model views.
• Write a collection view that listens to collection events.
• Define the role of a specialty view in Backbone.
• Create a specialty view.

amaseda

Collection and Specialty Views

Learning Objectives

• Define the role of collection views in Backbone.
• Define the purpose of the el property on a Backbone View.
• Write a collection view that renders model views.
• Write a collection view that listens to collection events.
• Define the role of a specialty view in Backbone.
• Create a specialty view.

amaseda

App.Views.GrumblesList = Backbone.View.extend({
  el: "#grumbles",

  initialize: function(){
    console.log( "Grumbles view initialized!" );
  },

  renderOne: function( grumble ){
    var view = new App.Views.Grumble({ model: grumble });
    this.$el.prepend( view.$el );

amaseda

App.Views.GrumblesList = Backbone.View.extend({
  el: "#grumbles",

  initialize: function(){
    console.log( "Grumbles view initialized!" );
  },

  renderOne: function( grumble ){
    var view = new App.Views.Grumble({ model: grumble });
    this.$el.prepend( view.$el );