5COSC024W Server-Side Web Development

PART 02 (NODE)
Support Lecture for Tutorial 07: JavaScript, Node.js & Express.js

Dr Francois ROUBERT
[email protected]

1
Part 02 Tut 07 Supporting Lecture – Outline

oBack-end Web Development

• Aim, purpose, focus and roles.
• Tech overview.
oJavaScript
• Most used language for web development.
• Initially, front-end language; now, also back-end language.
oNode.js
• “JavaScript everywhere”, capabilities and micro-services.
• Coding, speed, performance, web server, DBs, frameworks & applications.
• Node Development Environment: Node, IDE, Terminal, NPM & NVM, Nodemon.
• Express.js: minimal & flexible standard Node framework.
• Handling GET and POST requests with Node and Express.
• Web template engines and EJS.
2
Back-end Web Development: aim, purpose, focus & roles
oAim:
• Lays the foundational code that enables websites to process actions that
users take on front-end and deliver correct information in return.
oPurpose:
• Handles the ‘behind-the-scenes’ functionality of web apps.
• Manages user connections.
• Powers the user interface of the web application.
• Connects the web app to a database.
oFocus:
• ‘Mechanics’ of how web app works.
• Functionality & logic powering the application i.e. tech never seen by the user.
oRoles of a back-end web developer:
• Writing APIs & libraries.
• Working on business processes and data architecture.
• Writing code to interact with a database. 3
Back-end Web Development: an overview of the tech

4
JavaScript: most used language for web development

oInitially just a client-side scripting language.

oNow a robust and efficient general-purpose multi-paradigm language

suitable for serious software development projects.

oHigh-level, dynamic, interpreted programming language.

oWell-suited to object-oriented and functional programming styles.

oSyntax based on Java but completely different from Java.

5
JavaScript: initially just a front-end language

oInitially purely a browser client-scripting language.

oBrowser as host environment allows:

• Capture of user’s input.

• Making of HTTP requests.

• Processing of JavaScript instructions to output HTML and CSS.

6
 JavaScript: now also a back-end language

oNow also a proper server-side language through Node.js

oNode.js as host runtime environment gives JavaScript access to OS.

oNode.js allows JavaScript programs to:

• Be used as utility scripts to configure system and to read, write and manipulate files.

• Send and receive data over the network.

• Implement efficient web servers and attach application code to it.

• Make and serve HTTP requests.

7
 Node.js: extending JavaScript to a complete language
oOpen-source, cross-platform, back-end JavaScript runtime environment.

oEvent-driven architecture capable of asynchronous I/O operations

• reading from the network, accessing a database, modifying a file, etc.

oFully platform independent: Windows, macOS and Linux.

oFull support for both types of databases:

• Relational DBs
▪ Open-source e.g. MySQL, PostgreSQL.
▪ Commercial e.g. Oracle, MS SQL Server.
• NoSQL DBs
▪ Doc-oriented e.g. MongoDB, couchbase, CouchDB.
▪ Graph e.g. Neo4j.
▪ Key-value store e.g. LevelDB, Redis. 8
Node.js: enables “JavaScript Everywhere”
Node.js enables JavaScript:

oto be uncoupled from browser and to run on the server, including on

cloud-based servers.

oto use the same language both on the server and client.

oto be used as part of several frameworks

• front-end frameworks: React, Vue.js, Angular
• back-end frameworks: Express.js, Next.js (server-rendered React application), Sails.js

oto be used as part of stacks

• MEAN stack: MongoDB, Express, Angular, Node.
• MERN stack: MongoDB, Express, React, Node.
9
Node.js: capabilities
oBuild software tools
• Software development.
• Communication with service infrastructure.
oWeb scraping and testing
• Web scraping: web data extraction
• Automated web app UI testing.
oBuild desktop applications
• Build powerful desktop apps with Node.js libraries and front-end JavaScript
frameworks e.g. React, Vue.js, Angular
oBuild mobile applications
• Build smartphone or tablet apps using Node.js for both iOS and Android.
oInternet of Things (IoT)
• Use Node.js - based tools as graphical programming environment that feature
hardware-oriented I/O mechanisms. 10
Node.js: microservices

11
Node.js: coding, speed & performance
Node.js
• Only one language for back-end and front-end.
Coding • Higher amount of code.

