SE371 · Chapter 6 · Annotated SlidesServer-Side Node.js and Express
Original
Overview

Server-Side Node.js and Express

Node.js and JavaScript everywhere, modules (CommonJS and ES imports), core modules and a simple HTTP server, blocking vs. non-blocking architectures, asynchronous code with callbacks, promises, async/await and fetch, npm and package.json, CORS, Express routing and middleware, route parameters vs. query strings vs. forms, and EJS view engines.

How to read this page

Every original slide is shown unchanged. Yellow marks on a slide point to a numbered note: hover or tap a mark to jump to its note, and hover a note to see its marks. Questions tagged Past exam appeared on a real paper; Prediction questions are likely angles, not confirmed. Pick an answer to each question: a wrong pick tells you why it is wrong, so you can try again.

All 51 slides
  1. 1 Task [Chapter 5]
  2. 2 Fundamentals of Web Development
  3. 3 Introducing Node.js
  4. 4 JavaScript Everywhere
  5. 5 Modules:
  6. 6 Modules
  7. 7 Running a node application
  8. 8 Import/Export Modules in JavaScript
  9. 9 Node core modules
  10. 10 Simple Node Application: the fs module
  11. 11 Simple Node Application: the http module
  12. 12 Simplest http server
  13. 13 http server: handling different requests
  14. 14 Static file server example: the http and path modules
  15. 15 Blocking Architectures
  16. 16 Non-blocking Architectures
  17. 17 Handling high volume data changes in Node
  18. 18 Node Disadvantages
  19. 19 Asynchronous Coding with JavaScript
  20. 20 Simple Node Application: fs module, async version
  21. 21 Simple Node Application: fs module, async version
  22. 22 So what are Promises?
  23. 23 File: app.js
  24. 24 Another use case for promises: (on the client-side)
  25. 25 Asynchronous data requests
  26. 26 Fetching Data from a Web API
  27. 27 Example of asynchronous request using fetch ... and promises
  28. 28 Common Mistakes with Fetch
  29. 29 Npm, package.json and dependencies
  30. 30 Cross-Origin Resource Sharing
  31. 31 "
  32. 32 Dependencies and code sharing (git)
  33. 33 Adding a dev-dependency
  34. 34 Routing: Importing Express
  35. 35 Middleware functions in Express:
  36. 36 Express: middleware functions
  37. 37 Using express for routing
  38. 38 Add middleware (chained operations)
  39. 39 Source Code Example: 09-env-variables- -app3
  40. 40 Simple API
  41. 41 Separating Functionality into Modules
  42. 42 Defining a module
  43. 43 Send parameters in route:
  44. 44 Send parameters in query (2)
  45. 45 Send parameters using forms (3)
  46. 46 View Engines
  47. 47 Introduction to EJS
  48. 48 Injecting data into EJS views
  49. 49 Example EJS view
  50. 50 Example EJS view
  51. 51 Supporting material
Slide 1 / 51

Task [Chapter 5]

Slide 1: Task [Chapter 5]
Slide 2 / 51

Fundamentals of Web Development

Slide 2: Fundamentals of Web Development
Slide 3 / 51

Introducing Node.js

Slide 3: Introducing Node.js

Notes

  1. Node.js: JavaScript on the server, built on Chrome’s V8 engine; single-threaded, event-driven, non-blocking I/O.

Slide 4 / 51

JavaScript Everywhere

Slide 4: JavaScript Everywhere
Slide 5 / 51

Modules:

Slide 5: Modules:

Notes

  1. Modules: require/module.exports (CommonJS) or import/export (ES modules).

Slide 6 / 51

Modules

Slide 6: Modules
Slide 7 / 51

Running a node application

Slide 7: Running a node application
Slide 8 / 51

Import/Export Modules in JavaScript

Slide 8: Import/Export Modules in JavaScript
Slide 9 / 51

Node core modules

Slide 9: Node core modules
Slide 10 / 51

Simple Node Application: the fs module

Slide 10: Simple Node Application: the fs module
Slide 11 / 51

Simple Node Application: the http module

Slide 11: Simple Node Application: the http module
Slide 12 / 51

Simplest http server

Slide 12: Simplest http server
Slide 13 / 51

http server: handling different requests

Slide 13: http server: handling different requests
Slide 14 / 51

Static file server example: the http and path modules

Slide 14: Static file server example: the http and path modules
Slide 15 / 51

Blocking Architectures

Slide 15: Blocking Architectures

Notes

  1. Blocking: each request ties up a thread while waiting for I/O. Non-blocking (Node): one thread hands I/O off and handles other requests meanwhile (event loop).

Exam angle

PredictionQ1

