Written by Yoann Pigné
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
- Browsers’ compatibility
Tools and frameworks help in every steps
- MVC Frameworks (Client/Server-Side)
- Testing Frameworks
- Continuous integration platforms
- Task Runners
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>
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
From the client to the server
Request = Request-Line *(( general-header | request-header | entity-header ) CRLF) CRLF [ message-body ]
Request-Line = Method SP Request-URI SP HTTP-Version CRLF
- “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).
Response = Status-Line *(( general-header | response-header | entity-header ) CRLF) CRLF [ message-body ] Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF
- 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
|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|
- Plural may indicate a collection e.g.
- An id may indicate an element e.g.
- Can be prefixed with an API version e.g.
https://api.twitter.com/1.1/statuses/home_timeline.jsonor a keyword (
api) in order to distinguish from normal web pages. home_timeline.json
Too many vulnerabilities exist… But developers are responsible for their code!
- Cross-Site Request Forgery (CSRF)
- Cross-site scripting (XSS)
- SQL injection
- 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
- Holds the data
- Links to persistent storage (DBMS)
- Ignores other components
- Representation of data
- What users see
- May know the Model
- 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:
- Dependencies Management:
- Task Runner:
- Module Builder for Browsers
- Projects Scaffolding:
Server Side MVC Frameworks
many frameworks in many (all?) languages
- Spring MVC
- Struts 2
- Wicket (Apache)
- GWT (Google)
- And off course the JAVA EE ecosystem…
- Zend Framework (IBM)
- CakePHP (Open Source)
- Ruby on Rails
Client Side MVC Frameworks
- React + Redux