JavaScript
Chapitre 2 - Introduction au développement Web avec JavaScript

Etat de l'art des architectures web

Plan de formation

• Le Web et son évolution et l'impact de JavaScript
• Le protocole HTTP et son utilisation
• L'architecture REST

Le Web et son évolution et l'impact de JavaScript

Le Web 1.0 (1996) comptait environ 250'000 sites. C'était principalement des développeurs Web qui codait en HTML.
Le Web 2.0 (2006) comptait environ 80'000'000 sites. Le commun des mortels pouvaient développer son site Web à l'aide d'outils.

Ce qui a permis cette évolution est l'apparition de AJAX. AJAX a permis le développement d'application JavaScript qui communique avec le serveur. Avant le Web 2.0, JavaScript devait recharger la totalité de la page web à chaque fois. Avec le Web 2.0, seul une partie de la page est mise à jour.

Le protocole HTTP et son utilisation

Le modèle OSI va décrire les couches réseaux.

Le protocole HTTP est un échange entre le Navigateur Web et le serveur Web. L'échange se fait a l'aide de Request et de Response.

Pour être plus précis, le navigateur va faire une requête de type GET et le serveur va retourner le code source du HTML demandé. Cependant, il y a plus de méthode que cela.

L'architecture REST

C'est la représentation courante de l'état d'une ressource.

Installation de l'environnement de développement

Les outils nécessaires au développement JavaScript

Pour travailler sereinement, le développeur aura besoin de télécharger des outils et bibliothèques. Il doit faire attention aux dépendances.
Il aura besoin de code avec un outil approprié. Cette outil devra être amélioré afin d'améliorer sa productivité. Et il aura besoin de tester son code, simuler un environnement de production afin d'être au plus proche de la réalité.

Node package manager (npm)

• Node Package Manager est un outil intégré dans Node.js^® qui permet le téléchargement de bibliothèques et d'outils nécessaires au développement JavaScript.
• Pour information, Node.js^® est une plateforme de développement logiciel JavaScript, mais du côté serveur.

Pour installer Node.js^®, il faut se rendre sur leur site : https://nodejs.org. Une fois l'installation terminée, il faut ouvrir une console Windows et tapper la commende :

npm --version

Il existe une formation Node.js chez Alphorm : http://www.alphorm.com/tutoriel/formation-en-ligne-nodejs-les-fondamentaux

L'éditeur Atom

Pour la formation, le formateur utilise Atom qui peut être téléchargé depuis ce site : http://atom.io.
Impossible de trouver l'exécutable d'Atom. Je vais donc utiliser VS Code.

Les extensions d'Atom

Emmet

Avec l'éditeur Atom, il est nécessaire d'installer Emmet manuellement. Ce qui n'est pas nécessaire avec VS Code.

JSHint

Comme plugin, il est recommandé d'utiliser jshint. C'est un linter qui permet de détecter des erreurs de codage. Selon VS Code, ce plugin est obsolète et il est conseillé d'utiliser ESLint de Microsoft (dans un logo Orange avec des accolades).

L'exécution

browser-sync

BrowserSync est similaire à l'extension LiveServer

Exemple HelloWorld

Si l'on crée une balise script avec la fonction alert('Hello World'), cela va générer un pop-up dans le navigateur web.

alert('Hello World')

La fonction console.log quant à elle va envoyer l'information de la console de l'Inspecteur. L'inspecteur peut être ouvert dans Microsoft Edge avec le raccourci F12 ou via le clic D de la souris.

La fonction console.info est sensée faire apparaître une icône d'info dans le bord à côté du message de sortie, mais cela ne semble pas fonctionner sur mon PC, même si je passe le thème de MS Edge en claire.