WebFund 2015W Lecture 3

Topics & Readings

Go through the Code Academy tutorials.

Audio & Video

Audio and video from the lecture given on January 12, 2015 are now available. The video has a partial audio track due to corruption; for full audio listen to the mp3.

Notes

Web applications versus web pages

A web page is made up of HTML + CSS + JavaScript.

HTML (Hyper Text Markup Language) defines structure of page
CSS (Cascading Style Sheets) is responsible for the styling of the web pages
JavaScript is the code of the webpage

A web Application is a set of webpages + Server side logic.

When a web page is loaded, the browser sends an HTTP GET request to the web server, the server returns an HTML document. The document can have references to other resources needed to create the web page. Those resources will then be obtained by subsequent GET requests sent out by the browser. Note that other resources may come from other web servers.

What does the server side logic do?

It changes what is returned in response to GET (and POST) requests. Static web servers serve files, while on the other hand dynamic web servers implement logic.

Early web server used CGI (Common Gateway Interface) to do dynamic web pages. An Example of CGI would be executing a perl script to generate dynamic web pages. The problem with using CGI for everything is that you have to run separate process for each web request, which is rather expensive and not a great architecture.

One solution is to keep a program continuously running to handle each incoming request. Doing this alleviates the cost of creating a new process at each request.

Keep in mind that node does not eliminate a static server, but instead it offers an easier way to implement a dynamic server.

Node

What is Node?

Node is a JavaScript execution environment with networking and disk input and output (I/O) support.

JavaScript is limited in what it can do. Node helps to deal with this limitation however, Node by itself still does not have much functionality, we need to add *modules* to make it better.

NPM

NPM = Node Package Manager

The Node Package Manager lets us load the modules that a node application depends on.

Express

A framework is a scaffolding for an application. A framework generation tool helps you to generate a simple application that runs but doesn't do much, then you can add in the functionality you want. The Express generator can me used to make a basic Node application with a MVC (model, view, controller) styled structure and some useful modules.

Some important contents of an Express application:

bin/www: This is the startup script for the application.
app.js: This is the main file that you will start editing when working on your application. Although it is not the highest level script of the application, it is the highest level one that you should have to modify.
public folder: All static resources (html pages, images, css) should be placed in here.
node_modules folder: This is where all modules will be kept.
packages.json: Contains information about the dependencies of the application. From the root of the application, the command npm install can be entered in a terminal to install all dependencies to the node_modules folder.

With a basic application generated and its dependencies installed, it can then be run as a server. This is done by running the startup script (the www script located in the bin folder). By default, the server can be accessed at localhost:3000.

localhost:3000 - What does this mean?

localhost is the machine you are operating on. In 2406 we will do everything off localhost. local host can be replace with your IP address i.e 134.117.222.90:3000. 3000 is the standard development port we will be using. Usually to connect to port 80 you have privileges, and we do not want that, because no one knows how your code will react.

A favicon is the little icon that shows on the corner of your browser tab for a web site.

JavaScript

Some items that throw people off:

It is loosely typed
Weird globals
null is an object

JavaScript can be said to be a first draft of a great language. The first rule of the web is compatibility, which is one of the reasons why JavaScript has not been "fixed".

Some properties of JavaScript:

C-like syntax
Loosely typed - What does this mean? It means you do not specify types for variables. That doesn't mean there are no types.
Identifiers can refer to data of any type
Numbers are ALL DOUBLES i.e Double Precision Floats(floating point i.e no integers)
Object-oriented
NO CLASSES - only prototypes
Lexically scoped - Meaning that a variable can only be reference within the scope in which it was defined
JavaScript has no compile phase