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.

• HTTP
• REST

Common problems need to be addressed

• Security
• Browsers’ compatibility

Tools and frameworks help in every steps

• MVC Frameworks (Client/Server-Side)
• Testing Frameworks
• Continuous integration platforms
• Task Runners
• Scaffolding
• …

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

Hypertext Transfer Protocol (HTTP)

• Application-level protocol for distributed systems. Generic and stateless.
• Request message (from client to server)
• Response message (from server to client)
• Text-based messages / Multipurpose Internet Mail Extensions (MIME) format
• Messages :

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

• “OPTIONS”: information about the communication options available
• “GET”: retrieve whatever information is identified by the Request-URI
• “HEAD”: same as “GET” message-body in the response
• “POST”: append entity to the existing Request-URI
• “PUT”: store entity as the new Request-URI
• “DELETE”: delete existing Request-URI
• “TRACE” : see what is being received at the other end of the request chain
• “CONNECT” : for use with a proxy that can dynamically switch to being a tunnel (e.g. SSL tunneling).

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:

• 1xx: Informational - Request received, continuing process
• 2xx: Success - The action was received, understood, and accepted
• 3xx: Redirection - Further action must be taken to complete the request
• 4xx: Client Error - The request contains bad syntax or cannot be fulfilled
• 5xx: Server Error - The server failed to fulfill an apparently valid request

Representational State Transfer

• REST is a style of software architecture for distributed systems on top of HTTP.
• Each resource is accessed through one unique request (URI).
• Requests are stateless (identification within the URI)
• Resources are accessed one by one or as collections
• RESTful web service (RESTful web API)

RESTful Web Services

• RESTful API and HTTP methods

• Plural may indicate a collection e.g. http://example.com/emails/
• An id may indicate an element e.g. http://example.com/email/17/
• Can be prefixed with an API version e.g. https://api.twitter.com/1.1/statuses/home_timeline.json or a keyword (api) in order to distinguish from normal web pages. home_timeline.json

Security

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

Common Attacks

• Cross-Site Request Forgery (CSRF)
• Cross-site scripting (XSS)
• SQL injection

Common Measures

• Anti-CSRF tokens
• Forms Timeouts
• Escape users inputs

Reduce vulnerability… Use frameworks!

The Model–View–Controller Design Pattern

• Improve the separation of concerns
• Facilitate automated unit testing
• Facilitate team work
• MODEL
  • Holds the data
  • Links to persistent storage (DBMS)
  • Ignores other components
• VIEW
  • Representation of data
  • What users see
  • May know the Model
• CONTROLLER
  • Handles users requests
  • Updates Model data
  • Triggers Views

Classical Server-Side MVC Schema

The 3 MVC parts run on the server side.

Server-Side MVC Sequence

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

Tools for the JS ecosystem

• JS Interpreter:
  • node (nodejs.org)
• Dependencies Management:
  • client side:
    • bower (bower.io)
    • duo (duojs.org)
  • server side:
    • npm (packaged with node)
    • yarn (facebook)
• Task Runner:
  • grunt (gruntjs.com), gulp
  • npmscripts
• Module Builder for Browsers
  • webpack
  • browserify
• Projects Scaffolding:
  • yeoman (yeoman.io)
  • create-react-app

MVC Frameworks

Server Side MVC Frameworks

many frameworks in many (all?) languages

Java

• Spring MVC
• Struts 2
• Stripes
• Wicket (Apache)
• GWT (Google)
• And off course the JAVA EE ecosystem…

PHP

• Zend Framework (IBM)
• Symphony
• CakePHP (Open Source)
• …

Python

• Django
• web2py
• Zope

Ruby

• Ruby on Rails

JavaScript (node.js)

• Express

Client Side MVC Frameworks

Obviously in JavaScript… actually not only

• Angular
• Ember.js
• Vue.js
• React + Redux

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