Backend Development. SWE 432, Fall Web Application Development

Size: px

Start display at page:

Download "Backend Development. SWE 432, Fall Web Application Development"

Deborah Small
5 years ago
Views:

1 Backend Development SWE 432, Fall 2018 Web Application Development

2 Review: Async Programming Example 1 second each Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar Go get a candy bar 2 seconds each Group all Twix Group all 3 Musketeers thencombine Group all MilkyWay when done Group all MilkyWay Dark Group all Snickers Eat all the Twix Explain example!2

3 Review: Async/Await Rules of the road: You can only call await from a function that is async You can only await on functions that return a Promise Beware: await makes your code synchronous! async function getandgroupstuff() {... ts = await lib.grouppromise(stuff,"t");... }!3

4 Today What is a backend for? History of backend web programming NodeJS backends with Express!4

5 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!5

6 Dynamic Web Apps What the user interacts with Web Front End Frontend programming next week Presentation Some logic Back End What the front end interacts with Persistent Storage Some other APIs Data storage Some other logic

7 Where do we put the logic? What the user interacts with Web Front End Presentation Some logic Back End What the front end interacts with Persistent Storage Some other APIs Data storage Some other logic Frontend Pros Very responsive (low latency) Cons Security Performance Unable to share between front-ends Backend Pros Easy to refactor between multiple clients Logic is hidden from users (good for security, compatibility, and intensive computation) Cons Interactions require a round-trip to server

8 Why Trust Matters Example: Transaction app function updatebalance(user, amounttoadd) { user.balance = user.balance + amounttoadd; } What s wrong? How do you fix that?!8

9 What does our backend look like? Our own backend Web Front End AJAX Connection to Frontend Logic Persistent Data!9

10 The good old days of backends HTTP Request GET /myapplicationendpoint HTTP/1.1 Host: cs.gmu.edu Accept: text/html web server Give me /myapplicationendpoint Runs a program Web Server Application Here s some text to send back Does whatever it wants My Application Backend HTTP Response HTTP/ OK Content-Type: text/html; charset=utf-8 <html><head>...!10

11 What s wrong with this picture?

12 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!12

13 MVC & Backend Servers There are a ton of backend frameworks that support MVC SailsJS, Ruby on Rails, PHP Symfony, Python Django, ASP.NET, EJB Old days: View was server-generated HTML New days: View is an API Today we ll talk about Node.JS backend development We will not talk about making MVC backends and will not require you to do so!13

14 Microservices vs. Monoliths Advantages of microservices over monoliths include Support for scaling Scale vertically rather than horizontally Support for change Support hot deployment of updates Support for reuse Use same web service in multiple apps Swap out internally developed web service for externally developed web service Support for separate team development Pick boundaries that match team responsibilities Support for failure!14

15 Support for scaling Our Cool App Frontend Backend Server Mod 1 Mod 2 Mod 3 Mod 4 Mod 5 Mod 6 Database!15

16 Now how do we scale it? Our Cool App Frontend Backend Server Mod 1 Mod 2 Mod 3 Mod 4 Mod 5 Mod 6 Backend Server Mod 1 Mod 2 Mod 3 Mod 4 Mod 5 Mod 6 Backend Server Mod 1 Mod 2 Mod 3 Mod 4 Mod 5 Mod 6 Database We run multiple copies of the backend, each with each of the modules!16

17 What's wrong with this picture? This is called the Our Cool App Frontend monolithic app Backend Server Mod 1 Mod 2 Backend Server Mod 1 Mod 2 Backend Server Mod 1 Mod 2 Mod 3 Mod 4 Mod 3 Mod 4 Mod 3 Mod 4 Mod 5 Mod 6 Mod 5 Mod 6 Mod 5 Mod 6 If we need 100 servers Database Each server will have to run EACH module What if we need more of some modules than others?!17

18 Microservices NodeJS, Firebase Google Service Java, MySQL Todos Mod 1 Accounts Mod 2 Mod Mailer 3 Our Cool App REST service REST service REST service Frontend Database Database Database Dumb Backend AJAX Mod Search 4 Engine REST service Analytics Mod 5 REST service Mod 6 Facebook Crawler REST service Database Database Database Java, Neo4J C#, SQLServer Python, Firebase!18

19 Goals of microservices Add them independently Upgrade the independently Reuse them independently Develop them independently ==> Have ZERO coupling between microservices, aside from their shared interface!19

20 Node.JS We re going to write backends with Node.JS Why use Node? Event based: really efficient for sending lots of quick updates to lots of clients Why not use Node? Bad for CPU heavy stuff It s relatively immature!20

21 Node.JS Node.JS is a runtime that lets you run JS outside of a browser How we ve been running JS so far, mostly (browser will start next week) Node.JS has a very large ecosystem of packages as we ve seen Very relevant example here: express (web server)!21

22 Express Basic setup: For get: app.get("/somepath", function(req, res){ //Read stuff from req, then call res.send(myresponse) }); For post: app.post("/somepath", function(req, res){ //Read stuff from req, then call res.send(myresponse) }); Serving static files: app.use(express.static('myfilewithstaticfiles')); Make sure to declare this *last* Additional helpful module - bodyparser (for reading POST data)!22

23 Demo: Hello World Server 1: Make a directory, myapp 2: Enter that directory, type npm init (accept all defaults) Creates a configuration file for your project 3: Type npm install express --save 4: Create text file app.js: var express = require('express'); var app = express(); var port = process.env.port 3000; app.get('/', function (req, res) { res.send('hello World!'); }); Tells NPM that you want to use express, and to save that in your project config app.listen(port, function () { console.log('example app listening on port' + port); }); 5: Type node app.js 6: Point your browser to Runs your app!23

Demo: Hello World Server var 1: Make express a directory, = require( express'); myapp Import the module express 2: Enter that directory, type npm init (accept all defaults) var app = express(); 3:

get('/', function (req, res) { res.send('hello World!

24 Demo: Hello World Server var 1: Make express a directory, = require( express'); myapp Import the module express 2: Enter that directory, type npm init (accept all defaults) var app = express(); 3: Type Create npm a install new instance express of express --save 4: Create text file app.js: var port = process.env.port 3000; Decide what port we want express to listen on app.get('/', function (req, res) { res.send('hello World!'); }); Creates a configuration file for your project Tells NPM that you want to use express, and to save that in your project config 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 () { console.log('example app listening on port' + port); }); 5: Type node app.js Tell our new instance of express to listen on port, 6: Point your browser to Runs and your print app to the console once it starts successfully!24

25 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'); });!25

26 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'); });!26

27 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 Resulting req.params: { "userid": "34", "bookid": "8989" } app.get('/users/:userid/books/:bookid', function(req, res) { res.send(req.params); });!27

28 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!28

29 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 [HTML data]!29

30 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 }); });!30

31 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

32 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!32

33 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!33

34 Error handling in Express Express offers a default error handler Can specific error explicitly with status res.status(500);!34

35 Making HTTP Requests Writing clients that talk to backends Two good options: request, request-promise (need to install both to use request-promise) var rp = require('request-promise'); rp(" => { console.log("response from server:"); console.log(v); }).catch(e => { console.log("error"); console.log(e); })!35

Backend Development. SWE 432, Fall 2017 Design and Implementation of Software for the Web

Backend Development. SWE 432, Fall 2017 Design and Implementation of Software for the Web 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/