Embed Size (px)
Citation preview
Spring 2020 – University of Virginia 1© Praphamontripong
Back end Development
CS 4640 Programming Languages
for Web Applications
Spring 2020 – University of Virginia 2© Praphamontripong
How User Interact With Web Apps
Web server
Web client
Web component1
Web component2
Web componentn
DBor
persistent data
Request
HTTPRequest
HTTPResponse
Response
http://www.virginia.edu/ Web application
HTMLJS
CSS
Usability
PHPs
revisit
Spring 2020 – University of Virginia 3© Praphamontripong
Web Development (General View)
[ Salaries reference: PayScaleLast accessed: 6-Jan-2020 ]
Front End Development
• UI/UX design, usability• Web design• Responsive design
$47k – $108k, avg = $71k
• Client side• HTML, CSS, JS (and JS libraries,
frameworks)• Fixed huge amount of data, no
database interaction(developer / engineer)
Back End Development
• Server administration • Database, data science
$40k – $98k, avg = $71k
• Server side• Speed, performance, scalability,
security, availability, accessibility, reliability
• Business logic• Java, PHP, Python, Ruby on Rails,
and back end frameworks• Database interaction
(developer / engineer)
Full-Stack Development
$53k – $113k, avg = $78k
$70k – $130k, avg = $93k
• Variety of skills (both front end and back end)
• Horizontal technology development (+)
• Not expert in particular skill (-)
(developer)
(engineer)
revisit
Spring 2020 – University of Virginia 4© Praphamontripong
How the Web Software Works
form-handler.php
BrowserTo server
To client
Browser
Spring 2020 – University of Virginia 5© Praphamontripong
Server Side Processing
ServerClient
UI implemented and rendered in
a browser
Web server
Database server
Container engine
Program components
HTTP Request
HTTP Response
data
HTML
XAMPP
PHPs
revisit
Spring 2020 – University of Virginia 6© Praphamontripong
Execution Overview
Web server
Server
Container engine
HTTP Response
HTTP Request
Incoming request1
2 7
63 Request / Response Objects
Modified Response Object
Response back to requestor 8
Program component
ReturnCreate thread /
call method4 5
HTTP client-server communication is connectionless
(stateless)As soon as the request is made and fulfilled, the connection is terminated
Spring 2020 – University of Virginia 7© Praphamontripong
Session ManagementHow can servers keep track of state of different clients?1. Session : A single coherent use of the system by the same user
– Example : shopping carts
2. Cookies : A string of characters that a web server places on a browser’s client to keep track of a session
– Usually used as an index into a table (dictionary) on the server– Most dictionaries expire after a period of time (15 to 30
minutes)
Additional mechanisms- URL rewriting- Hidden form control
We will come back to this later …
Spring 2020 – University of Virginia 8© Praphamontripong
Additional Web FeaturesUser’s ability to control web application via web browser features
component
simple link transition
form link transition
redirect transition
operational transition
index
login
browserecord_add
submit a formpost (userid , password)
redirect
record_insert
submit a form post (name, category, content)
redirect
back
Spring 2020 – University of Virginia 9© Praphamontripong
Additional Web Features (2)Communication among web components depending on requests through the HTTP
component
simple link transition
form link transition
redirect transition
operational transition
index
login
browserecord_add
submit a formpost (userid , password)
redirect
record_insert
submit a form post (name, category, content)
redirect
back
get
Spring 2020 – University of Virginia 10© Praphamontripong
Additional Web Features (3)Control connections: forward, include, redirect
component
simple link transition
form link transition
redirect transition
operational transition
index
login
browserecord_add
submit a formpost (userid , password)
redirect
record_insert
submit a form post (name, category, content)
redirect
back
forward
Spring 2020 – University of Virginia 11© Praphamontripong
Server
Back End Component and Page-centric Design
Database
Main component(Client requests are intercepted here)
Component(data)
Uses or instantiates
Web client
Web client
Web client
Requests are made to a main component and the main component response to clients
Spring 2020 – University of Virginia 12© Praphamontripong
Server
Back End Component and Dispatcher (N-tier) Design
Dispatcher
Business processing
Usu
ally
use
forw
ard
Web client
Web client
Web client
Componentpresentation
Component presentation
Component presentation
Data
Data
Database
Requests are sent to a dispatcher that then forward the requests to another component (using forward or redirect control connection)
Spring 2020 – University of Virginia 13© Praphamontripong
Back End Component and Model View Controller
Model
• Encapsulates application state• Responds to state queries• Exposes application functionality• Notifies views of changes
View
• Renders the model• Requests updates from the model• Sends user inputs to controller• Allows controller to select view
Controller
• Defines application behavior• Maps user actions to model updates• Selects a view for response• One view for each function
[Graphic from Designing Enterprise Applications with the Java 2 Platform, Enterprise Edition, Nicholas Kassem et al., October 2000]
state query
state change
view select
change notification
user input
method calls
events
data structures
HTML / JSP / frontend
Components
