Tutoriel pour apprendre la programmation en JavaScript


précédentsommairesuivant

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 :

  • Angular (en JavaScript ou TypeScript), développé par Google ;
  • React, développé par Facebook.

(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.


précédentsommairesuivant

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2015 Adrien Joly. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.