Front End Development

Day 2
Pascal Rettig / CTO at Fundraise.com / @cykod
http://bitly.com/bss-frontend2

2-Day schedule - Day 2

Client side templating
OOP Patterns in JavaScript
Debugging JavaScript
Front End / Back End architectures
Intro to Backbone
Integrating with Kinvey
Building a music-twitter clone

Client side templating

Appending HTML using jQuery gets old quick
Wouldn't be nice to use templating like in Rails?
Underscore
Mustache

Rendering with Mustache

<script>
$(function() {
  var search = encodeURIComponent("San Jose");
  $.getJSON('http://api.discogs.com/database/search?callback=?&q=' + search,function(response) {
     var html = $("#album-template").mustache({ albums: response.data.results });

     $("#container").append(html);
  });
});

</script> 

<script type='mustache' id='album-template'>
<ul>
  {{#albums}}
  <li>
    <img src='{{thumb}}' width='64'/> {{title}}  
    {{#year}} / Released {{year}} {{/year}}
  </li>
  {{/albums}}
</ul>
</script>

<div id='container'>

</div>

OOP In Javascript: JSON

Good: easy. Bad: each object separate

<script>

var dog1 = {
    name: "spot",
    speak: function() { $("<div>").text(this.name + ": " + "Woof").appendTo("body"); }
  };

dog1.speak();
dog1.speak();

</script>

OOP In Javascript: Constructor + Prototype

Good: fast, no memory leak. Bad: no private methods, closure

<script>
var Dog = function(name) {
  this.name = name;
}

Dog.prototype.speak = function() { 
  $("<div>").text(this.name + ": " + "Woof").appendTo("body"); 
};

var dog1 = new Dog("spot"),
    dog2 = new Dog("frank");

dog1.speak();
dog2.speak();

dog2.name = "billy";
dog2.speak();

</script>

OOP In Javascript: Constructor

Good: closure, data-hiding. Bad: slower, more memory

<script>
var Dog = function(name) {
  this.speak = function() {
    $("<div>").text(name + ": " + "Woof").appendTo("body"); 
  }
}

var dog1 = new Dog("spot"),
    dog2 = new Dog("frank");

dog1.speak();
dog2.speak();

dog2.name = "billy";
dog2.speak();

</script>

Debugging JavaScript

Sample File
Watches
Step Debugging
Network Requests
Profiling

Front-end / Back-end Architectures

HTML Links and Forms - little to no JavaScript, no client side rendering
Ajax - Some JavaScript, still server-side rendering
JavaScript MVC - Generally only client side rendering
Hybrid - Both client and server-side rendering

Which is best?

It depends on the application.

Backbone.js is a JavaScript MVC-ish framework

Provides a way to structure and organize your JavaScript
Makes it easier to build larger JavaScript applictions
Has a hard dependency on underscore.js
Has a nice, documented code-base at Backbonejs.org
Canonical ToDo example

Rendering with Mustache self-contained


<script>
$(function() {

  var Album = Backbone.Model.extend({});

  var AlbumCollection = Backbone.Collection.extend({
    model: Album
  });


  var AlbumCollectionView = Backbone.View.extend({
    tagName: "ul",
    render: function() {
      $(this.el).empty();
      this.collection.each(function(album) {
        $(this.el).append(new AlbumView({model: album }).render().el);
      },this);
      return this;
    }
  });

  var AlbumView = Backbone.View.extend({
    tagName: "li",

    initialize: function(options) {
      _.bindAll(this,"render");
      this.model.on("change",this.render);
    },

    render: function() {
      $(this.el).empty()
                .append($("#album-template").mustache(this.model.attributes));
      return this;
    }
  });

  var albums = null;

  var search = encodeURIComponent("San Jose");
  $.getJSON('http://api.discogs.com/database/search?callback=?&q=' + search,function(response) {

     albums = window.albums = new AlbumCollection(response.data.results);

     $("#container").append(new AlbumCollectionView({ collection: albums }).render().el);
  });
});

</script> 

<script type='mustache' id='album-template'>
<div>
  <img src='{{thumb}}' width='64'/> {{title}}
  {{#year}} / Released {{year}} {{/year}}
</div>
</script>

<div id='container'>

</div>

Kinvey

A service for storing data in the cloud
Can push and pull arbitrary data in and out
Has a JavaScript API
Backbone w/ Kinvey

First: Facebook Javascript SDK

Facebook has a number of useful API's, we'll be using two:

Facebook Javscript SDK

A way of interfacing with Facebook entirely via Javascript (Yay!)
Facebook Graph API

Their main API for accessing and posting data
All require we make a new facebook application

Facebook Javascript API Basics

Api Setup (After creating an application here: https://developers.facebook.com/apps

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : 'YOUR APP ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'http://WWW.MYDOMAIN.COM/channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
</script>

Channel.html file:

 <script src="http://connect.facebook.net/en_US/all.js"></script>

Facebook Javascript API Basics #2

Then, we can force a login:

<script>
FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     alert("Ur Logged in!");
   } else {
     console.log('User cancelled login or did not fully authorize.');
   }
 }, {scope: 'email'});
</script>

after we're logged in we can call the Graph API:

<script>
     FB.api('/me', function(response) {
       console.log('Good to see you, ' + response.name + '.');
     });
</script>

Graph API

The preferred method to pull data in and out of facebook
Reasonably well documented: Graph API
Everything has a graph id - either a numeric ID or a name: http://graph.facebook.com/pascalrettig or 'http://graph.facebook.com/678578882

Before we go too much further...

Let's play around with the Facebook Graph Api via
Graph API Explorer

Let's connect With Facebook

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : '186704188064658',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });
 
 
function clicker() {
 FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me', function(response) {
       alert('Good to see you, ' + response.name + '.');
     });
  }
});
 
}
 
  
</script>
  
