Le langage de programmation principal du frontend moderne est le JavaScript. Il nécessite que le navigateur du client possède un moteur JavaScript capable d'exécuter le code. De nos jours, les principaux navigateurs ont tous un moteur JavaScript.
Le code JavaScript inclus dans les sites web permet d'enrichir l'expérience utilisateur, afin qu'il puisse interagir et en réponse voir le DOM être modifié. Le DOM est le Document Object Model et contrôle la structure, le style et le contenu de la page.
L'organisation ECMA est responsable de la standardisation du langage de programmation, et permet l'ajout de nouvelles features environ chaque année.
En développement web, le rendering est le processus qui permet de transformer le code d'une page en une page visuelle et interactive. Il existe deux manières de procéder.
Un mot sur les sites statique et dynamique; un site est dit statique si tous les clients reçoivent un contenu identique, sans aucune personnalisation. Un site dynamique retourne des pages aux contenus différents pour ses utilisateurs, car une logique est appliquée aux pages avec, par exemple, des transformations des données du contenu qui sont personnalisées selon les utilisateurs.
Le fonctionnement: le client veut visiter un site et fait la requête à son web server, puis le web server retourne le code du site dynamique entièrement généré au client. Lorsque le client clique sur un lien sur la page, il effectue une nouvelle requête et le serveur renvoie une nouvelle page entière au client.
Le fonctionnement: le client veut visiter un site et fait la requête à son web server, puis le web server retourne le code du site non-généré, non-enrichi et en JavaScript au client, qui va render la page et l'enrichir dans son navigateur.
Le site client-side rendered peut lui-même requêter du nouveau contenu de manière continue, par exemple suite aux intéractions de l'utilisateur avec la page, et ce sans qu'il y ait besoin de rafraîchir la page toute entière.
Les frameworks permettent d'améliorer l'expérience utilisateur, mais aussi développeur, en fournissant des implémentations afin de gérer l'interactivité dans les sites.
Les frameworks sont en JavaScript et les plus utilisés actuellement pour de nouveaux projets sont VueJS et ReactJS. Ils proposent des outils de développement facilitant de nombreuses tâches, comme par exemple le rafraîchissement automatique du site en cours de développement à chaque sauvegarde de code (hot reload). La popularité de ces frameworks fait que leur communauté est active et la plupart des questions ou problèmes que l'on rencontre ont déjà trouvé réponse.
Les plus utilisés sont Laravel en PHP, Ruby on Rails, et Django et Flask en Python. Ils utilisent des moteurs de templating pour pouvoir injecter de la logique de leur langage dans le contenu de la page HTML. L'intégration puissante du frontend et du backend présente un risque de couplage ou dépendance entre les deux parties. De nos jours, c'est une pratique déconseillée, on préfère exposer le backend sous forme d'APIs et consommer ces APIs depuis le frontend afin de découpler les deux parties.
L'exécution synchrone d'une requête API bloque le code en attendant que l'API retourne le résultat de la requête.
L'exécution asynchrone d'une requête API ne bloque pas le code suivant. Une fois la réponse retournée, une fonction de callback que l'on a définie auparavant est exécutée.
En JavaScript, l'implémentation se fait avec le type Promise qui représente l'éventuelle complétion d'une opération asynchrone et sa valeur.
Une Promise a 3 états possibles: pending, fulfilled et rejected. Lorsque l'on définit soi-même une Promise, il faut préciser en cas de succès le resolve(), et en cas d'échec le reject().
Au moment d'appeler la fonction asynchrone, la syntaxe est d'appeler la Promise, puis then est la méthode qui retourne la Promise, et on lui spécifie comme argument la fonction de callback, qui sera exécutée en cas de succès. catch va de la même manière exécuter sa fonction de callback passée en argument en cas d'échec.
Voici un exemple de définition:
const done = true
const isItDoneYet = new Promise((resolve, reject) => {
if (done) {
const workDone = 'Here is the thing I built'
resolve(workDone)
} else {
const why = 'Still working on something else'
reject(why)
}
})
const checkIfItsDone = () => {
isItDoneYet
.then(ok => {
console.log(ok)
})
.catch(err => {
console.error(err)
})
}
checkIfItsDone()
Documentation:
Le site de Mozilla offre une documentation référence de la syntax de JavaScript. Il est recommandé de consulter les pages suivantes:
Implémentations principales:
- variables const et let
- fonction: on note qu'en JS, les arrow fonctions sont souvent utilisées comme versions courtes des fonctions traditionnelles, comme par exemple
() => {} - if/else
- array
- map
- object
- méthodes d'array: map, reduce, filter, forEach
- callback/closure
- undefined
Le site de NodeJS offre documentation de concepts tels que le fonctionnement de l'event loop, les promesses, et également une introduction au package manager par défaut de NodeJS npm. L'installation des packages se fait avec npm install package_name.
yarn est également un package manager connu créé par Facebook et qui peut être installé de cette manière. L'installation des packages se fait avec yarn add package_name.
NodeJS est utilisé pour développer en JavaScript sur son poste local. On peut installer un environnement NodeJS en utilisant Docker:
docker pull node:alpine- Depuis le terminal, naviguer dans le répertoire de travail
docker run -it --name node_dev -v $PWD:/app -w /app -p 3000:3000 -p 8080:8080 node:alpine /bin/sh
Il est aussi possible aussi d'utiliser un Dockerfile:
FROM node:alpine
WORKDIR /app
COPY . .
ENTRYPOINT ["/bin/sh"]
L'API fetch n'est pas incluse par défaut et il faut l'installer:
npm install node-fetch
Il faut créer un fichier .js avec le code suivant (source):
const fetch = require('node-fetch')
fetch('http://example.com/movies.json')
.then(response => response.json())
.then(data => console.log(data));
Puis exécuter le code:
node fichier.js
Les modules Python flask et requests doivent être installés avec pip ou pipenv. requests permet de faire les requêtes API.
Concernant le déploiement en production, la pratique est de placer un WSGI devant le serveur du framework Python. WSGI signifie Web Server Gateway Interface et a été introduit parce que dans le passé, les web servers ne pouvaient pas communiquer avec les serveurs Python, car ils ne comprenaient et ne pouvaient pas interpréter le langage. WSGI est uniquement capable de gérer des requêtes synchrones.
Quelques WSGI fréquemment utilisés: Gunicorn, uWSGI, Waitress, Bjoern.
ASGI - Asynchronous Server Gateway Interface - est un standard plus récent proposant une interface à la fois asynchrone et synchrone. Par exemple, une implémentation est Uvicorn.
Les frameworks VueJS et ReactJS existent sous la forme de packages npm que l'on installe dans son environnement de développement.
- Lien pour installer VueJS, puis lien pour créer le projet (on choisira les options proposées par défaut).
- Lien pour installer ReactJS et le projet
La création du projet génère répertoire du projet un fichier package.json. Il contient des metadatas sur le projet mais surtout des 'scripts', une liste de raccourcis pour lancer les commandes comme le lancement du site et le build du site pour la production.
Exemple pour Vue:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
La commande yarn serve lance le site en mode dev. Le port par défaut est 8080.
Exemple pour React:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
La commande yarn start lance le site en mode dev. Le port par défaut est 3000.
Il est maintenant possible de modifier le code Vue ou React, puis de sauvegarder afin que le serveur de développement update la page avec les changements.