Web

Async and REST

Quiz

## Question 3
 Vous souhaitez implémenter une stratégie de type Long-Polling pour communiquer avec un serveur (`www.example.com`). Parmi les programmes suivant, lequel implémente cette stratégie?
 
 - ```
 var conn = new EventStream("http://www.example.com");
 ```
 - ```
 setInterval(function () { 
 fetch("http://www.example.com")
 .then(doSomething) 
 }, 1000);
 ```
 - ```
 var conn = new WebSocket("http://www.example.com");
 ```
 - ```
 function get() {
 fetch("http://www.example.com")
 .then(() => { doSomething(); get(); })
 };
 ```

Asynchronous Programming

## Synchronous vs Asynchronous Programming

### Synchronous Programming

Things happen **sequentially**, one at a time.
                            
                            Long-running actions are **blocking**: the program stops until the action has finished.

### Asynchronous Programming

Things happen **in parallel**, multiple at the same time.
                            
                            Long-running actions are **non-blocking** : they are started in the background while the program continues to run.

When the background action has completed, two approaches:

- The program was waiting and gets the result back *(e.g. `await`)*
                            - The action was given a callback describing the next action *([Continuation-Passing Style](https://bessiambre.medium.com/continuation-passing-style-patterns-for-javascript-5528449d3070))*

## The Event Loop
 
 In JavaScript, **asynchronous actions** are put in a **message queue** which is part of the runtime environment.

The **message queue** is a list of **asynchronous actions** to be processed by the **event loop**. 
                            
                            ```js
                            // The Event Loop, pseudocode
                            while (queue.waitForMessage()) {
                              queue.processNextMessage();
                            }
                            ```

When processing messages, the **event loop** initializes a **stack** dedicated to the execution of the **asynchronous action**.
                            Upon termination, the event loop notifies the main program through a mechanism of **callbacks**.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

## Example!
 
 In browsers, `setTimeout`, `setInterval`, event listeners and HTTP requests, typically append messages to the **message queue** of the runtime.
 
 What is the output produced by the following programm?

```js
                            setTimeout(function() {
                                console.log("a")
                            }, 10);
                            
                            console.log("b");

setTimeout(function() {
                                console.log("c");
                            }, 20);

console.log("d");
                            ```
                            
                            https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

- `setTimeout` takes a callback and a delay as arguments, and executes that callback after that delay.
                            - `SetInterval` takes a callback and a delay as arguments, and executes that callback every time that delay passes.

## Callback Hell

Asynchronous programming with callbacks can result in a so-called **callback hell**.
                            
                            ```js
                            function countDown(arg, callback) {
                                console.log(arg);
                                setTimeout(callback, 1000);
                            }
                            
                            countDown("five...", function() {
                                countDown("four...", function() {
                                    countDown("three...", function() {
                                        countDown("two...", function() {
                                            countDown("one...", function() {
                                                console.log("fire!!!");
                                            });
                                        });
                                    });
                                });
                            });
                            ```

The introduction of **asynchronous programming** constructs in the JavaScript language (such as `Promise`, `async`, `await`) helps at adressing this issue.

## Promise

A `Promise` represents the eventual completion (or failure) of an **asynchronous** operation, and its resulting value.
                            In other words, a `Promise` is a proxy for a value that is not necessarily known when the promise is created.
                            
                            ```js
                            var promise = Promise.resolve("Hello, World!");
                            ```
                            
                            A `Promise` is in one of these states:
                            
                            - `pending`: initial state, neither fulfilled nor rejected.
                            - `resolved`: meaning that the operation completed successfully.
                            - `rejected`: meaning that the operation failed.
                            
                            A promise is said to be `settled` if it is either `resolve` or `rejected`.
                            
                            https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

## Promise

The constructor of a promise receives an `executor`, a function that is passed with the arguments `resolve` and `reject`.
                            `resolve` and `reject` are functions that can be used to `settle` the promise.
                            
                            ```js
                            let promise = new Promise(function(resolve, reject) {
                              setTimeout(function() {
                                if (Math.random() > 0.5) {
                                    resolve(42); 
                                } else {
                                    reject("The ultimate question to life, the universe and everything has no answer!")
                                } 
                              }, 1000);
                            });
                            ```
                            
                            https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

## `Promise.all(iterable)`

This method returns a single Promise that resolves when all of the promises in the iterable have resolved, or rejects with the reason of the first promise that rejects.
                        
                            ```js
                            const promise1 = Promise.resolve(3);
                            const promise2 = 42;
                            const promise3 = new Promise((resolve, reject) => {
                              setTimeout(resolve, 100, 'foo');
                            });

Promise.all([promise1, promise2, promise3]).then(values => {
                              console.log(values);  // Output: [3, 42, "foo"]
                            }).catch(error => {
                              console.error("Error:", error);
                            });
                            ```

```js
                            const promise1 = Promise.resolve(3);
                            const promise2 = 42;
                            const promise3 = new Promise((_, reject) => {
                              setTimeout(() => reject("foo"), 100);
                            });

Promise.all([promise1, promise2, promise3])
                              .then((values) => {
                                console.log(values);
                              })
                              .catch((error) => {
                                console.error("Error:", error); // Output: Error: 3
                              });
                            ```

## `Promise.allSettled(iterable)`

This method returns a promise that resolves after all of the given promises have either resolved or rejected, with an array of objects that each describe the outcome of each promise.
                        
                            ```js
                            const promise1 = Promise.resolve(3);
                            const promise2 = 42;
                            const promise3 = new Promise((resolve, reject) => {
                              setTimeout(resolve, 100, 'foo');
                            });

Promise.allSettled([promise1, promise2, promise3]).then(values => {
                              console.log(values);  // Output: [{status: "fulfilled", value: 3},
                              // {status: "fulfilled", value: 42}, {status: "fulfilled", value: "foo"}]
                            });
                            ```

```js
                            const promise1 = Promise.reject(3);
                            const promise2 = 42;
                            const promise3 = new Promise((resolve, reject) => {
                              setTimeout(reject, 100, 'foo');
                            });

Promise.allSettled([promise1, promise2, promise3]).then(values => {
                              console.log(values);  // Output: [{status: "rejected", reason: 3},
                              // {status: "fulfilled", value: 42}, {status: "rejected", reason: "foo"}]
                            });
                            ```

## `Promise.race(iterable)`

This method returns a promise that resolves or rejects as soon as one of the promises in the iterable resolves or rejects, with the value or reason from that promise.
                        
                            ```js
                            const promise1 = new Promise((resolve, reject) => {
                              setTimeout(resolve, 500, 'one');
                            });
                            const promise2 = new Promise((resolve, reject) => {
                              setTimeout(reject, 100, 'two');
                            });

Promise.race([promise1, promise2]).then(value => {
                              console.log(value);
                            }).catch(error => {
                              console.log(error);  // "two" - because the second promise rejects faster
                            });
                            ```

## `Promise.any(iterable)`

This method returns a promise that resolves as soon as one of the promises in the iterable resolves, with the value of the first promise that resolves.
                        
                            ```js
                            const promise1 = new Promise((resolve, reject) => {
                              setTimeout(resolve, 500, "one");
                            });
                            const promise2 = new Promise((resolve, reject) => {
                              setTimeout(reject, 100, "two");
                            });

Promise.any([promise1, promise2])
                              .then((value) => {
                                console.log(value); // "two" - because the second promise resolves faster
                              })
                              .catch((error) => {
                                console.log(error);
                              });
                            ```

## Asynchronous functions and waiting

#### **Waiting for settlement**
                            
                            The `await` keyword, followed by a promise, blocks until it is settled, and then evaluates to the resolution value of the promise. If the promise was rejected, an error is thrown.

#### Asynchronous functions

Only **asynchronous functions** are allowed to `await` a promise. They are defined with the `async` keyword.

```js
                            function deepThought() {
                                return new Promise(function(resolve, reject) {
                                    setTimeout(function() {
                                        if (Math.random() > 0.5) resolve(42); 
                                        else reject("The ultimate question to life, the universe and everything has no answer!");
                                    }, 1000);
                                });
                            }
                            
                            async function asyncFunction() {
                                return await deepThought();
                            }

let promise = asyncFunction();
                            ```
                            
                            Asynchronous functions **implicitly** return a promise if their body does not.
                            
                            https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

## await vs then

```js
                            function fetchDataWithPromise() {
                              fetch("https://jsonplaceholder.typicode.com/posts/1")
                                .then((response) => response.json()) // Convert the response to JSON
                                .then((data) => {
                                  console.log("Data received using Promises:", data);
                                })
                                .catch((error) => {
                                  console.error("Error fetching data:", error);
                                });
                            }

fetchDataWithPromise();
                            ```

```
                            async function fetchDataWithAsyncAwait() {
                                try {
                                    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); 
                                    const data = await response.json();  // Convert the response to JSON
                                    console.log('Data received using async/await:', data);
                                } catch (error) {
                                    console.error('Error fetching data:', error);
                                }
                            }

fetchDataWithAsyncAwait();
                            ```

Promise Exercices

## Promise countdown
 
 Réécrire le code donné pour que `doInOneSecond` ne prenne plus qu'un argument, et retourne une Promise.
 
 ```js
 function doInOneSecond(arg, callback) {
 console.log(arg);
 setTimeout(callback, 500);
 }

doInOneSecond("five...", function() {
                                doInOneSecond("four...", function() {
                                    doInOneSecond("three...", function() {
                                        doInOneSecond("two...", function() {
                                            doInOneSecond("one...", function() {
                                                console.log("fire!!!");
                                            });
                                        });
                                    });
                                });
                            });
                            ```

```js
                            function wait(arg = 500) {
                              return new Promise((resolve) => {
                                setTimeout(resolve, arg);
                              });
                            }

new Promise((resolve) => {
                              console.log("five...");
                              resolve();
                            })
                              .then(() => wait(1000))
                              .then(() => console.log("four..."))
                              .then(wait)
                              .then(() => console.log("three..."))
                              .then(() => wait(1000))
                              .then(() => console.log("two..."))
                              .then(wait)
                              .then(() => console.log("one..."))
                              .then(() => wait(1000))
                              .then(LiftOff)
                              .then(
                                () => console.log("fire!!!"),
                                () => console.log("explosion!!!")
                              );
                            ```

## Promisify
 
 Écrivez une fonction `promisify` qui

- prend en unique argument une fonction de type CPS (c'est à dire une fonction qui prend comme dernier argument un callback à éxecuter quand elle a fini),
                                - cette fonction prend elle-même deux argument, le premier est l'argument sur lequel elle travaille, et le second est la "continuation", le callback qu'elle execute quand elle a fini
                            - retourne une fonction qui offre la même fonctionnalité que la fonction CPS passée en argument, mais
                                - prend un unique argument correspondant à l'argument sur lequel la fonction CPS travaillera, et
                                - retourne une Promise sur laquelle on pourra appeler then pour spécifier la continuation (quoi faire quand elle aura terminé).
                        
                            ```js
                            function countDown(arg, callback) {
                                console.log(arg);
                                setTimeout(callback, 1000);
                            }

let promisified = promisify(countDown)

promisified("three...")
                                .then(promisified("two..."))
                                .then(promisified("one!"))
                            ```

## Promisify : Solution
 
 Écrivez une fonction `promisify` qui

- prend en unique argument une fonction de type CPS (c'est à dire une fonction qui prend comme dernier argument un callback à éxecuter quand elle a fini),
                                - cette fonction prend elle-même deux argument, le premier est l'argument sur lequel elle travaille, et le second est la "continuation", le callback qu'elle execute quand elle a fini
                            - retourne une fonction qui offre la même fonctionnalité que la fonction CPS passée en argument, mais
                                - prend un unique argument correspondant à l'argument sur lequel la fonction CPS travaillera, et
                                - retourne une Promise sur laquelle on pourra appeler then pour spécifier la continuation (quoi faire quand elle aura terminé).
                        
                            
                            ```js
                            function promisify(cpsFunction) {
                                return function(arg) {
                                    return new Promise((resolve) => {
                                        cpsFunction(arg, resolve)
                                    })
                                }
                            }
                            ```

## Promise for default page loading
 
 Implémenter la fonction `getResourceOr404`, qui a pour but de charger une ressource donnée, ou bien `404.html` si celle-ci n'est pas trouvée.

Cette fonction prend en argument:

- une fonction `load`, prenant en argument le nom d'une resource à charger, et retournant une Promise, qui
                                - réussit si la ressource a été trouvée et retourne alors cette resource ;
                                - échoue avec "Ressource Not Found" si la ressource n'a pas été trouvée ou avec autre chose si par exemple son nom était invalide.
                            - le nom d'une ressource `resourceName`.

`getResourceOr404` doit retourner une Promise qui

- réussit avec la ressource si celle-ci a été trouvée,
                            - réussit avec la ressource `404.html` si la ressource demandée n'a pas été trouvée,
                            - échoue si la ressource demandée n'a pas pu être chargée pour une autre raison (par exemple format invalide),
                            - échoue si la ressource n'a pas été trouvée, et que `404.html` n'arrive pas à charger pour n'importe quelle raison.

La suite sur la page suivante...

## Promise for default page loading (continued)
 
 Nous vous demandons aussi d'utiliser `logResourceFound`, `logResourceNotFound` et `logResourceFailed` pour logger les différents événements.
 
 ```js
 const notFoundResourceName = "404.html"
 const notFoundError = "Resource Not Found"

function logResourceFound(resourceName) {
                                console.log(`[LOG] Resource "${resourceName}" found!`)
                            }

function logResourceNotFound(resourceName, error) {
                                console.log(`[LOG] Resource "${resourceName}" not found: "${error}"`)
                            }

function logResourceFailed(resourceName, error) {
                                console.log(`[LOG] Resource "${resourceName}" failed to load: "${error}"`)
                            }

async function getResourceOr404(load, resourceName) {
                                return // TODO
                            }
                            ```

## Promise for default page loading (solution)
 
 ```js
 const notFoundResourceName = "404.html"
 const notFoundError = "Resource Not Found"

function logResourceFound(resourceName) {
                                console.log(`[LOG] Resource "${resourceName}" found!`)
                            }

function logResourceNotFound(resourceName, error) {
                                console.log(`[LOG] Resource "${resourceName}" not found: "${error}"`)
                            }

function logResourceFailed(resourceName, error) {
                                console.log(`[LOG] Resource "${resourceName}" failed to load: "${error}"`)
                            }

async function getResourceOr404(load, resourceName) {
                                return load(resourceName)
                                    .then((result) => {
                                        logResourceFound(resourceName)
                                        return result
                                    }, (error) => {
                                        if (error === notFoundError) {
                                            logResourceNotFound(resourceName, error)
                                            return load(notFoundResourceName)
                                        } else {
                                            logResourceFailed(resourceName, error)
                                            return Promise.reject(error)
                                        }
                                    })
                            }
                            ```

Asynchronous Network Programming

## XMLHTTPRequest
 
 `XMLHTTPRequest` is used to interact with servers without having to do a full page refresh.

It loads content **asynchronously** using callbacks.

```js
 var url = 'https://api.github.com/users/web-classroom';
 var request = new XMLHttpRequest();
 request.open('GET', url);
 request.responseType = 'json';
 request.onload = function() {
 console.log(request.getAllResponseHeaders());
 console.log(request.status); // The HTTP status code
 console.log(request.response); // The response body
 }
 request.onerror = // ...
 requset.ontimeout = // ...
 request.onprogress = // ...
 request.send();
 ```
 
 Can be used to load JSON and other formats, and not only XML, despite its name.
 
 https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON

## Fetch API

The Fetch API provides an interface for fetching resources across the network. It provides a more powerful and flexible feature set than `XMLHttpRequest`.

By default, `fetch` performs GET requests and returns a `Promise`.

```js
                            var promise = fetch('https://api.github.com/users/web-classroom');
                            console.log(promise);
                            ```

Additional parameters enables to change the method (HEAD, POST, PUT, etc.) and add headers.

```js
                            var promise = fetch("https://api.github.com/users/web-classroom", {
                                method: `POST`,
                                headers: {'Content-Type': 'application/json'},
                                body: JSON.stringify({'value': 'Hello, World!' })
                            });
                            console.log(promise);
                            ```

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

## NodeJS HTTP client

NodeJS provides an HTTP client that relies on a callback mechanism.

```js
                            const https = require('https');

req.end()
                            ```

[Axios](https://github.com/axios/axios) provides a uniform promise based HTTP client for the browser and the server.

Representational state transfer (REST)

## Uniform Interface

In the following example, identify the architectural constrains of the uniform interface.
                            
                            ```http
                            GET https://api.github.com/users/royfielding
                            ```
                            
                            ```http
                            HTTP/1.1 200 OK
                            Content-Type: application/json; charset=utf-8
                            {
                              "name": "Roy T. Fielding",
                              "company": "Adobe",
                              "blog": "http://roy.gbiv.com/",
                              "location": "Tustin, California",
                              "login": "royfielding",
                              "id": 1724757,
                              ...
                              "following_url": "https://api.github.com/users/royfielding/following{/other_user}",
                              "gists_url": "https://api.github.com/users/royfielding/gists{/gist_id}",
                              "starred_url": "https://api.github.com/users/royfielding/starred{/owner}{/repo}",
                            }
                            ```

## Uniform Interface
 
 ```http
 GET https://api.github.com/users/royfielding
 ```
 
 ```http
 HTTP/1.1 200 OK
 Content-Type: application/json; charset=utf-8
 {
 "name": "Roy T. Fielding",
 "company": "Adobe",
 "blog": "http://roy.gbiv.com/",
 "location": "Tustin, California",
 "login": "royfielding",
 "id": 1724757,
 ...
 "following_url": "https://api.github.com/users/royfielding/following{/other_user}",
 "gists_url": "https://api.github.com/users/royfielding/gists{/gist_id}",
 "starred_url": "https://api.github.com/users/royfielding/starred{/owner}{/repo}",
 }
 ```

- `GET` to describe the kind of resource manipulation.
                            - URLs to identify resources.
                            - `Content-Type` to make the resource self-descriptive.
                            - `following_url`, `gists_url`, `starred_url` to provide hypermedia links.

## Stateless Constraint

All communication must be **stateless**.

Client requests should contain all necessary information to be understood by the server. They should rely on no context stored on the server.

This constraint induces the properties of:
                            
                            - **Visibility**: Monitoring only needs a single request to understand the full nature of the request.
                            
                            - **Reliability**: Partial failure recovery is easier.
                            
                            - **Scalability**: Simplifies the freeing of resources between requests, and simplifies implementation.
                            
                            Consequently, **Session state** in a RESTful architecture is kept entirely on the **client**.
                            
                            https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm

## Designing HTTP APIs

REST specifies architectural principles for designing HTTP APIs. These principles are easy to break and not always necessary to follow.
                            
                            Sources of inspiration include popular APIs such as the one provided by Github, Facebook, Amazon, Twitter or Google. These APIs are not RESTful but they are well designed.
                            
                            Instead of exposing everything (CRUD like API), it is a good idea to start by defining the requirements of the API and the abstractions exposed to the users.
                            
                            On this basis, you can:
                            - Define the different types of resources (self-descriptive messages)
                            - Define a good structure for your endpoints (resource identification)
                            - Define the actions on the resources (resource manipulation)
                            - Implement the API (easiest part)
                            - Maintain a good design and a good documentation (**hardest part**)

Cookies and Sessions

## Cookie Attributes

A cookies without `Expires` is called a session cookie, i.e., it is deleted when the client shuts down.

**Expires** and **Max-Age**: expiration date for the cookie. If omitted, it is called a *session cookie* and expires with the current session (browser-dependent).
                            
                            ```http
                            Set-Cookie: cookie=choco; Expires=Wed, 21 Oct 2020 07:28:00 GMT;
                            ```
                            
                            **HttpOnly**: the cookie should not be accessible to JavaScript.
                            ```http
                            Set-Cookie: cookie=choco; HttpOnly
                            ```

**Secure**: the cookie should only be transmitted over HTTPS.
                            ```http
                            Set-Cookie: cookie=choco; Secure
                            ```

**SameSite**: whether the cookie should be sent with cross-site requests.
                            ```http
                            Set-Cookie: cookie=choco; SameSite=[Strict|Lax|None]
                            ```

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Authentication and Authorization

## Authorization Mechanisms

In Web applications, authorization mechanisms often rely on the notions of:
                            - Roles (admin, editor, user)
                            - Ownership (does this resource, object or attribute belong to that user)

In practice, authorization mechanisms are often hard-coded, which gives a lot of flexibility.
                            However, it is also possible to rely on authorisation patterns, such as:

- [Access-Control List (ACL)](https://en.wikipedia.org/wiki/Access-control_list)
                            - [Role-based access control (RBAC)](https://en.wikipedia.org/wiki/Role-based_access_control)
                            - [Attribute-based access control (ABAC)](https://en.wikipedia.org/wiki/Attribute-based_access_control)

In ExpressJS, the [express-acl](https://www.npmjs.com/package/express-acl) and [express-rbac](https://www.npmjs.com/package/express-rbac) packages provides authorization middlewares.

Web