COMP 1537

Node.js & Express

Copyright Ⓒ 2022, Arron Ferguson

 INTRO TO NODE.JS

 What is it?
 A (mostly) server-side run-time environment for web content delivery
 It uses an "event-driven architecture"
 Fancy way of saying that it responds to events – just like a Graphical User Interface (GUI)
 Ryan Dahl wrote it in 2009
 He used "Google's V8 JavaScript engine, an event loop, and a low-level I/O API"
 Lotsa modules!
 Via Node Package Manager (NPM) – see: https://www.npmjs.com/
 Non-blocking functions
 A call is made and the main execution returns immediately
 We’ll look at what this means in a bit …

Non-blocking I/O operations allow a single process to serve multiple requests at the same time.
Instead of the process being blocked and waiting for I/O operations to complete, the I/O operations
are delegated to the system, so that the process can execute the next pieceCopyright
of code. Ⓒ 2022, Arron Ferguson
HOW NODE WORKS (1/2)

Copyright Ⓒ 2022, Arron Ferguson

HOW NODE WORKS (2/2)

 About POSIX threads:

 IEEE POSIX 1003.1c standard (1995)
 A type of light weight process
 Comes from the Unix world, is a standard

 Event driven
 The server waits for requests, doing nothing until a request is made
 This is not uncommon to GUIs such as iOS, Android, and any desktop OS

Copyright Ⓒ 2022, Arron Ferguson

WHO'S USING IT?

 Groupon
 LinkedIn
 Medium
 Netflix
 PayPal
 Trello
 Uber
 Walmart

Copyright Ⓒ 2022, Arron Ferguson

NODE.JS STRENGTHS

 High input/output (IO) requirements

 E.g., text chat, video/audio streaming, high frequency of transaction processing
 One language on front end (Browser/mobile app) and server (Node.js)
 Less memory load on developers
 Many, many modules – there's a module for everything!
 Very lightweight – compared to Java EE
 Easy to integrate with front-end frameworks

Copyright Ⓒ 2022, Arron Ferguson

NODE.JS DRAWBACKS

 Not as mature of a technology

 Java EE/ASP.Net/PHP have been around for 20+ years
 So they are much more mature/stable/common/sought after

 The architecture can grind to a halt with heavy computation

 i.e., the CPU is throttled (e.g., Neural Network (NN) computations)
 It's easy to write really bad code
 e.g., "callback hell"
bunch of callbacks nested within callbacks within callbacks within callbacks...

to prevent this use promises instead of callbacks

Copyright Ⓒ 2022, Arron Ferguson

 “REQUIRE” A MODULE

 What is “require”?
 A function that we can call
 It gets other JS modules that have been written
 It can be used anywhere in your code – not just at the top of your code file
 Unlike a Java import, or using in C# - require is not a directive, it’s a function
 Require executes the JS code
 The JS code is treated as an object – which may have other objects & functions attached to it

can you go get these packages

require is not a directive its a call to function and we can put it everywhere but we should put it on top for readability
require is basically a search function that searches the input and finds the module/package with that name and returns it
express returns something called app

functions are objects too!

Copyright Ⓒ 2022, Arron Ferguson

mapping from the real path that exists in the file system to a fake or virtual path(we need to reference these in out
resources)
we are taking a relative path and showing it as a virtual path
we are trying to hide how we are actually doing things. due to privacy reasons
WHAT IS A CALLBACK?

 A callback is a function, passed in as an argument, to another function

 And that will be invoked at a later time
 Callbacks are another core aspect of JS due to how JS works:
 JS operates asynchronously
 Asynchronous vs synchronous (in the real world):
 Asynchronous:
 Order some food on a food app on your phone
 Carry on with your activities and when the food is at your door, you are notified – either by knocking or
by the app telling you with a message
 Synchronous:
 Telephone call to tech support, hold the phone to your ear, and wait for a technician to be
available

Copyright Ⓒ 2022, Arron Ferguson

 JS CALLBACK IN NODE.JS

 Line 2 has an anonymous function passed as an argument

 Which accepts two arguments of its own (next slide, more details):
1. a request object
2. a response object
 Line 3 reads a file in from the file system – synchronously
 Line 6 calls the response object’s send method and passes the text string of the HTML
document

1 // anonymous function passed as an argument, and used as a callback

2 app.get("/", function (req, res) {
3 let doc = fs.readFileSync("./app/html/index.html", "utf8");
4
5 // send the text stream
6 res.send(doc);
7 }); Copyright Ⓒ 2022, Arron Ferguson
MORE DETAILS FROM CALLBACK (1/2)

 JS functions are objects – so we can pass them in as arguments

 The callback function will be called only when a client requests access to the route
path – hence, a callback
 The first argument is the path that the callback responds to – in this case root ‘/’
 Remember paths? These paths are virtual paths – we can call them anything we want
 E.g., /users, /profile, settings, /customers, /2022/January/gallery/1

 Paths are like entrances to resources that we wish to share with users
 E.g., image galleries, customer data, video streams, etc.
 Paths are just logical/hierarchical hooks to back-end logic that we wish to invoke
 Based on an assigned meaning that we give it

Copyright Ⓒ 2022, Arron Ferguson

MORE DETAILS FROM CALLBACK (2/2)

 The callback function accepts two parameters – we’ve called them ‘req’ & ‘res’
 First argument represents the request from the client (e.g., web browser)
 Second argument represents the response we will send to the client (e.g., web browser)
 Request object methods/properties:
 Data sent with the request, the properties of the browser connecting
 Response object method/properties:
 Data we want to send back to the requestor, meta information about the response
 The request-response pair argument is a pattern found on backend/server-side
programming, including:
 Java, C#/.NET

Copyright Ⓒ 2022, Arron Ferguson