Node handles many concurrent connections efficiently because of:

Slide 16 / 51

Non-blocking Architectures

Slide 16: Non-blocking Architectures
Slide 17 / 51

Handling high volume data changes in Node

Slide 17: Handling high volume data changes in Node
Slide 18 / 51

Node Disadvantages

Slide 18: Node Disadvantages

Notes

  1. Node is a poor fit for CPU-heavy work: one long computation blocks the single thread.

Slide 19 / 51

Asynchronous Coding with JavaScript

Slide 19: Asynchronous Coding with JavaScript
Slide 20 / 51

Simple Node Application: fs module, async version

Slide 20: Simple Node Application: fs module, async version
Slide 21 / 51

Simple Node Application: fs module, async version

Slide 21: Simple Node Application: fs module, async version
Slide 22 / 51

So what are Promises?

Slide 22: So what are Promises?

Notes

  1. Promise: an object for a future value: pending → fulfilled or rejected; .then/.catch, or await inside an async function.

Exam angle

PredictionQ1

await can be used directly inside:

Slide 23 / 51

File: app.js

Slide 23: File: app.js
Slide 24 / 51

Another use case for promises: (on the client-side)

Slide 24: Another use case for promises: (on the client-side)
Slide 25 / 51

Asynchronous data requests

Slide 25: Asynchronous data requests
Slide 26 / 51

Fetching Data from a Web API

Slide 26: Fetching Data from a Web API

Notes

  1. Trap fetch only rejects on network failure; a 404 still resolves, so check response.ok.

Slide 27 / 51

Example of asynchronous request using fetch ... and promises

Slide 27: Example of asynchronous request using fetch ... and promises
Slide 28 / 51

Common Mistakes with Fetch

Slide 28: Common Mistakes with Fetch
Slide 29 / 51

Npm, package.json and dependencies

Slide 29: Npm, package.json and dependencies

Notes

  1. npm installs packages; package.json lists dependencies and scripts; dev-dependencies are only for development (nodemon).

Slide 30 / 51

Cross-Origin Resource Sharing

Slide 30: Cross-Origin Resource Sharing

Notes

  1. CORS: browsers block cross-origin requests unless the server sends Access-Control-Allow-Origin.

Slide 31 / 51

"

Slide 31: "
Slide 32 / 51

Dependencies and code sharing (git)

Slide 32: Dependencies and code sharing (git)
Slide 33 / 51

Adding a dev-dependency

Slide 33: Adding a dev-dependency
Slide 34 / 51

Routing: Importing Express

Slide 34: Routing: Importing Express

Notes

  1. Express: app.get("/path", (req, res) => …); app.post; app.listen.

Slide 35 / 51

Middleware functions in Express:

Slide 35: Middleware functions in Express:

Notes

  1. Middleware: functions (req, res, next) that run in order before route handlers (logging, parsing JSON: express.json(), static files).

Exam angle

PredictionQ1

An Express middleware function must call ___ to pass control to the next one:

Slide 36 / 51

Express: middleware functions

Slide 36: Express: middleware functions
Slide 37 / 51

Using express for routing

Slide 37: Using express for routing
Slide 38 / 51

Add middleware (chained operations)

Slide 38: Add middleware (chained operations)
Slide 39 / 51

Source Code Example: 09-env-variables- -app3

Slide 39: Source Code Example: 09-env-variables- -app3
Slide 40 / 51

Simple API

Slide 40: Simple API
Slide 41 / 51

Separating Functionality into Modules

Slide 41: Separating Functionality into Modules
Slide 42 / 51

Defining a module

Slide 42: Defining a module
Slide 43 / 51

Send parameters in route:

Slide 43: Send parameters in route:

Notes

  1. Route parameters: /users/:id → req.params.id. Query string: /search?q=x → req.query.q. Form POST body: req.body (needs a body parser).

Exam angle

PredictionQ1

For the route /books/:isbn, the value is read from:

Slide 44 / 51

Send parameters in query (2)

Slide 44: Send parameters in query (2)
Slide 45 / 51

Send parameters using forms (3)

Slide 45: Send parameters using forms (3)
Slide 46 / 51

View Engines

Slide 46: View Engines
Slide 47 / 51

Introduction to EJS

Slide 47: Introduction to EJS

Notes

  1. EJS: templates with <%= value %> (escaped output) and <% code %>; res.render("view", data).

Slide 48 / 51

Injecting data into EJS views

Slide 48: Injecting data into EJS views
Slide 49 / 51

Example EJS view

Slide 49: Example EJS view
Slide 50 / 51

Example EJS view

Slide 50: Example EJS view
Slide 51 / 51

Supporting material

Slide 51: Supporting material