Fundamentals of
Web Application Development

Máté Cserép

April 2018, Budapest

What are
web applications?

Compared to websites?

Compared to web services?

What is
network communication?

OSI Model

Layer Function Example
Application (7) Network services for end user applications DNS, SMTP, HTTP, FTP
Presentation (6) Data representation and encryption HTML, JPEG, MP3, AVI
SSL, TLS
Session (5) Establishes/ends connections between two hosts TCP, SIP, RTP, NetBIOS
Transport (4) End-to-end connections and reliability (error handling) TCP, UDP
Network (3) Path determination and logical addressing (IP) Routers, Layer 3 Switches
Data Link (2) Physical addressing (MAC) of data packets Switches
Physical (1) Transmission of data over a physical medium Cables, Hubs, Wifi

Data flow

Layers of abstraction

Object

Serialized data

Message

Communication

REST

HTML

TCP

IP

Abstraction

HTTP

Hypertext Transfer Protocol

Client - Server computing model

Request - Response paradigm

Stateless protocol

Client

HTTP request

HTTP response

Server

Client

HTTP request

Application

Server

Application

Request-Line: HTTP Method + URI + Protocol Version

GET /index.php HTTP/1.1

Headers

Accept: text/html

Accept-Encoding: gzip,deflate

Message Body: optional

Client

Application

Server

Application

Status-Line: Protocol Version + HTTP Status Code

HTTP/1.1 200 OK

HTTP/1.1 301 Moved Permanently

Headers

Content-Type: text/html

Message Body: optional

HTTP response

HTTP request

Methods

  • GET
    • Retrieve information from server
    • Should not have a message body
    • Short parameters can be passed in the query string
       
  • POST
    • Send data to server
    • Client information (forms, file upload, etc.)
    • Requests with large parameters

HTTP in web applications

  • 200 OK
  • 301 Moved Permanently
  • 302 Found (Moved Temporarily)
     
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error

Status Codes

HTTP in web applications

  • Binary format
  • Data compression
  • Multiplexing of requests
  • Server push
  • De facto encryption

Major features

What about HTTP2?

  • Evolved from Google's SPDY protocol in 2015.
     
  • Supported by all major browsers since 2016.
     
  • Over 2 times better page load times!

What about HTTP2?

Mostly nothing, just enjoy!

What to do as an web-application developer?

Network Debugging Monitors

Fiddler

Charles

Wireshark

}

HTTP traffic

Network traffic

Software architectures

… with proper design, the features come cheaply.
This approach is arduous, but continues to succeed.
Dennis Ritchie

Without architecture

Web application

index.php

products.php

order.php

contact.php

Client

  • High code redundancy
  • Poor code reusability
  • Impossible code maintenance

Database

Model-View (MV) architecture

Web application

index.php

products.php

order.php

contact.php

Client

Model

View

Database

Model-View-Controller (MVC) architecture

MVC web application

Client

Database

ViewModel

Controller

Model

View

request

execute

update
(push)

response

query / persist

Front Controller

routes

MVC Frameworks for web developement

REST

Representational State Transfer

RESTful application

  • Client - server architecture
  • Stateless
  • Cacheable
  • Layered system
  • Unified interface
  • Code on demand (optional)

Methods

  • GET
  • HEAD
  • POST
  • PUT
  • DELETE

REST over HTTP

  • CONNECT
  • OPTIONS
  • TRACE
  • 100 Continue
  • 200 OK
  • 201 Created
  • 202 Accepted
  • 204 No Content
     
  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 500 Internal Server Error

Status Codes

REST over HTTP

RESTful web services

RESTful service

Desktop client
(Windows, C#)

Console client
(Linux, C++)

Web client
(Browser, HTML)

Database

Web client
(Browser, JavaScript)

XML

JSON

JSON

HTML

REST API Debuggers

Fiddler

Charles

Postman

RESTClient

Insomnia

Web application life cycle

  • Requests are independent from each other
    • A web application can maintain sessions for each client
    • Only if clients accept some form of tracking information (session ID)
  • Clients can make requests in any order
    • A web application should make no assumptions or trust clients to follow a predefined workflow

HTTP is stateless

Showcase

Authenticate

Add product to basket

Checkout

Pay

Complete order

Web application

Bank

Client

Browser

Client may make ANY request in
ANY order

Life cycle in MVC

Client

Create controller instance

Create model instance

Execute tasks

Create view instance

Create response

Delete controller, model, view instances

HTTP request

HTTP response

Overview

  • Networking, Communication
  • HTTP protocol, Request - Response model
  • Web application life cycle 
  • Software architectures
    • Model-View-Controller architecture
    • REST architecture

Fundamentals of Web Application Development

By Cserép Máté

Made with Slides.com

Fundamentals of Web Application Development

Networking, Communication, HTTP protocol, Request - Response model, Web application life cycle, Software architectures, MVC, REST

  • 91

More from Cserép Máté