WebFund 2015W Lecture 1

Video & Audio

The audio from the lecture given on January 5, 2015 is now available.

Video is also available, however the audio track is silent.

If anyone manages to merge the audio and video, please contact Prof. Somayaji!

Topics & Radings

It is expected that HTML / CSS is learned on your own at CodeAcademy or own your own.

It might also be helpful to go through the JavaScript and jQuery lessons there as well.

Notes

Original notes from prof

The Web

Client Web Browser - requests "web pages" (JavaScript)

Server Web Server - serves "web pages" (JavaScript)

Modern Web: - downloaded programs talking to programs

Web = HTML + CSS + JavaScript

node.js

- built on async I/O

read(source, buf, callback); do something with buf

- data not available, program waits (blocks)

Referer

The Web

The internet started as a piece of technology in the early 70’s, but the World Wide Web was developed in 1993. The Internet is not the web, the web is much of the traffic on the internet.

Think of something like Netflix, a huge chunk of NA bandwidth, is Netflix the web? No, not all of it.

Fundamentally we can think of the web in simpler terms, at first approximation uses a client - server model. The client requests data from the server and the server serves data to the client. Your browser is connecting to other computers around the world and get a service from them. The web browser is therefore a client.

• Client: Web Browser, which requests “web pages”
• Server: Web Server, which serves “web pages”

Note that not all clients are web browsers and not all requests are for web pages, this is just an example to give the general idea.

The Web was originally designed as a Hypertext Document System. That’s not really what the Web is today, we still request web pages and servers still serve web pages, but what’s really happening is distributed computing. Your web browser is running downloaded programs and then doing something (talking to other computers, requesting other web pages, etc)

Modern Web: Downloaded programs talking to programs

A Modern Web Browser is a very powerful run time environment, and they’re everywhere. If a web browser is requesting programs, and a server is serving programs, what programming language are they in? Mostly JavaScript (there are others, but mostly JavaScript).

The Web is built on JavaScript. If you turn off JavaScript in your web browser, most websites break. Videos, comments, etc can all be inserted via JavaScript!

Web = HTML + CSS + JavaScript

JavaScript

JavaScript is a very flexible language, built on some core computer science principles (based on LISP, which is one of the oldest programming languages developed in 1958, slightly newer than FORTRAN). JavaScript is pretty much LISP with C-like syntax.

While JavaScript might seem like a simple language, it has a lot of depth and power, notably because it’s based on a programming language developed for AI.

Because JavaScript has been used so much, its runtimes are now ridiculously fast. We’ll be using Node.js, someone took the Chrome web browser, ripped out it’s JavaScript engine and gave it disk I/O and networking capabilities to create a web server called Node.js.

Node does one thing really well, and that’s that it is built on asynchronous input/output. Most programming languages are built on synchronous I/O.

In a synchronous program, we may see some code that does something like read some data into a buffer. While the buffer is being filled, the program waits (blocks). In an asynchronous program however, the program can start to do other things while the buffer is being filled. There is a pitfall to this though. What if we go on to try to do something with the data in the buffer before it is ready to be used? This could cause many different problems. To fix this, we would need to constantly check if the buffer is ready. Repeating such a check is essentially the way to more back to a synchronous version of the code. What we really want to do, is to be notified when it’s done!

Example: If we were to ask the TA’s if they've made up the assignment every 10 mins and wait until it’s done, is that an efficient use of time? No, what I really want to do is say “Go make up the assignment” and then I do something else, then when they’re done they come back and say here’s the assignment.

So how do we do it? We add a parameter to our functions called callback. What is callback? It’s a function (aka code) to run when it completes.

Why use asynchronous and not multithreaded? It’s not as efficient as asynchronous. For example:

read(source, buf, callback);

You tell the read function to run the callback function when it’s read the information. When exactly will that be? You don’t care, you’ve already told the read function what to do with it via the callback.

We will be passing around functions like data.

Fun trivia: As part of HTTP, one of the headers is called “Referer”. Someone misspelled it and it now can’t ever be changed. That is a perfect example of the Web.