Backend Development
SWE 432, Fall 2017
Design and Implementation of Software for the Web
Real World
Example
https://qz.com/1073221/the-hackers-who-broke-into-equifax-exploited-a-nine-year-old-security-flaw/
LaToza GMU SWE 432 Fall 2017 2
Today
• HW2 out, due next Tues before class
• Why do we need backends?
• Building backend web service with Node.js and
Express
LaToza GMU SWE 432 Fall 2017 3
The “good” old days of backends
HTTP Request
GET /myApplicationEndpoint HTTP/1.1
Host: cs.gmu.edu
Accept: text/html
web server
Runs a program
Give me /myApplicationEndpoint
Does whatever it wants My
Web Server
Application
Application
Here’s some text to send back Backend
HTTP Response
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
<html><head>...
LaToza GMU SWE 432 Fall 2017 4
History of Backend Development
• In the beginning, you wrote whatever you wanted
using whatever language you wanted and whatever
framework you wanted
• Then… PHP and ASP
• Languages “designed” for writing backends
• Encouraged spaghetti code
• A lot of the web was built on this
• A whole lot of other languages were also springing
up in the 90’s…
• Ruby, Python, JSP
LaToza GMU SWE 432 Fall 2017 5
Backends today: Microservices
Component presentation Component presentation Component presentation
Component logic Component logic Component logic
Browser
Front end framework
HTTP HTTP
HTTP HTTP Response
Response
Request Request (JSON)
(JSON)
HTTP HTTP
Request Request
HTTP HTTP
Microservice Response Microservice Response
Web Servers (JSON) (JSON)
Database
LaToza GMU SWE 432 Fall 2017 6
Microservices
• Rather than horizontally scale identical web servers, vertically scale
server infrastructure into many, small focused servers
• Some advantages
• Fine-grained scalability: scale what services you need
• Data-locality: data can be cached close to service providing
functionality
• Fault tolerance: restart only failing service rather than whole
system
• Reuse: use same micro service in multiple apps; use 3rd party
rather than first party services
LaToza GMU SWE 432 Fall 2017 7
Why write a backend at all?
LaToza GMU SWE 432 Fall 2017 8
Why we need backends
• Security: SOME part of our code needs to be “trusted”
• Validation, security, etc. that we don’t want to allow
users to bypass
• Performance:
• Avoid duplicating computation (do it once and cache)
• Do heavy computation on more powerful machines
• Do data-intensive computation “nearer” to the data
• Compatibility:
• Can bring some dynamic behavior without requiring
much JS support
LaToza GMU SWE 432 Fall 2017 9
Why Trust Matters
• Example: Transaction app
function updateBalance(user, amountToAdd)
{
user.balance = user.balance + amountToAdd;
fireRef.child(user.username).child("balance").set(user.balance);
}
• What’s wrong?
• How do you fix that?
LaToza GMU SWE 432 Fall 2017 10
Dynamic Web Apps
ith
c t sw
e r a
int Web “Front End”
r
e use Presentation
t t h React
ha
W Some logic
HTML CSS JavaScript
ith
c t sw
e r a
int
d
en
ont
e fr
t h “Back End”
Wha t Data storage
Some
Firebase
other API Some other logic
LaToza GMU SWE 432 Fall 2017 11
Where do we put the logic?
with
a cts
inter Web “Front End”
e r
e us Presentation
t th
React
a
Wh
HTML CSS JavaScript
Some logic
th
wi
c ts
a
i ter
n“Back
d End”
nt
en Data storage
fr o
the Some other
at Firebase Some other logic
Wh API
Frontend Backend
Pros Pros
Very responsive (low latency) Easy to refactor between multiple
clients
Logic is hidden from users (good for
Cons security, compatibility, and intensive
Security computation)
Performance Cons
Unable to share between front-ends Interactions require a round-trip to
server
LaToza GMU SWE 432 Fall 2017 12
HTTP: HyperText Transfer Protocol
High-level protocol built on TCP/IP that defines how data is transferred
on the web
HTTP Request web server
GET /syllabus/syllabi-fall16/SWE432BellJ.html HTTP/1.1
Host: cs.gmu.edu
Accept: text/html Reads file from disk
HTTP Response
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
<html><head>...
LaToza GMU SWE 432 Fall 2017 13
HTTP Requests
HTTP Request
GET /syllabus/syllabi-fall16/SWE432BellJ.html HTTP/1.1
Host: cs.gmu.edu
Accept: text/html
“GET request” “Resource”
Other popular types:
POST, PUT, DELETE, HEAD
• Request may contain additional header lines
specifying, e.g. client info, parameters for forms,
cookies, etc.
• Ends with a carriage return, line feed (blank line)
• May also contain a message body, delineated by a
blank line
LaToza GMU SWE 432 Fall 2017 14
Handling HTTP Requests in Express
• Node.js package for expressing rules about how to
handle HTTP requests
LaToza GMU SWE 432 Fall 2017 15
Handling requests with Express
HTTP GET Request
GET /myResource/endpoint HTTP/1.1
Host: myHost.net
Accept: text/html
app.get("/myResource/endpoint", function(req, res){
//Read stuff from req, then call res.send(myResponse)
});
HTTP POST Request
POST /myResource/endpoint HTTP/1.1
Host: myHost.net
Accept: text/html
app.post("/myResource/endpoint", function(req, res){
//Read stuff from req, then call res.send(myResponse)
});
LaToza GMU SWE 432 Fall 2017 16
Demo: Hello World Server
const express
1: Make = require(‘express');
a directory, myapp
Import the module express
const app = express();
3: Type npma install express --save
Create new instance of express
4: Create text file app.js:
const port = process.env.port || 3000;
Decide what port we want express to listen on
app.get('/', (req, res) => {
var course = { name: 'SWE 432' };
res.send(`Hello ${ course.name }!`);
});
Create a callback for express to call when we have a “get” request to “/“. That
callback has access to the request (req) and response (res).
app.listen(port, function () { });
Tell our new instance of express to listen on port.
LaToza/Bell GMU SWE 432 Fall 2016 17
Core concept: Routing
• The definition of end points (URIs) and how they
respond to client requests.
• app.METHOD(PATH, HANDLER)
• METHOD: all, get, post, put, delete, [and others]
• PATH: string
• HANDLER: call back
app.post('/', function (req, res) {
res.send('Got a POST request');
});
LaToza GMU SWE 432 Fall 2017 18
Route paths
• Can specify strings, string patterns, and regular expressions
• Can use ?, +, *, and ()
• Matches request to root route
app.get('/', function (req, res) {
res.send('root');
});
• Matches request to /about
app.get('/about', function (req, res) {
res.send('about');
});
• Matches request to /abe and /abcde
app.get('/ab(cd)?e', function(req, res) {
res.send('ab(cd)?e');
});
LaToza GMU SWE 432 Fall 2017 19
Route parameters
• Named URL segments that capture values at specified
location in URL
• Stored into req.params object by name
• Example
• Route path /users/:userId/books/:bookId
• Request URL http://localhost:3000/users/34/books/8989
• Resulting req.params: { "userId": "34", "bookId":
"8989" }
app.get('/users/:userId/books/:bookId', function(req, res) {
res.send(req.params);
});
LaToza GMU SWE 432 Fall 2017 20
Request object
• Enables reading properties of HTTP request
• req.body: JSON submitted in request body
(must define body-parser to use)
• req.ip: IP of the address
• req.query: URL query parameters
LaToza GMU SWE 432 Fall 2017 21
HTTP Responses
• Larger number of response codes (200 OK, 404 NOT FOUND)
• Message body only allowed with certain response status codes
“OK response”
Response status codes:
1xx Informational
2xx Success
3xx Redirection
4xx Client error
5xx Server error
“HTML returned
content”
Common MIME types:
application/json
application/pdf
image/png
LaToza
[HTML data] GMU SWE 432 Fall 2017 22
Response object
• Enables a response to client to be generated
• res.send() - send string content
• res.download() - prompts for a file download
• res.json() - sends a response w/ application/json
Content-Type header
• res.redirect() - sends a redirect response
• res.sendStatus() - sends only a status message
• res.sendFile() - sends the file at the specified path
app.get('/users/:userId/books/:bookId', function(req, res) {
res.json({ “id”: req.params.bookID });
});
LaToza GMU SWE 432 Fall 2017 23
Describing Responses
• What happens if something goes wrong while handling HTTP
request?
• How does client know what happened and what to try next?
• HTTP offers response status codes describing the nature of the
response
• 1xx Informational: Request received, continuing
• 2xx Success: Request received, understood, accepted,
processed
• 200: OK
• 3xx Redirection: Client must take additional action to complete
request
• 301: Moved Permanently
• 307: Temporary Redirect
https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
LaToza GMU SWE 432 Fall 2017 24
Describing Errors
• 4xx Client Error: client did not make a valid request to server.
Examples:
• 400 Bad request (e.g., malformed syntax)
• 403 Forbidden: client lacks necessary permissions
• 404 Not found
• 405 Method Not Allowed: specified HTTP action not
allowed for resource
• 408 Request Timeout: server timed out waiting for a request
• 410 Gone: Resource has been intentionally removed and
will not return
• 429 Too Many Requests
LaToza GMU SWE 432 Fall 2017 25
Describing Errors
• 5xx Server Error: The server failed to fulfill an
apparently valid request.
• 500 Internal Server Error: generic error message
• 501 Not Implemented
• 503 Service Unavailable: server is currently
unavailable
LaToza GMU SWE 432 Fall 2017 26
Error handling in Express
• Express offers a default error handler
• Can specific error explicitly with status
• res.status(500);
LaToza GMU SWE 432 Fall 2017 27
Making a request....
HTTP Request web server
GET /syllabus/syllabi-fall16/SWE432BellJ.html HTTP/1.1
Host: cs.gmu.edu
Accept: text/html Reads file from disk
HTTP Response
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
<html><head>...
LaToza GMU SWE 432 Fall 2017 28
Making HTTP Requests w/ fetch
var fetch = require('node-fetch'); var fetch = require('node-
fetch');
fetch('https://api.github.com/users/
github') fetch('https://github.com/')
.then(function(res) { .then(function(res) {
return res.json(); return res.text();
}).then(function(json) { }).then(function(body) {
console.log(json); console.log(body);
}); });
https://www.npmjs.com/package/node-fetch
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
LaToza GMU SWE 432 Fall 2017 29
Demo: Example Express Microservice
LaToza GMU SWE 432 Fall 2017 30
Readings for next time
• Overview of HTTP:
https://developer.mozilla.org/en-US/docs/Web/
HTTP/Overview
• Intro to REST:
https://www.infoq.com/articles/rest-introduction
LaToza GMU SWE 432 Fall 2017 31
