WebFund 2016W Lecture 1

Video

The video for the lecture given on January 7, 2016 is now available.

Notes

In-Class Notes

Lecture 1
---------

web servers
  - apache, nginx

web browsers (clients)
  - firefox, chrome, IE, Safari
  
web protocols
  - HTTP


When you view a web page:
 - browser sends a GET request for the URL to a web server
 - web server sends back a document
 - browser renders document and makes more GET requests

Web pages are, at base, HTML documents with other stuff

Major web renderers
 - Gecko (Firefox)
 - Blink (Chrome, fork of WebKit)
 - Trident (MSHTML)
 - WebKit
 - EdgeHTML (fork of Trident)

Web renderers interpret:
 - HTML
 - CSS
 - JavaScript

(and they incorporate images and videos)

HTML - specifies basic structure and content of "page"
CSS - makes it pretty (fonts, layout, etc)
JavaScript - code

Read-Eval-Print loop (REPL)

Student Notes

Course Logistics

• This course is about forming a conceptual model of the web
• Notes and other content from previous years can be found on the wiki
• Anil & TA's have office hours
• Tutorials are required
  • Come see a TA promptly if you miss one (do the work beforehand)
• Mark Breakdown Highlights
  • Assignments (lowest grade dropped)
  • Tutorials (20%!! Very important)
• Collaboration
  • Don't transfer bits to each other
  • Don't submit the same thing
  • Cite!!

Strategies for succeeding

• Don't get discouraged! This course is targeted at a wide demographic so there might be stuff you don't understand.
• Try to keep up in your understanding of the general course content. You should not be trying to piece things together from many code snippets from web searches. The core material is all provided for you.

Basics of web technology

• Linux environment provided, but you don't have to use it
• Node
  • Chrome's JavaScript engine + some extra capabilities such as networking and disk I/O
  • Used for server-side development
• Important concepts:
  • Web servers - Apache, Nginx
  • Web browsers (clients) - Firefox, Chrome, IE, Safari, Edge
    • Browsers are more complicated than servers
    • Rendering Engines
    • Gecko (Firefox), Blink (Chrome, fork of Webkit), Trident (MSHTML), WebKit, EdgeHTML (Opera used to have it's own)
    • Web renderers interpret HTML, CSS, and JavaScript
      • HTML specifies layout
      • CSS makes it pretty
      • JavaScript is the code!
      • We use JS on the server BECAUSE it's on the client (other languages could be used instead)
  • Web protocols - HTTP
• What happens when you load the wiki?
  • Homeostasis server is running Ubuntu, with Apache configured to run MediaWiki with PHP
  • Anil's laptop talked to his server (over HTTP), retrieved the main page
    • You can see the details of this in the web developer tools under the network tab! (press Ctrl-Shift-I)
    • Also loaded a bunch of resources
  • In general, for any site:
    • Browser sends a GET request for the URL to a web server
    • Web server sends back a document
    • Browser renders document and makes more GET requests

Node REPL/Intro to JavaScript

• Most interpreted languages have a REPL (Read-Eval-Print-Loop, interactive mode)
• Node is JIT compiled
• Simple arithmetic/equality examples:

>2+2
4
>5 === 2
false
>5 === 5
true
>var x;
undefined
>x
undefined
>x + 3
NaN

• Typos are hard to find in JS (you can use a variable without defining it)
• Example: Reading a file
  • console.log() prints to the console (ex. console.log("Hi there!"))
  • You have to "require" the "fs" module: var fs = require("fs");
  • To read a file (synchronously): fs.readFileSync("testfile.txt");, returns bytes.
    • Specify an encoding, utf-8 is pretty standard. Otherwise it doesn't know what kind of text (or even binary data!) it is
    • Specifically in our example: var contents = fs.readFileSync("testfile.txt", "utf-8");
  • What does sync mean?
    • Synchronicity: Code is done line by line, waiting for operations to complete
    • In this example, our code waited for the readFileSync to end
• Asynchronous programming:
  • You have to specify a callback function - what to do when the operation is done. For our example: var callback = function(err, data) {console.log("Data read:\n" + data);}
  • To use this callback: fs.readFile("testfile.txt", "utf-8", callback);
  • This will call "callback" when the data is done reading