Faster due to asynchronous execution: all at once.

1.Node.js sends a query to computer file system.

Speed &
Performance 2.Works on next request without waiting for previous.

3.When file system has opened and read requested

file, the server sends content back to the client.
12
Node.js: web server, DBs, frameworks, applications
Node.js
• Can be used to set up and run its own web server.
Web Server
• Easy to do with Express, Koa, etc
• Happily supports relational DBs.
Databases
• Happily supports NoSQL DBs.
• Multiple frameworks to support back-end, front-end
Frameworks and full-stack.
• E.g. Express, Meteor, koa.js, sails.js
• Highly scalable server-side solutions.
Application • Real-time apps like chat applications, blogs, video
Domains streaming applications.
• Dynamic single-page apps e.g. portfolios, etc. 13
Node.js: Web apps it is the most suitable for
oApps that requires high scalability across multiple servers & DBMSs.
oHigh perf apps with dynamic single-page that work in a data-intensive &
real-time manner, including distributed sessions across multiple devices.
oExamples:
• instant messengers e.g. Slack
• mobility apps e.g. Uber
• streaming services e.g. Netflix
• fintech apps e.g. PayPal
• online education e.g. Coursera
• employment service e.g. LinkedIn
• social networks e.g. Twitter
• project management tools e.g. Asana, Trello
• gaming apps e.g. Quizlet
• IoT devices & apps. 14
Node Development Environment
oNode.js
• Installing & getting started with Node https://nodejs.org/en/download/
oIDE
• Visual Code 2022 (in class) https://visualstudio.microsoft.com/vs/
with fully integrated terminal
• VS Code (at home) https://code.visualstudio.com/download
with fully integrated terminal https://code.visualstudio.com/docs/terminal/basics
oNode Package Manager (NPM)
• Now included with node by default https://www.npmjs.com/
oVersions of Node and NPM
• Create a project folder e.g. MyApp, right-click to open with VS Code.
• Open Terminal and type in the commands to determine the versions:
▪ node -v
▪ npm -v 15
Terminal and Shell (Tut 07 Task 01)
oTerminal
• Text-based interface that communicates with a shell to execute commands.
oShell
• Command-line interpreter or that provides a command line user interface to
interact with an operating system.
• Both an interactive command language and a scripting language.
• Used by the operating system to control the execution of the system using shell
scripts.
oTerminal/Shell Combination
• Mac: terminal available from utilities and uses Bash as a shell (Unix shell).
• Linux: terminal available as a shortcut and uses Bash as a shell (Unix shell).
• Windows: terminal available from start menu and uses PowerShell. Bash can also
be used.
• Terminal also available directly through Visual Studio 2022 and VS Code.
16
Node Package Manager (NPM) & Node Version Manager (NVM)
oNPM: Node Package Manager
• Package manager for JavaScript, default package manager for Node.js.
• Includes a registry i.e. an online catalogue of libraries, can be accessed via client.
oUse NPM to:
• Track what libraries your project is using (called dependencies)
• Download the packages they depend on (called subdependencies)
• Store versioning information.
• Distinguish between test and production builds.

oNVM: Node Version Manager

• Tool to manage the versions of Node.
oUse NVM to:
• Switch between different Node versions.
• Quickly update your installation when new releases are available. 17
NPM Packages to build our CRUD web app (Tut 07 Task 01)
oNodemon:
• Monitors for any changes in the source code & automatically restarts the server.
• Automatically restarts the Node app when file change in directory are detected.
oExpress:
• Minimal and flexible back-end web app framework.
• De-facto standard to build Node apps.
oEjs: Embedded JavaScript.
• Template engine, embeds JavaScript in Web template to generate HTML.
odotenv:
• Module that loads configuration environment variable from separate .env file .
oMongoose:
• Package that creates a connection between Node and MongoDB.
• MongoDB: document-oriented NoSQL database, stores data in BSON.
18
JSON – JavaScript Object Notation (Tut 07 Task 02)
oJSON
• Open standard file and data interchange format to store and transmit data
consisting of attribute–value pairs and arrays.
• Language-independent data format.
• Originally derived from JavaScript.

oJSON Syntax rules

