Scribd
Upload
5 views

Lecture 5 - Backend Development

Uploaded by

dormeluslovensky21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Lecture 5 - Backend Development

Uploaded by

dormeluslovensky21
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

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

You might also like