Introduction to Wed Dev

Client-Server Architecture

Internet

Server

Client

Client

Client

HTTP

  • Hypertext Transfer Protocol
  • The protocol to exchange or transfer hypertext
  • E.g. a client requests a webpage from a server using a HTTP request

HTTP Methods

  • GET
  • DELETE
  • PUT
  • POST
GET /index.html HTTP/1.1
Host: www.example.com
HTTP/1.1 200 OK
Date: Mon, 1 Jan 2015 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 31 Dec 2014 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Content-Type: text/html; charset=UTF-8
Content-Length: 131
Accept-Ranges: bytes
Connection: close

<html>
<head>
  <title>An Example Page</title>
</head>
<body>
  Hello World
</body>
</html>

Client Request

Server Response

Status Codes

  • 200 OK
  • 304 Not Modified
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error

Node.js

Node.js

  • Runtime Environment
  • Runs on Windows, Mac OS X, Linux
  • Node.js applications are written in Javascript
  • Javascript is executed using Google V8 JS engine
  • V8 is written in C++ (very fast)
  • Single-threaded
  • Non-blocking IO

Non-blocking IO

Blocking Code

function exponentiate(base, index) {
    var ans = base;
    for (var i=1; i<index; i++) {
        ans = ans * base;
    }
    return ans;
}

console.log(exponentiate(10, 6));

console.log("Hello World");

Non-Blocking Code with callbacks

function exponentiate(base, index, cb) {
    var ans = base;
    for (var i=1; i<index; i++) {
        ans = ans * base;
    }
    cb(ans);
}

exponentiate(10, 6, function callback(ans) {
    console.log(ans);
});

console.log("Hello World");

Non-blocking code allows for highly concurrent applications, allowing support for tens of thousands of concurrent connecions

NPM

  • Node Package Manager
  • Useful frameworks and libraries
  • npmjs.com

Practise Time

  1. Install Node.JS (nodejs.org)
  2. Go to nodeschool.io

ICC: Intro to Web Dev 1

By Arnold Tan

ICC: Intro to Web Dev 1

  • 416