Introduction to Web development
About me
And I'm gonna teach something relevant, something
Modern -- the Internet!
Protocols
Tell me how you buy a sandwich
From the Internet to the web
HTTP - HTML
Hypertext transfer protocol
- 1991: HTTP 0.9
- 1996: HTTP 1.0
- 1997: HTTP 1.1
- 2015: HTTP 2.0
We will not see deep details of the protocol today
(simple) HTTP logic
(simple) HTTP logic
A request is made of:
- A verb describing the action
- An URL describing the location of the subject of the action
- Headers (as key-value pair) giving additional data regarding the request. We will only talk about the 'content-type' header later
- Optionally: a payload (or body) with data
(simple) HTTP logic
Example:
I want to GET the list of the animal of a zoo at zoo.com/animals
The verb of the request is: GET
The location of the resource is zoo.com/animals
There is no data to sent to zoo.com -> no payload
The headers are not important here
GET zoo.com/animals
(simple) HTTP logic
Example:
I want to POST a new record in the register of the animal of a zoo at zoo.com/animals
The verb of the request is: POST
The location of the resource is zoo.com/animals
We send the data payload describing the animal zoo.com -> we send a payload as a JSON (it is an example there is other data formats !)
The content of the payload is a JSON: the 'application/json' value is associated to the 'content-type' key in the headers.
POST zoo.com/animals
(simple) HTTP logic
HTTP verbs as of HTTP 1.1 (always capitalized):
- GET: to get a resource. You cannot have a payload in a GET request
- POST: create a new resource. There should be a payload in a POST request.
- PUT: it works like POST but is used to update a resource
- DELETE: delete a resource. You should not use a payload here but it is not forbidden.
Out of scope today: HEAD, OPTIONS, CONNECT, TRACE, PATCH
NB: the url can be more complex: if I want a monkey named King, it might look like
zoo.com/animals/monkeys/King
(simple) HTTP logic
HTTP servers answer with data. Each response has a status code. The main are:
| Code | Message | Description |
|---|---|---|
| 200 | OK | Success |
| 201 | Created | A document was created |
| 401 | Unauthorized | Authentication is necessary |
| 403 | Forbidden | The user does not have the rights to perform this action |
| 404 | Not found | |
| 500 | Server error | An internal error occured in the server |
Can we write a request by hand?
Eternal September
Do you know other protcols?
Do you know other Internet usage than HTTP?
What to exchange?
Text
Data?
TEXT!
Simple HTML principles
HTML (1991) is a language used to represent information.
HTML documents are called Web pages
HTML is a markup language that defines a tree structure.
Simple HTML principles
<html>
<head>
<title>My HTML page</title>
</head>
<body>
<h1>I am a big title</h1>
<!--This is a comment. Comments are not displayed in the browser-->
<p>
I am a paragraph.
<a href="http://google.fr">I am a link to google inside a paragraph</a>
</p>
<a href="pages/page2.html">I am a link to another page of the site</a>
</body>
</html><aNameHere> is a tag
</aNameHere> is a closing tag
ALL TAGS MUST BE CLOSED.
Links trigger GET request on the target URL. If the URL is on the same site, the name of the resource is enough.
Simple HTML principles
Tags can have attributes:
<p class="some-class" id="unique-id"></p>The 'id' and 'class' tags are used for applying styles, but it is not the topic today. Please note that the content of the 'id' tag must be unique within the web page.
Static sites are cool but limited
Where PHP, CGI, Java and JavaScript changed the game
Let's generate pages on request
- 1993: CGI (Common Gateway Interface) is introduced. On HTTP request, a program is executed and its text output is returned.
- 1995: PHP is published. It allows to generates web pages on the fly at request time.
- 1995: Java is introduced. It is a powerful language that soon was used to create web servers but not only.
Let's make web pages more friendly
- 1995: in 10 days, Brendan Eich (Netscape) created a scripting language for web-browsers: JavaScript.
- The language is inspired by Java and is designed to be easy to use and learn.
- this language allows to modify the content of an HTML page directly from within the browser.
- EcmaScript is the name of the standardized version of JavaScript.
Another class will be dedicated to JavaScript (JS)
I don't want to refresh anymore
REST and AJAX
Asynchronous JavaScript And XML (AJAX)
- AJAX is a technology created by Microsoft in 1998 within Outlook Web access.
- It was then added to the EcmaScript norm.
- The principle is easy: It is now possible to make HTTP requests from JavaScript code.
- The scripts executed in the browser can get resources from the server and add them in the view by changing the HTML code.
- Usually, XML or JSON are used to format the data.
REpresentational State Transfer (REST)
- It is an architecture pattern created in 2000 in Roy Fielding's Thesis.
- It is now one of the most popular way to offer access to resources on the web.
- This pattern is easily readable by humans and machines.
- It relies on HTTP.
REpresentational State Transfer (REST)
Principles:
- Client-Server: the client and the server are independent from each others.
- Stateless: each HTTP request is standalone. There is no state in the connection.
- Usage of cache: the server provides data to let clients know if the resource can be cached.
- Layer hierarchy for resource organization.
CRUD
CRUD is the acronym of the 4 basic action anyone would want to operate on a resource, each of them is linked to a HTTP verb:
- Create - POST
- Read - GET
- Update - PUT
- Destroy - DELETE
Let's build a picture library
We want to build a REST api giving access to a picture storing service.
- each picture belongs to someone
- each picture can be commented
There is 3 resources types here:
- The picture
- The owner of the picture
- The comments
Hierarchy
User
Picture
Comment
On each resource type, we want to be able to operate CRUD operations.
| Operation | Verb | URI | description |
|---|---|---|---|
| Read (all) | GET | /users | Return the list of the users |
| Create | POST | /users | Create a new user |
| Read | GET | /users/id | Return only one user from its unique id |
| Update | PUT | /users/id | Update the user whose id is given in the the URI |
| Destroy | DELETE | /users/id | Delete the user whose id is given in the URI |
Users
Each user will be given a unique id by the server.
| Operation | Verb | URI | description |
|---|---|---|---|
| Read (all) | GET | /users/id/pictures | Return the list of the pictures of the user whose id is given |
| Create | POST | /users/id/pictures | Create a new picture for the user whose id is given |
| Read | GET | /users/id/pictures/pid | Return the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
| Update | PUT | /users/id/pictures/pid | Update the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
| Destroy | DELETE | /users/id/pictures/pid | Delete the picture whose id is 'pid' and which belongs to the user whose id is 'id' |
Pictures
Each picture will be given a unique id by the server.
| Operation | Verb | URI | description |
|---|---|---|---|
| Read (all) | GET | /users/id/pictures/pid/comments | See previous |
| Create | POST | /users/id/pictures/pid/comments | See previous |
| Read | GET | /users/id/pictures/pid/comments/cid | See previous |
| Update | PUT | /users/id/pictures/pid/comments/cid | See previous |
| Destroy | DELETE | /users/id/pictures/pid/comments/cid | See previous |
Comments
Each comment will be given a unique id by the server.
Any questions ?
So at the end, what does it look like ?
3 tiers model
Three tiers app
Client (here Chrome)
Server (here Django)
Database (here MySQL)
Some websites
Wikipedia
Netflix
If PHP and Java do it, I can do it
Django, Ruby on Rails, ...
Other programming communities have built web frameworks
- Django (python) 2003
- Ruby on rails (Ruby) 2001
To build a web framework, you just need to be able to understand HTTP and to answer with text content over a TCP connection !
The browser is my kingdom
SPA - Websockets
Wait a minute
- You said we could change the content of a web page from the browser using JavaScript right ?
- You said also that with AJAX and REST, pretty much everything we need to render the web page from the browser is there ?
- So, can I just have a single web page with a lot of JavaScript in it ? When people click on a lick, I will change what is displayed and if I need resources, I will fetch them from the server ?
Meet the SPA
Single Page Applications
SPA
- Imagined in 2003-2005.
- The concept is to have a single web page.
- With JavaScript, the information displayed can be changed according to user's interactions.
- If data are needed, an AJAX request can be made.
Example: Gmail or Twitter.
Websockets
- Websocket is an upgrade to HTTP
- It allows to open a two way real-time connection between the server and the client.
- The server can send data to the client even without any request (except the websocket creation)
Example: http://socket.io/demos/weplay/
Web all the things
Node.js - Electron - Cordova
Since 2009, JavaScript taken a huge place in the world of developpement
- Node.js is a JavaScript web framework (yes, you can run JS in the server)
- Electron allows to build desktop apps in JS+HTML
- Cordova allows to build mobile apps in JS+HTML
What have we done ?
React - Server-side rendering
SPA and REST are cool but:
- You need a good internet connection to fetch data often
- You need a powerful computer to run large JavaScript applications in your browser.
Mobile users are doomed here.
React is a view library by Facebbok
- It allows to build the HTML view directly from JavaScript code.
- It runs in the browser as well as on Node.js (server side)
- You can have a single application and render it client side or server side indifferently
- React native?
New Things?
Serverless
GraphQL
WebAssembly
Introduction to Web development
By Vladimir de Turckheim
