Web Application Architectures
Architecture Description Example Technologies
Separates application into Model (data), View (UI), Controller
MVC (Model-View-Controller) Ruby on Rails, ASP.NET MVC, Spring MVC
(logic). Very common.
Django’s variant of MVC. Model (data), Template (UI), View
MTV (Model-Template-View) Django (Python)
(logic and processing).
Separates UI logic into a ViewModel for more dynamic UIs,
MVVM (Model-View-ViewModel) Angular, Knockout.js, Vue.js
often with two-way data binding.
Divides app into Presentation (UI), Logic (business rules), and
Three-Tier Architecture Java EE, .NET apps
Data (DB). Common in enterprise apps.
App is split into many small services that communicate over
Microservices Architecture Netflix, Amazon
APIs. Great for scalability and agility.
No traditional server management; functions run on demand
Serverless Architecture AWS Lambda, Azure Functions
(FaaS - Functions as a Service).
App loads a single HTML page and dynamically updates as user
Single-Page Application (SPA) React, Angular, Vue.js
interacts. Heavy on frontend JS.
Web apps that feel like native apps with offline support and
Progressive Web App (PWA) React, Angular (with Service Workers)
push notifications.
System reacts to events or messages asynchronously. Good for
Event-Driven Architecture Kafka, RabbitMQ
real-time systems.
Everything (UI, logic, data) is packaged and deployed as a single
Monolithic Architecture Traditional PHP, older Rails apps
unit. Simple but can get bulky.
MVC
References
- MVC: https://www.youtube.com/watch?v=pCvZtjoRq1I
- W3Schools – Python
- Previous lectures of Dr.Neamat.
4
MVC Design Pattern
Model View Controller
Software Architectural Design Pattern
One of the most frequently used patterns
General Goal: Separate application functionality
Promotes organized programming
5
MVC Design Pattern
The Model View Controller (MVC) design pattern specifies
that an application consist of a data model, presentation
information, and control information. The pattern requires that
each of these be separated into different objects.
6
Some Web Frameworks (using MVC
Concepts)
Ruby on Rails (Ruby)
Sinatra (Ruby)
Django (Python)
Flask (Python)
Zend (PHP)
Laravel (PHP)
Angular (JS)
Backbone (JS)
Express (JS)
Codeigniter(PHP)
7
Mode
l
Data related logic (Brain of the application)
Interactions with database (SELECT, INSERT, UPDATE, and DELETE),
can even be a simple file!
Communicates with controller
Can sometimes update the view (Depends on framework)
Vie
w
What the end user sees (UI)
Usually consists of HTML/CSS
Communicates with the controller
Can be passed dynamic values from the controller
Templates Engines (allows dynamic data)
◦ Dust
◦ HAML
◦ Jinja (FLASK)
◦ Django Template Language
9
Controller
(Middleman)
Receives input (from view, url)
Processes requests (GET, POST, PUT, DELETE)
Gets data from the model
Passes data to the view
1
0
Cycl
e
1
1
MVC
Cycle
•A request is made — say, when a user enters a URL associated
with your application.
•A route associated with that URL maps the URL to a controller
action.
•That controller action leverages the necessary model(s) to
retrieve information from the database, and then passes that
data off to a view.
•And that view renders the final page.
10
MVC Advantages
•Multiple developers can work on the model,
simultaneously controller and views.
•MVC enables logical grouping of related actions on a controller
together. The views for a specific model are also grouped
together.
•Reusing of code and parallel development
•Models can have multiple views.
11
MVC Disadvantages
•The framework navigation can be complex because it introduces
new layers of abstraction and requires users to adapt to
the decomposition criteria of MVC.
•Knowledge on multiple technologies becomes the norm.
Developers using MVC need to be skilled in multiple technologies.
12
Exampl
e
13
REST API Basics
Traditional web applications
Client GET /the-resource Server
...
200 OK
Displays the page,
then user clicks <html>Code...</html>
GET /another-resource
on link. ...
200 OK
Displays the other
page, ... <html>Code...</html>
Traditional web applications
The interface is built on HTML & HTTP.
Drawbacks:
◦ The client must understand both HTTP and HTML.
◦ The entire webpage is replaced with another one.
◦ No way to animate transitions between webpages.
◦ Same data is usually sent in multiple responses.
◦ E.g. HTML code for the layout.
Traditional web applications
HTTP &
???
HTML
Client
Client Server
• HTTP & HTML can be used, but is not optimal.
• The GUI on smartphones does not use HTML.
• E.g. GET /users/3: Age City
Name
<h1>Claire</h1>
<p>Claire is 24 years old and lives in
Boston.</p>
Application programming interface
A GUI is an interface for Human ↔ Machine communication.
API GUI
Client User
Server
An API is an interface for Machine ↔ Machine communication.
An API making use of HTTP is called a Web API.
Different types of Web APIs
Remote Procedure Call, RPC.
◦ Clients can call functions on the server.
Remote Method Invocation, RMI.
◦ Clients can call methods on objects on the server.
Representational State Transfer, REST.
◦ Clients can apply CRUD operations on resources on the server.
What is REST?
An architectural style for distributed hypermedia systems described by Roy Thomas Fielding in his
doctoral dissertation 2000.
Consists of constraints:
1. Client - Server
2. Stateless
3. Cache
4. Uniform Interface
5. Layered System
6. Code-On-Demand
Web Web Relational
HTTP SQL
Browser Application Database
Client Server Server
What does REST mean?
The name "Representational State Transfer" is intended to evoke an
image of how a well-designed Web application behaves: a network of
web pages (a virtual state-machine), where the user progresses through
the application by selecting links (state transitions), resulting in the next
page (representing the next state of the application) being transferred to
the user and rendered for their use.
What does REST mean? Id Name
1 Alice
2 Bob
3 Claire
Client GET /users/2 Server Users
...
{"id": 2, "name": "Bob"}
Changes state.
{"id": 2,
"name": "Obi"}
PUT /users/2
{"id": 2, "name": "Obi"}
Using HTTP as the uniform interface
Use URIs to identify resources.
Use HTTP methods to specify operation:
◦Create: POST (or PUT)
◦Retrieve: GET Bad Good
◦Update: PUT (or PATCH) POST /login POST /login-sessions
◦Delete: DELETE POST /create-book POST /books
Use HTTP headers GET /get-top-10-books GET /top-10-books
Content-Type and Accept
to specify data format for the resources.
Use HTTP status code to indicate success/failure.
Using HTTP as the uniform interface
REST is an architectural style, not a specification.
In practice, it can be used in many different ways.
◦ But some are better than others.
Good recommendations:
Web API Design - Crafting Interfaces that Developers Love
◦ https://pages.apigee.com/rs/apigee/images/api-design-ebook-2012-03.pdf
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The GET method is used to retrieve resources.
◦ GET /users
◦ GET /users/2
◦ GET /users/pages/1
◦ GET /users/gender/female GET /users?page=1
◦ GET /users/age/18
GET /users?gender=female
◦ GET /users/???
◦ GET /users/2/name GET /users?age=18
◦ GET /users/2/pets GET /users?gender=female&age=18
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The GET method is used to retrieve resources.
◦ Which data format? Specified by the Accept header!
GET /users HTTP/1.1 HTTP/1.1 200 OK
Host: the-website.com Content-Type: application/json
Accept: application/json Content-Length: 66
[
application/xml {"id": 1, "name": "Alice"},
was popular before {"id": 2, "name": "Bob"}
JSON.
]
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The POST method is used to create resources.
◦ Which data format? Specified by the Accept and Content-Type header!
POST /users HTTP/1.1 HTTP/1.1 201 Created
Host: the-website.com Location: /users/3
Accept: application/json Content-Type: application/json
Content-Type: application/xml Content-Length: 28
Content-Length: 49
{"id": 3, "name": "Claire"}
<user>
<name>Claire</name>
</user>
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The PUT method is used to update an entire resource.
PUT /users/3 HTTP/1.1 HTTP/1.1 204 No Content
Host: the-website.com
Content-Type: application/xml
Content-Length: 52 PUT can also be used to
create a resource if you know
which URI it should have in
<user>
advance.
<id>3</id>
<name>Cecilia</name>
</user>
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The DELETE method is used to delete a resource.
DELETE /users/2 HTTP/1.1 HTTP/1.1 204 No Content
Host: the-website.com
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
The PATCH method is used to update parts of a resource.
PATCH /users/1 HTTP/1.1 HTTP/1.1 204 No Content
Host: the-website.com
Content-Type: application/xml
Content-Length: 37
The PATCH method is
only a proposed
<user> standard.
<name>Amanda</human>
</user>
Id Name
1 Alice
REST example 2
3
Bob
Claire
A server with information about users.
Users
What if something goes wrong?
◦ Use the HTTP status codes to indicate success/failure.
GET /users/999 HTTP/1.1 HTTP/1.1 404 Not Found
Host: the-website.com
Accept: application/json
• Read more about the different status codes at:
• http://www.restapitutorial.com/httpstatuscodes.html
• Optionally include error messages in the response body.
Designing a REST api
How should you think?
Make it as easy as possible to use by other programmers.
Facebook:
◦ Always return 200 OK.
◦ GET /v2.7/{user-id}
◦ GET /v2.7/{post-id}
◦ GET /v2.7/{user-id}/friends
◦ GET /v2.7/{object-id}/likes
Designing a REST api
How should you think?
Make it as easy as possible to use by other programmers.
Twitter:
◦ Only use GET and POST.
◦ GET /1.1/users/show.json?user_id=2244994945
◦ POST /1.1/favorites/destroy.json?id=243138128959913986
Postman & Swagger Demos
