Your First Backend Server

• Basically, 當你執行 "npm start" 之後，你就啟動了一個 "node.js server", 跑在你的電腦 (i.e. localhost) 上，並且透過 port 3000 來跟外界溝通。

• 而伺服器(server)上面的後端服務(backend service)會一直傾聽相關的需求，例如：發現程式碼有更新，就啟動重新編譯的動作，並刷新服務程式

Toward a complete web service

• 一個完整的網路服務應用通常要有一個後台(backend)，並且有資料庫(database)來儲存用戶或者是服務流程中的相關資料

• 而上述的服務通常會放在一個有固定 IP 的伺服器，並且去申請 domain name, 讓客戶端(client)可以透過 URL(e.g. 網址) 來取得服務

Localhost as a local web server

• 開發者在開發網路服務的時候，為了測試方便，會先使用自己的電腦來作為後端的伺服器，這就是為什麼會有在開發的時候 backend 與 frontend 都在同一台機器(i.e. localhost)的現象。等到開發到一定程度之後再來 deploy 到雲端 or 機房的機器上面。

基本上任何可以跑在伺服器(電腦)的程式語言都可以用來實現後端的 server

我們接下來要介紹目前用 JavaScript 做後端最流行的框架：Node.js

Node.js 的核心就是 Google 開源的 Chrome V8 JS 引擎 (in C++)

Node.js 雖然有 .js, 但它並不是指某個單一的 JS 檔案

• 事實上，它是個 JS runtime environment, 允許新增各種用 JS 寫的功能模組 (modules)，包含了 file system I/O, networking, binary data (buffers), cryptography functions, data streams, etc.

Node and npm

• 它的各種模組可以透過像是 "npm" (Node Package Management, introduced in 2010) 等工具來管理，而且由於它開源的關係，Node 相關的套件正在以非常驚人的速度在增加

所以，面對現實，如果你要學 Web Programming, 然後只想 focus 在一個語言，那學 JavsScript 準沒錯，而且 Node.js 是必學！

非常活躍的 Node.js Project

• 下星期 v12 就要出來了！

Node.js Versions

• 每六個月有個 Major Release (四月、十月)

• 奇數版本在十月份發行的時候，先前在四月發行的偶數版本就會自動變成 Long Term Support (LTS) 版本, 然後會被積極、持續地維護 18 個月，結束後會被延長維護 12 個月，然後就壽終正寢

• 奇數版本沒有 LTS

Node.js is singly-threaded, event-driven, and non-blocking I/O

Recall: Blocking vs. Non-blocking

• 因為 Node.js 是 singly-threaded, 然後又讓要花較多時間的 I/O 利用 non-blocking 的方式來溝通，因此，可以同時 handle 成千上萬個 events, 而不會有一般平行程式會遇到的 context switching 的 overhead.
• 而這些 non-blocking tasks 通常是透過 callback functions 來告知主程式任務完成，並且利用 event loop 來做到非同步 (asynchronous) 的排程，也就是說，事件之間不會有事先固定的順序，而是按照實際完成的先後順序來處理，可以盡量省下事件之間互相等待的情形

CommonJS 規範

• CommonJS 的誕生是為了要讓眾多的 JS modules 有一個共同的標準，得以彼此共生在 browser 以外的不同環境底下，建立應用生態系
• 主要包含了 模組規範、套件規範、I/O、File System、Promise 等
• Node.js 就是 CommonJS 的一個主要實踐者

CommonJS 是在 runtime 加載(require) modules

let { stat, exists, readFile } = require('fs');
const math = require('math');

• 然後就可以用了：

console.log(math.add(1, 2));

• 至於輸出模組，則用 "exports.functionName"

exports.incrementOne = function (num) {
  return math.add(num, 1);
};

ES6 則是強調「靜態時」就要決定模組的相依性

• By "export" & "import"

export var firstName = 'Michael';
export function multiply(x, y) { return x * y; } as MM;
export class MyClass extends React.Component...;

• from 後面的 path 可以是絕對或是相對位址; '.js' 可省

import { foo } from './myApp.js';
import { aVeryLongName as someName } from '../someFile.js'

"export default"

• 在前面的例子當中，使用者需要知道 import 進來的檔案裡頭原先的那些變數、function、class 的名字為何，需要跟原來檔案裡頭定義的名字一樣，才可以使用
• "export default" 則讓我們可以不用管原來檔案裡頭這些function/class 叫什麼名字，甚至是可以 anonymous

// Add.js
export default (a, b) => (a+b);

• 不過既然 function/class 都可以 anonymous 了，所以：
  1. export 的檔案就只能有一個 "export default" 的 function or class
  2. 在 import 時的名字是屬於 import 那個檔案的 scope
  3. from 後面的檔案名稱可以把 .js 省略

// import an (anonymous) function from "Add.js"
// The name of the function is (re-)named to "MyAdd"
import MyAdd from "Add";

講了那麼多，那我要怎麼開使使用 Node.js 以及他的 modules 呢？

[Example] Save the following as a file "test.js"

const http = require('http');
const PORT = process.env.PORT || 3000;
const server = http.createServer(function(req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
});
server.listen(PORT, function() {
  console.log(`Server listening on: http://localhost:${PORT}`);
});

• 然後執行 "node test.js"
• 打開 "localhost:3000" 看看！

• 當然，你也可以直接用 node 的 command line.

• 只要在 terminal 鍵入 "node", 你就可以試用各種 Node.js 的指令與模組了！ (Use .help to get help)

我們往後會再教大家如何建立 Node.js server, 現在先來學一個 Node.js 的 "web framework" –- Express.js