<a href='javascript:void(0);' onclick='clicker();'>Click Me to Connect!</a>

Let's grab some more data, and the print it out

We can access the data variable in the console via: $("iframe")[0].contentWindow.responseData

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
  FB.init({
    appId  : '186704188064658',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml  : true, // parse XFBML
    channelUrl : 'channel.html', // channel.html file
    oauth  : true // enable OAuth 2.0
  });

 
function clicker() {
 FB.login(function(response) {
   if (response.authResponse) {
     console.log('Welcome!  Fetching your information.... ');
     FB.api('/me/friends', function(response) {
        console.log(response);
     });
  }
});
 
}
 
</script>
  
<a href='javascript:void(0);' onclick='clicker();'>Click Me to Connect!</a>

Project

Let someone search a song via discogs API
Let them add that song to the Kinvey collection
Find a JavaScript API or two - perferably JSONp Programmable Web
Create a Mashup using Bootstrap to style

Front End Development

Day 2 Pascal Rettig / CTO at Fundraise.com / @cykod http://bitly.com/bss-frontend2

2-Day schedule - Day 2

Client side templating

OOP Patterns in JavaScript

Debugging JavaScript

Front End / Back End architectures

Intro to Backbone

Integrating with Kinvey

Building a music-twitter clone

Client side templating

Appending HTML using jQuery gets old quick

Wouldn't be nice to use templating like in Rails?

Underscore

Mustache

Rendering with Mustache

OOP In Javascript: JSON

OOP In Javascript: Constructor + Prototype

OOP In Javascript: Constructor

Debugging JavaScript

Sample File

Watches

Step Debugging

Network Requests

Profiling

Front-end / Back-end Architectures

HTML Links and Forms - little to no JavaScript, no client side rendering

Ajax - Some JavaScript, still server-side rendering

JavaScript MVC - Generally only client side rendering

Hybrid - Both client and server-side rendering

Which is best?

It depends on the application.

Backbone.js is a JavaScript MVC-ish framework

Provides a way to structure and organize your JavaScript

Makes it easier to build larger JavaScript applictions

Has a hard dependency on underscore.js

Has a nice, documented code-base at Backbonejs.org

Canonical ToDo example

Rendering with Mustache self-contained

Kinvey

A service for storing data in the cloud

Can push and pull arbitrary data in and out

Has a JavaScript API

Backbone w/ Kinvey

Facebook

First: Facebook Javascript SDK

Facebook Javscript SDK

Facebook Graph API

All require we make a new facebook application

Facebook Javascript API Basics

Facebook Javascript API Basics #2

Graph API

The preferred method to pull data in and out of facebook

Reasonably well documented: Graph API

Everything has a graph id - either a numeric ID or a name: http://graph.facebook.com/pascalrettig or 'http://graph.facebook.com/678578882

Before we go too much further...

Let's play around with the Facebook Graph Api via Graph API Explorer

Let's connect With Facebook

Let's grab some more data, and the print it out

Project

Let someone search a song via discogs API

Let them add that song to the Kinvey collection

Find a JavaScript API or two - perferably JSONp Programmable Web

Create a Mashup using Bootstrap to style

Day 2
Pascal Rettig / CTO at Fundraise.com / @cykod
http://bitly.com/bss-frontend2

Let's play around with the Facebook Graph Api via
Graph API Explorer