Scribd
Upload
18 views32 pages

Lecture 13 - Backend Development

Uploaded by

sohelmahommed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
18 views32 pages

Lecture 13 - Backend Development

Uploaded by

sohelmahommed
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
Download as pdf or txt
Download as pdf or txt
You are on page 1/ 32

Backend Development

SWE 432, Fall 2016


Design and Implementation of Software for the Web
Show & Tell

Sparklines in NYT

http://www.nytimes.com/interactive/2016/upshot/presidential-polls-forecast.html

LaToza/Bell GMU SWE 432 Fall 2016 2


Today
• Why do we need backend programming?
• How can/should we structure those backends?
• Node.JS

For further reading:


https://nodejs.org (Docs + Examples)
https://www.npmjs.com (Docs + Examples)
https://firebase.google.com/docs/server/setup

LaToza/Bell GMU SWE 432 Fall 2016 3


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/Bell GMU SWE 432 Fall 2016 4


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/Bell GMU SWE 432 Fall 2016 5


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/Bell GMU SWE 432 Fall 2016 6
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/Bell GMU SWE 432 Fall 2016 7


Dynamic Web Apps
Web “Front End”
Presentation
React
Some logic
HTML CSS JavaScript

“Back End”
Data storage
Some
Firebase
other API Some other logic

LaToza/Bell GMU SWE 432 Fall 2016 8


Dynamic Web Apps
Web “Front End”
Presentation
React
Some logic
HTML CSS JavaScript

“Back End”
Data storage
Some Our own
Firebase
other API backend Some other logic

LaToza/Bell GMU SWE 432 Fall 2016 9


What does our backend look like?
Our own backend

AJAX Connection to
Web “Front End”
Frontend

Logic

Persistent Data

LaToza/Bell GMU SWE 432 Fall 2016 10


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/Bell GMU SWE 432 Fall 2016 11


What’s wrong with this
picture?
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/Bell GMU SWE 432 Fall 2016 13


Backend Spaghetti

LaToza/Bell GMU SWE 432 Fall 2016 14


De-Spaghettification
Our own backend

Connection to
Frontend View

Logic Controller

Persistent Data Model

Lecture 10

LaToza/Bell GMU SWE 432 Fall 2016 15


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

LaToza/Bell GMU SWE 432 Fall 2016 16


Node.JS
• We’re going to write backends with Node.JS
• Why use Node?
• Easy to get into after learning JS (it’s JS)

• 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

LaToza/Bell GMU SWE 432 Fall 2016 17


Node.JS
• Node.JS is a runtime that lets you run JS outside of a
browser
• Node.JS has a very large ecosystem of packages
•Example: express (web server), nodemon
(automatically restarts your server when it changes)
• Must be downloaded and installed
https://nodejs.org/en/

• We recommend v4.5.0 LTS (LTS -> Long Term


Support, designed to be super stable)

LaToza/Bell GMU SWE 432 Fall 2016 18


More on Modules
• How have we been using libraries so far?
<script src="https://fb.me/react-15.0.0.js"></script>
<script src=“https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></
script>

• What’s wrong with this?


• No standard format to say:
• What’s the name of the module?
• What’s the version of the module?
• Where do I find it?
• Ideally: Just say “Give me React 15 and everything I need to
make it work!”
• This is slowly being fixed for ES6 and on… but Node has a
great (non-standardized) approach we can use for backend
development

LaToza/Bell GMU SWE 432 Fall 2016 19


A better way for modules
• Describe what your modules are
• Create a central repository of those modules
• Make a utility that can automatically find and
include those modules
Modules that magically appear

Your app Assumes dependencies magically exist

Dependencies
Configuration Declares what modules you need
Package
Manager Provides the modules to your app

LaToza/Bell GMU SWE 432 Fall 2016 20


NPM: Not an acronym, but the Node
Package Manager
• Bring order to our modules and
dependencies Generated by npm commands:
{
• Declarative approach: "name": "helloworld",
"version": "1.0.0",
• “My app is called helloworld” "description": "",
"main": "index.js",
• “It is version 1” "scripts": {
"test": "echo \"Error: no test
• You can run it by saying “node specified\" && exit 1"
},
index.js” "author": "",
"license": "ISC",
• “I need express, the most "dependencies": {
"express": "^4.14.0"
recent version is fine” }
}
• Config is stored in json -
specifically package.json

