How (Part) Of the Internet works.

What is the internet?

A network hundreds of thousands of machines, connected directly or indirectly (the web).

Each node is a connected device.

Using the internet.

What happens when you type an address (say, https://ixperience.co.za) into your browser and press “Enter”?

Let's imagine...

that when you type an address, you send a letter (data packets), saying:

"Dear iX, let me see your website!"

To make sure our letter gets to the right place

To make sure our “letter” gets to the right place, your computer will communicate to each of the computers closest to it to find the computer (server) on which the website ixperience.co.za is stored.  Those next computers “ask” the computers closest to them, etc.

IP.

Rather than address with street name, city, zip code and country name, we use IP (Internet Protocol) addresses.  First your computer asks the DNS (Domain Name System) to translate ixperience.co.za to the IP address of the server that contains ixperience.co.za.

Just like a letter needs an address, stamp, and to be written in a language your recipient understands to reach and be read, the data packages that you send to see a site use a protocol called HTTP (Hypertext Transfer Protocol) or HTTPS (encrypted and more secure).

Basically, each website has a server where the its files stay.  The server, when on and connected, waits for requests (our “letters”) received and send back the files that make up the website.

Introduction to fetch() API

XHR

          var xhr = new XmlHttpRequest();


          xhr.open('GET', './some-api/some.json', true);
          // HTTP methods you need to know: GET and POST.


          xhr.onload = function() {
            if(xhr.status === 200) {
              var data = JSON.parse(xhr.responseText);
              console.log(data)
            }
          };


          xhr.onerror = function(err) {
            console.log('Cannot fetch data', err);
          };



          xhr.send();

Basic example of fetch()

// Basic example, by default is a 'GET' request
fetch('url')
.then(function(response) {
	// returns a Response object which is a Promise
});

Example with HTTP POST

 // more common syntax
fetch('url', {
  method: 'POST',
  headers: {
  	'Content-Type': 'application/json'
  },
  body: JSON.stringify({
   latitude: 23.42315,
   longitude: -122.41315
  })
})
.then(function(response){
	// do something with response
});

Promises

https://github.com/stevekane/promise-it-wont-hurt

Promises

var p1 = new Promise(function(resolve, reject){
	// do something 
	var response = { some: 'data'};
	// Fulfilled with a value
	resolve(response);
});

p1.then(function(response) {
	console.log('Fulfilled', response);
}).catch(function(reason){ // rejected
	console.log('Error', reason);
});
		

Callback hell

fs.readdir(source, function (err, files) {
  if (err) {
    console.log('Error finding files: ' + err)
  } else {
    files.forEach(function (filename, fileIndex) {
      console.log(filename)
      gm(source + filename).size(function (err, values) {
        if (err) {
          console.log('Error identifying file size: ' + err)
        } else {
          console.log(filename + ' : ' + values)
          aspect = (values.width / values.height)
          widths.forEach(function (width, widthIndex) {
            height = Math.round(width / aspect)
            console.log('resizing ' + filename + 'to ' + height + 'x' + height)
            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {
              if (err) console.log('Error writing file: ' + err)
            })
          }.bind(this))
        }
      })
    })
  }
})

Fetch

fetch('./some-api/some.json')
  .then(function(response){
  if (response.status === 200) {
    return response.json()
  } else {
    throw new Error(response.statusText);
  }
}).catch(function(error){
    console.log(error);
});

However...

For the weather app you will be using jquery's ajax instead of fetch() because of JSONP

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
 
    // The name of the callback parameter, as specified by the YQL service
    jsonp: "callback",
 
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",
 
    // Tell YQL what we want and that we want JSON
    data: {
        q: "select title,abstract,url from search.news where query=\"cat\"",
        format: "json"
    },
 
    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});