• Documents consist of name-value pairs.
• Names are strings e.g. Pname and Plocation for a Project.
• Values can be:
▪ Numbers: decimal numbers.
▪ Strings: delimited with double-quotation marks.
▪ NULL: empty values.
▪ Arrays: ordered list of elements.
▪ Objects: collection of name-value pairs. No restrictions on the names, uniqueness
and ordering. 19
Express.js (Tut 07 Task 03)
oMinimal and flexible Node.js web app framework.

oFacilitates the rapid development of Node-based Web apps.

oRobust set of features to develop web apps:

• Sets up handlers to respond to different HTTP requests.

• Performs different actions based on HTTP Method and URL.

• Sets common web app settings e.g.

▪ the port to use for connection.
▪ the location of templates that are used for rendering the response.

• Dynamically renders HTML Pages based on passing arguments to templates.

20
Express.js: “Hello World” & GET METHOD (Tut 07 Task 03)
const express = require("express"); //import express module
const app = express(); //create express app
//HTTP GET METHOD
app.get('/', (req, res) => { //callback function (request, response) arguments
res.send('Hello World!’); //call send method on response to return string
});
//start up the server on port 3000 and print log comment on console (terminal)
app.listen(3000, () => console.log("Server Up and running"));

o Requires the express module (i.e. imports it) and creates an express app.
o Specifies callback function invoked every time HTTP GET request with a path ”/”
o Callback function takes a request object and a response object as arguments.
• req: request object, represents HTTP request.
• res: response object, represents response sent by app when it gets HTTP request.
o Responds to a HTTP request of type GET used to request data from a specified URL
and returns the displaying of a string using the send method. 21
Web Template Engine (Tut 07 Task 04)
oSoftware that combines web templates with a data source to generate
HTML by replacing variables in a template file with actual values.
oData source e.g. relational DB, XML file, JSON file, BSON file, etc.
oWeb Template: reusable template specified according to a dynamic
templating language.
oTemplating language e.g. JavaScript, C, Java, JSP, ASP, PHP, etc.

22
Embedded JavaScript Templating (EJS) (Tut 07 Task 04)

oEJS
• One of the most popular template engines for JavaScript.
• It enables to rapidly build web applications that are split into different components.
• It embeds JavaScript code in a reusable web template to generate HTML.
• It replaces the variables in a template file with actual values, and displays this
value to the client.
• It retains the syntax of HTML while allowing data interpolation.

oUsing EJS
• Use the tags <% and %> to create a “scriptlet” that contains the logic.
• Use loops to iterate through and display data.
• Use select statement (if-else) to implement several options.

23
 Express.js: POST METHOD (Tut 07 Task 07)

//HTTP POST METHOD

app.post('/',(req, res) => { //callback function (request, response) arguments
console.log(req.body); //call log method on console to display msg on terminal
});

o Specifies callback function invoked every time HTTP POST request with a path ”/”
o Callback function takes a request object and a response object as arguments.
• req: request object, represents HTTP request.
• res: response object, represents response sent by app when it gets HTTP request.
o Responds to a HTTP request of type POST used to request data from a specified form
and returns the displaying of the data entered in the form as console msg on terminal.
o FYI on GET and POST methods, https://expressjs.com/en/guide/routing.html
24
References and Essential Readings
o Brown, Ethan (2020). Web development with Node and Express: leveraging the JavaScript stack, 2nd
Edition, 2020. O’Reilly Media.

o Express (2023). Database integration. Available from https://expressjs.com/en/guide/database-

integration.html [Accessed 15 Jan 2023]

o Flanagan, David (2020). JavaScript : The Definitive Guide – Master the World's Most-Used
Programming Language, 7th Edition. O’Reilly Media.

o Herron, David (2020). Node.js Web Development, 5th Edition, 2020. Packt Publishing.

o Mozilla MDN (2023). Express/Node introduction. Available from https://developer.mozilla.org/en-

US/docs/Learn/Server-side/Express_Nodejs/Introduction [Accessed 15 Jan 2023]

o Tutorials Point (2023). Node.js Express Framework. Available from

https://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm [Accessed 15 Jan 2023]

o Olusola, S (2021). How to use EJS to template your Node.js application. Available from
https://blog.logrocket.com/how-to-use-ejs-template-node-js-application/ [Accessed 15 Jan 2023]
25