XVI. Single Page Apps avec Augular et React▲
XVI-A. Front-end VS back-end▲
Une application Web moderne consiste en :
- un client / front-end : programme exécuté par le navigateur de chaque utilisateur ;
- un « serveur web » / back-end : programme exécuté sur une machine appelée « serveur », qui a pour mission de répondre aux requêtes des « clients » (et donc de chaque utilisateur).
Comme nous l'avons vu, un client « web » est généralement constitué de fichiers HTML, CSS et JavaScript ayant accès à l'API du DOM fournie par le navigateur. À moins qu'il utilise des moyens de persister ses données (ex. : à l'aide de cookies, LocalStorage, ou requêtes AJAX vers un serveur), son « état » (c.-à-d. toutes les données de l'utilisateur saisies dans la page, et valeurs des variables) est réinitialisé à chaque rafraichissement de la page.
Un « serveur web » est rattaché à une adresse IP (ex. : 127.0.0.1, ou nom de domaine) et un port (ex. : 80) et permet de réagir et répondre à des requêtes HTTP envoyées par des « clients » à différents chemins (ex. : /posts) et avec différentes méthodes (ex. : GET, POST, etc.). Un « serveur web » peut être implémenté en nombreux langages : PHP, Java, ASP, etc. Node.js peut être utilisé pour exécuter un serveur web implémenté en JavaScript.
Il est relativement facile et rapide de développer un client web simple : il suffit d'une page HTML associée à un fichier JavaScript.
Par contre, dès qu'une application web contient plusieurs écrans et/ou modes (ex. : utilisateur connecté ou pas), elle devient vite complexe à écrire et maintenir.
XVI-B. Frameworks et bibliothèques front-end▲
Pour mieux structurer le code et le fonctionnement d'applications web riches, nombreux frameworks et bibliothèques (libraries) ont été développés. Ils sont généralement inspirés du principe d'architecture MVC (Modèle-Vue-Controlleur, cf. définition sur Wikipédia).
Notamment, pour aider au développement de clients web, les technologies suivantes sont actuellement très en vogue :
(Il en existe nombreuses autres : Polymer, Ember.js, Vue.js…)
Suivez les guides liés à ces deux technologies pour comprendre leur fonctionnement par la pratique.
XVI-C. Solutions hybrides▲
Il existe aussi des bibliothèques et frameworks permettant de faciliter le lien entre front-end et back-end :
- Firebase permet de créer une base de données sur Internet, et d'y accéder directement depuis un client web, et se présente donc comme un substitut simple à un serveur web / back-end. Solution valable quand le plus gros de son application s'exécute dans le navigateur (consulter slides et vidéos de mon cours de l'an dernier et/ou guide officiel) ;
- basé sur Node.js et MongoDB, Meteor permet de créer des applications web JavaScript isomorphiques. C'est-à-dire que des parties du code peuvent s'exécuter à la fois côté serveur et/ou côté client (dans le navigateur). Un de ses gros avantages est de permettre l'intégration de composants gérant à la fois la partie « client » et la partie « serveur », ex. : bouton d'identification d'utilisateur avec stockage automatique dans la base de données de l'application.
Ces deux solutions sont très pratiques pour réaliser des prototypes de manière rapide / efficace.