Introduction to Web development

Outline

  • Scope
  • Good ol' web
  • Static is not chic
  • I want to communicate and share
  • What the hell is this monster ?
  • Let's do that too
  • The AOL effect
  • One language to rule them all ?
  • More seriously, what is this class about ?!

Vladimir de Turckheim

  • Lead Node.js engineer @ Sqreen
  • Former cyber-security consultant @ Secway
  • JavaScript full stack engineer
  • DevOps
  • Open-Source contributor

Goodwill principle

  • Everyone did its best in the the limits of their knowledge and ability at a certain time
  • Everyone has a life outside this classroom but will do his best for this not to interfere with the class.

  • Every assessment has a goal: identifying room for improvement. 

Scope

Included

  • HTTP protocol
  • HTTP Servers
  • Web Browser (generic HTTP client)

Excluded

  • Mobile apps (specific HTTP clients)
  • IoT (specific HTTP clients)
  • bad behavior from people in this room

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

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:

  1. Client-Server: the client and the server are independent from each others.
  2. Stateless: each HTTP request is standalone. There is no state in the connection.
  3. Usage of cache: the server provides data to let clients know if the resource can be cached.
  4. 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:

  1. The picture
  2. The owner of the picture
  3. 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)

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

Dingle 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)

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 

New Things?

Serverless

GraphQL

WebAssembly

Workshop: REST API design

Of courses it will only be related to one obscure and minor part of the syllabus.

Let's build a blog REST API

We want to build a REST api giving access to a multi-user blogging system:

  • Each article has an author
  • Each article can be commented
  • Each article has some pictures
  • each picture can be commented

Introduction to Web development

By Vladimir de Turckheim

Introduction to Web development

  • 175
Loading comments...

More from Vladimir de Turckheim