My first Express App

• express express-test1
  • It will create an "express app" called "express-test1"
  • cd express-test1
  • npm install
  • npm start
  • go to "localhost:3000"

• 不過，跟 create-react-app 不同的是，當你修改檔案的時候，上頁的 node server 並不會自動重啟
• 解決方式：npm install nodemon –save
  • Note: "–save" to save the dependencies to package.json
• 開啟 package.json, 在 "scripts" 裡頭，加上 "devstart": "nodemon ./bin/www", 然後重啟 server by "npm run devstart"

The "express-test1" directory

• ./bin/www: node 開始執行的 script
• ./app.js: 定義 server
• ./routes/: 定義 application 的 routing
• ./views: 定義 application 的 viewing template

./bin/www

var app = require('../app');
var http = require('http');

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

var server = http.createServer(app);
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

./app.js

var express = require('express');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(...);  // middlewares

module.exports = app;  // for ./bin/www

./routes/index.jx

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' }); 
});

module.exports = router;

• For viewing template, see "./views/index.jade"

extends layout

block content
  h1= title
  p Welcome to #{title}

./routes/users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

• What does the above mean? (also check "app.js")
  Try http://localhost:3000/users/
• 試試看改一下檔案，讓 http://localhost:3000/users/ric 印出 "Ric is cool!"

Huh?

現在是在講什麼？

然後你在你看到的前端 Blog 網頁 (well, 就是 "index.html") click on 作者連結、文章連結等，理論上前端就會送一些資料(e.g. 作者/文章 ID)給後端，然後後端收到之後，就會回傳對應的資料(e.g. 作者資訊／文章內容)回來

你有沒有想過…

前端與後端是用什麼管道與方式來聯絡的呢？

Client Request and Server Response

URL Structure

HTTP Request

• A Request-line
• Zero or more header fields followed by CR/LF
• An empty line (i.e., a line with nothing preceding the CR/LF)
• Optionally a message-body

HTTP Request Example

POST /users/123 HTTP/1.1 // Request-line
Host: www.example.com // header fields
Accept-Language: en-us // ..
Connection: Keep-Alive // ..
// empty line
licenseID=string&content=string&/paramsXML=string // message-body

常見的 HTTP Request Methods [ref]

• GET –- The GET method requests a representation of the specified resource. Requests using GET should only retrieve data.
• POST –- The POST method is used to submit an entity to the specified resource, often causing a change in state or side effects on the server.
• PUT –- The PUT method replaces all current representations of the target resource with the request payload.
• DELETE –- The DELETE method deletes the specified resource.

其他 HTTP Request Methods [ref]

• HEAD –- The HEAD method asks for a response identical to that of a GET request, but without the response body.
• PATCH –- The PATCH method is used to apply partial modifications to a resource.

An Analogy of HTTP Request Methods [ref]

假設現在我們要點餐，
我們必須先知道菜單是甚麼（get），
我們會向服務生點餐（post），
我們想要取消剛才點的餐點（delete），
我們想要重新點一次（put），
我們想要加點甜點和飲料（patch）。

HTTP Response

• A Status-line
• Zero or more header fields followed by CR/LF
• An empty line (i.e., a line with nothing preceding the CR/LF)
• Optionally a message-body

HTTP Response Example

HTTP/1.1 200 OK // Status-line
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Connection: keep-alive
Content-Length: 53
Content-Type: text/html; charset=UTF-8
Date: Tue, 11 Oct 2016 16:32:33 GMT
ETag: "53-1476203499000"
Last-Modified: Tue, 11 Oct 2016 16:31:39 GMT
// empty line
<html> // message-body
<body>
<h1>Hello, World!</h1>
</body>
</html>

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

Middleware Calling Stack

Types of Middleware in Express

• Application-level middleware
• Router-level middleware
• Error-handling middleware
• Built-in middleware
• Third-party middleware

基本的 Express Middlewares

var express = require('express');
var app = express();

app.use([path,] callback [, callback...]);
app.METHOD(path, callback [, callback ...]); 
// METHOD can be:
// checkout    copy    delete    get    head    lock
// merge     mkactivity    mkcol    move    m-search
// notify    options    patch    post    purge    put
// report    search    subscribe    trace    unlock
// unsubscribe

如果 path 沒有指定，則每次都會被執行

var app = express()

app.use(function (req, res, next) {
  console.log('Time:', Date.now())
  next()
})

如果指定 path, 則只有 routing path 符合的時候才會被執行

app.use('/user/:id', function (req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

可以有多個 callback functions

app.use('/user/:id', function (req, res, next) {
  console.log('Request URL:', req.originalUrl)
  next()
}, function (req, res, next) {
  console.log('Request Type:', req.method)
  next()
})

如果沒有 next(), 則執行完就會結束這個 request-response cycle

app.get('/user/:id', function (req, res, next) {
  console.log('ID:', req.params.id)
  next()
}, function (req, res, next) {
  res.send('User Info')
})

// This will never be called!
app.get('/user/:id', function (req, res, next) {
  res.end(req.params.id)
})

也可以傳 array of callbacks

function logOriginalUrl (req, res, next) {
  console.log('Request URL:', req.originalUrl)
  next()
} 

function logMethod(req, res, next) {
  console.log('Request Type:', req.method)
  next()
}

var logStuff = [logOriginalUrl, logMethod]
app.get('/user/:id', logStuff, function (req, res, next) {
  res.send('User Info')
})

是的，這週沒有 practice or homework

請務必自行研讀上述的 materials, 或者是找尋其他相關的 online tutorials