HTTP METHODS (1/2)

 HTTP has a few methods we can use to talk to the server with
 Methods are ways of stating intention to communicate – protocols
 What’s a protocol?
 Examples of real life protocols:
 COMP 1537 assignments are due by a certain date & time, if you submit an assignment that is
late, you get zero marks for the assignment
 A doctor’s office requires 24 hours notice of cancellation, otherwise you have to pay for the
cancelled appointment

 In the HTTP protocol there are two more commonly used methods:
 GET
 POST

Copyright Ⓒ 2022, Arron Ferguson

HTTP METHODS (2/2)

 GET:
 Retrieve a resource, can be cached, request in browser history
 Can be bookmarked, never used for sensitive data
 Should not be used for something that causes side-effects
 POST:
 Submits data to be processed, data is included in body of request
 Never cached, cannot be bookmarked, do not remain in browser history
 May include the creation of a new resource or update of an existing resource
 Or both
 No restrictions on data length
 For now we will focus on HTTP GET

Copyright Ⓒ 2022, Arron Ferguson

INTRO TO EXPRESS (1/4)

 What is Express.js?
 A lightweight routing framework for Node.js – it’s downloadable as a module!
 How to get it?
 Use command line: npm install -g express
 ‘-g’ means global – you may have to have admin privileges on your computer for this!

 What does it allow me to do?

 Map paths to functions inside of your program
 Serve up content based on HTTP methods (e.g., GET, POST)
 Serve up static files (e.g., html documents, images, etc.)
 Map directories to virtual paths
 Respond to GET and POST requests
 Respond to errors
Copyright Ⓒ 2022, Arron Ferguson
The res. send function sets the content type to text/Html which means that the client will now treat it as text.
It then returns the response to the client.

INTRO TO EXPRESS (2/4)

 Some basic examples of virtual paths mapped using Express.js:

app.get("/hello", function (req, res) {

// just send some plain text
res.send("Hello world!");
});
app.get("/helloHTML", function (req, res) {
// hard-coded HTML
res.send("<html><head><title>Hi!</head><body><p>Hello!</p></body></html>");
});
app.get("/", function (req, res) {
// retrieve and send an HTML document from the file system
let doc = fs.readFileSync("./app/html/index.html", "utf8");
res.send(doc);
});
app. get() is a function that tells the server what to do when a get request at the given route is called
Copyright Ⓒ 2022, Arron Ferguson
 INTRO TO EXPRESS (3/4)

 But what about just retrieving files from the file system? Like how Apache Web
server does?
 The virtual path presented to users on the web app (seen in the web browser)
 Virtual because there is no actual directory/folder path in the file system that matches
this pattern
 The actual (static) path that is found in the file system of your computer
To serve static files such as images, CSS files, and JavaScript files, use the express.static
built-in middleware function in Express.

app.use("/js", express.static("./public/js"));
app.use("/css", express.static("./public/css"));
app.use("/img", express.static("./public/img"));
The app. use() method puts the specified middleware functions at the specified path
Copyright Ⓒ 2022, Arron Ferguson
Virtual paths are virtual file system paths that map to a physical path on your domain and have their own set of permissions.

INTRO TO EXPRESS (4/4)

 Why virtual paths?

 Our internal directory structure may change over time – we don’t want to have to
change the web app program code every time this happens
 Web apps will always have some degree of static content (e.g., images, CSS files, etc.)
 Static content is content that is not dynamically generated – it already exists!
 When you create a web template, you have images, CSS files, and HTML

 For more information on Express.js:

 Routing: https://expressjs.com/en/guide/routing.html
 Express.js: http://expressjs.com/

Copyright Ⓒ 2022, Arron Ferguson

INSTALLING NODE.JS

 Pick a folder/directory (c:\apps on Windows, default on OSX)

 Installation will edit the path for your console/command line/terminal
 So you can type commands like this:
 node myapp.js
 Where 'node' is the name of the Node.js command line application
 And 'myapp.js' is the name of your JavaScript application to run
 Node simply runs your JavaScript file
 Which contains your server side JavaScript code

Copyright Ⓒ 2022, Arron Ferguson

RUNNING NODE.JS (1/2)

 Go to a cmd console (in Windows) or terminal (in OSX) and type:

 node <name of file>
 Where <name of file> is the name of your JavaScript file
 Program will run
 Go to browser and access the page by typing:
 localhost:8000 (assuming you set the port to 8000)
 Congrats! You are running a web server and web application!

Copyright Ⓒ 2022, Arron Ferguson

RUNNING NODE.JS (2/2)

 To get out of the app, with the console/terminal selected, type:

 ctrl-c (Windows) command c (OSX)
 Each time you change your JavaScript code, you'll have to:
1. Stop Node.js from running
2. Restart Node.js
 There is a way around this … use nodemon!

Copyright Ⓒ 2022, Arron Ferguson

NPM (1/2)

 What is Node Package Manager (NPM)?

 A web service that offers a centralized repository of software packages for JavaScript
 It is Node.js's default package manager
 A command line/terminal (i.e., typing commands) app
 Has an accompanying web site that allows you to search packages
 There are many different types of packages:
 Routing, programmatic image manipulation, session handling, even server-side DOM
and JQuery

Copyright Ⓒ 2022, Arron Ferguson

NPM (2/2)

 Basic commands:
 npm install – install the dependencies in the local node_modules folder
 npm update - update all the packages listed to the latest version
 https://docs.npmjs.com/cli/install

Copyright Ⓒ 2022, Arron Ferguson

RESOURCES

 https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction
 https://nodejs.org/en/
 https://expressjs.com/
 https://www.npmjs.com/
 https://nodejs.org/api/globals.html

Copyright Ⓒ 2022, Arron Ferguson