Web Frameworks

Web development is getting dominated by the MVC (Model View Controller) design pattern. Both on the server and client side.

Web development relies on well established protocols and standards.

Common problems need to be addressed

Tools and frameworks help in every steps

We focus here on node.js and the javascript ecosystem.

Hypertext Transfer Protocol (HTTP)

generic-message = start-line
                *(message-header CRLF)
                CRLF
                [ message-body ]
start-line      = Request-Line | Status-Line

HTTP Headers and Entities

message-header = field-name ":" [ field-value ]
field-name     = token
field-value    = *( field-content | LWS )
field-content  = <the OCTETs making up the field-value
                 and consisting of either *TEXT or combinations
                 of token, separators, and quoted-string>

Example header:

Host: tools.ietf.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Accept-Charset: UTF-8,*;q=0.5
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.17 (KHTML, like Gecko) Chrome/24.0.1312.57 Safari/537.17

HTTP Requests

From the client to the server

Request = Request-Line
          *(( general-header
            | request-header
            | entity-header ) CRLF)
          CRLF
          [ message-body ]

Request Line

Request-Line = Method SP Request-URI SP HTTP-Version CRLF

HTTP Methods

HTTP Responses

Response    = Status-Line
              *(( general-header
               | response-header
               | entity-header ) CRLF)
              CRLF
              [ message-body ]
Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF

Status Codes:

Representational State Transfer

RESTful Web Services

Resource  GET PUT POST DELETE
Collection URI List elements Replace entire collection Create new element in collection Delete collection
Element URI Retrieve one element Replace existing element Generally not used Delete one element

Security

Too many vulnerabilities exist… But developers are responsible for their code!

Common Attacks

Common Measures

Reduce vulnerability… Use frameworks!

The Model–View–Controller Design Pattern

Classical Server-Side MVC Schema

Server-Side MVC Schema

The 3 MVC parts run on the server side.

Server-Side MVC Sequence

Server-Side MVC Sequence

Client-Side MVC Schema

Client-Side MVC Schema

The 3 MVC parts run on the client side. The server is just a gateway for the DBMS.

Client-Side MVC Sequence

Client MVC Sequence

Tools for the JS ecosystem

MVC Frameworks

Server Side MVC Frameworks

many frameworks in many (all?) languages

Java

PHP

Python

Ruby

JavaScript (node.js)

Client Side MVC Frameworks

Obviously in JavaScript… actually not only

https://2019.stateofjs.com/front-end-frameworks/