LaToza/Bell GMU SWE 432 Fall 2016 21


Using NPM
• Your “project” is a directory which contains a special file,
package.json
• Everything that is going to be in your project goes in this directory
• Step 1: Create NPM project
npm init
• Step 2: Declare dependencies
npm install <packagename> --save
• Step 3: Use modules in your app
var myPkg = require(“packagename”)
• Do NOT include node_modules in your git repo! Instead, just do
node install

• This will download and install the modules on your machine


given the existing config!

LaToza/Bell GMU SWE 432 Fall 2016 22


Demo: Hello World Server

1: Make a directory, myapp Creates a configuration file


for your project
2: Enter that directory, type npm init (accept all defaults)
3: Type npm install express --save Tells NPM that you want to use
4: Create text file app.js: express, and to save that in your
project config
var express = require('express');
var app = express();
var port = process.env.port || 3000;
app.get('/', function (req, res) {
res.send('Hello World!');
});

app.listen(port, function () {
console.log('Example app listening on port' + port);
});

5: Type node app.js


6: Point your browser to http://localhost:3000 Runs your app

LaToza/Bell GMU SWE 432 Fall 2016 23


Demo: Hello World Server

var express
1: Make = require(‘express');
a directory, myapp Creates a configuration file
Import the module express for your project
2: Enter that directory, type npm init (accept all defaults)
var app = express();
3: Type npma install express --save Tells NPM that you want to use
Create new instance of express
4: Create text file app.js: express, and to save that in your
var port = process.env.port || 3000; project config
Decide what port we want express to listen on

app.get('/', function (req, res) {


res.send('Hello World!');
});
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,
Runs and print
your appto the console once it
6: Point your browser to http://localhost:3000
starts successfully
LaToza/Bell GMU SWE 432 Fall 2016 24
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)

LaToza/Bell GMU SWE 432 Fall 2016 25


Putting it together:
Firebase + Node
Moving Firebase into Node
• General rule:
• If you set your database to be writeable by
everyone… then make sure NOBODY has your
private key

In our security lecture we’ll talk about having some data writable through
the web app directly and some only through node. For now, we’ll talk
about the simplest case: Only allow writes through our node backend.
LaToza/Bell GMU SWE 432 Fall 2016 27
Firebase + Node
• Step 1: Create a special access key for our Node app
to use to access our database
• This key will distinguish our node app from the web app
• Now you can keep publishing your API key, but have a
private key that you never publish publicly
• https://firebase.google.com/docs/server/setup
1 Create a Firebase project in the Firebase console, if you don't already have one. If you already have an existing Google project
associated with your app, click Import Google Project. Otherwise, click Create New Project.
2 Click settings and select Permissions.
3 Select Service accounts from the menu on the left.
4 Click Create service account.
a Enter a name for your service account. You can optionally customize the ID from the one automatically generated from
the name.
b Choose Project > Editor from the Role dropdown.
c Select Furnish a new private key and leave the Key type as JSON.
d Leave Enable Google Apps Domain-wide Delegation unselected.
e Click Create.

LaToza/Bell GMU SWE 432 Fall 2016 28


Firebase + Node
• Step 2: Configure our database to allow writes from
ONLY clients that have authenticated with a private
key
• Database -> Rules -> Set .write to be “auth != null”

LaToza/Bell GMU SWE 432 Fall 2016 29


Firebase + Node
• Step 3: Declare our dependency on firebase
• In our project directory, run:
npm install firebase --save
• In our app, write:
• var firebase = require("firebase");
• Step 4: Copy our downloaded private key (step 1)
to our directory and configure Firebase to connect
with it

LaToza/Bell GMU SWE 432 Fall 2016 30


Demo: Firebase +
NodeJS
What’s to come?
• How do we create structured APIs?
• How do we maintain some state between our
backend and frontend?
• Privacy & Security
• Architecting many services together
• Deploying our backend services

LaToza/Bell GMU SWE 432 Fall 2016 32

You might also like