React JS & Node
JS
Dr. IMANE CHLIOUI [email protected]
15/01/2023
IMANE CHLIOUI
Généralités sur le web
15/01/2023
IMANE CHLIOUI
Internet VS Web
l'internet est le réseau, le support physique de l'information. Pour faire
simple, c'est un ensemble de machines, de câbles et d'éléments réseau en tout
genre éparpillés sur la surface du globe ;
le web constitue une partie seulement du contenu accessible sur l'internet. Vous
connaissez et utilisez d'autres contenus, comme le courrier électronique ou
encore la messagerie instantanée
15/01/2023
IMANE CHLIOUI
Définitions
Site web: ensemble de fichiers qui sont hébergés sur un serveur, consultés par un
navigateur Internet et mis en forme par un moteur de rendu.
Ces fichiers peuvent être des simples pages HTML (extension .htm ou .html)
ou des fichiers exécutables qui seront interprétés par le moteur de rendu.
Un serveur: c’est un (ou plusieurs) ordinateur (logiciel) puissant qui héberge des
applications et auquel on peut se connecter via une adresse Internet
Dépôt central où l'information et les programmes informatiques sont conservés
et accessibles par le programmeur dans le réseau.
15/01/2023
IMANE CHLIOUI
Client-Serveur
Lorsqu'un utilisateur consulte un site,
ce qui se passe derrière les rideaux est
un simple échange entre un client et un
serveur :
•le client : dans la plupart des cas, c'est
le navigateur installé sur votre
ordinateur.
•le serveur : c'est la machine sur laquelle
le site est hébergé, où les fichiers sont
stockés et les pages web générées
15/01/2023
IMANE CHLIOUI
Client-Serveur
Caractéristiques du client
Initie le dialogue via une requête Attend et reçoit des réponses Interagit avec l'utilisateur (IHM)
Caractéristiques du serveur
N'initie jamais de dialogue ou d'activité (il écoute), Attend et répond aux requêtes des clients
Gère quels sont les clients autorisés à se connecter
Par exemple : Le serveur Web attend les demandes des navigateurs Internet et dès qu'il reçoit une demande à
partir d'un navigateur, il récupère une page HTML demandée et la renvoie à ce navigateur.
Notez que le client doit connaître l'existence et l'adresse du serveur, mais que le serveur n'a pas besoin de
connaître l'adresse ou même l'existence du client avant que la connexion ne soit établie. Une fois la
connexion établie, les deux parties peuvent envoyer et recevoir des informations.
15/01/2023
IMANE CHLIOUI
HTTP
« Hypertext Transfer Protocol » est un
protocole de communication client-serveur
développé pour le World Wide Web.
HTTP est la langue dans laquelle votre navigateur
Web parle au serveur Web afin de lui
communiquer ce qui est demandé.
15/01/2023
IMANE CHLIOUI
HTTP Vs HTML Vs
URL
HTML (Hypertext Markup Language) définit
comment un site Internet est construit,
le HTTP détermine comment la page est
transmise du serveur au client.
l’URL (Uniform Resource Locator), fixe la façon
dont une ressource (par exemple un site Internet)
doit être adressée sur le Web.
15/01/2023
IMANE CHLIOUI
HTTP
15/01/2023
IMANE CHLIOUI
HTTP:
Comment ça
marche
La communication qui s'effectue
entre le client et le serveur est
régie par des règles bien définies
selon le protocole HTTP.
1. l'utilisateur saisit une URL dans
la barre d'adresses de son
navigateur ;
2. le navigateur envoie alors une
requête HTTP au serveur pour lui
demander la page correspondante ;
15/01/2023
IMANE CHLIOUI
HTTP: Comment ça marche
3. le serveur reçoit cette requête, l'interprète et génère alors une page web qu'il va
renvoyer au client par le biais d'une réponse HTTP ;
4. le navigateur reçoit, via cette réponse, la page web finale, qu'il affiche alors à
l'utilisateur
15/01/2023
IMANE CHLIOUI
HTTP
Le protocole HTTP est un protocole Stateless, ce qui signifie que le serveur n'est pas tenu de
stocker les informations de session, et que chaque requête est indépendante de l'autre
Cela signifie que :
Toutes les demandes proviennent du client ( votre navigateur )
Le serveur répond à une demande.
Les requêtes (commandes) et les réponses sont en texte lisible.
Les demandes sont indépendantes les unes des autres et le serveur n'a pas besoin
de suivre les demandes
15/01/2023
IMANE CHLIOUI
URL: Uniform Resource Locator
https://www.emsi.ma/nos-campus/
Protocole Hôte Ressource
15/01/2023
IMANE CHLIOUI
URL : Hôte
https://www.emsi.ma/nos-campus/
Hôte
• Prend la forme d’un nom de domaine: identifiant unique d’un serveur
(google.com..)
• Mapping de l’adresse IP du serveur par un serveur DNS.
15/01/2023
IMANE CHLIOUI
URL: Uniform Resource Locator
https://www.emsi.ma/nos-campus/
Ressource
• Plusieurs manières
• La manière classique c’est pointer sur le nœud de la ressource dans l’arborescence
du serveur par un ‘/’
15/01/2023
IMANE CHLIOUI
HTTP: Théorie
https://www.emsi.ma/nos-
campus/
15/01/2023
IMANE CHLIOUI
Sites Web Statiques
Le client web fait une demande Le serveur répond en localisant
pour la ressource (par exemple le fichier sur son disque dur =>
une page web), en envoyant une Site web statique avec une
requête HTTP formatée sur extension de fichier
Internet au serveur. typiquement .htm ou.htm
le serveur web répond en
renvoyant ce contenu au client
(qui peut être un navigateur web
sur un ordinateur personnel),qui
l’affiche visuellement la page
web
15/01/2023
IMANE CHLIOUI
Dynamic Web pages
Le client web fait la requête formatée HTTP
Le serveur web parle au serveur d'application
Le serveur d'application communique avec la base de
données et les autres ressources réseau.
Ensuite, c'est au serveur web de construire une
réponse au format HTML, qui est renvoyée au client
web.
15/01/2023
IMANE CHLIOUI
Dynamic Web pages
L'important ici, c'est que le
navigateur Web ne sait pas qu'il y
a un serveur d'application au
travail et n'a donc pas besoin d'un
logiciel supplémentaire.
Il ne connaît pas la
différence entre une page
Il demande une page qui est statique et fixe sur
HTML et il reçoit une le disque du serveur, et
page HTML une qui est générée
dynamiquement en
réponse à cette demande.
15/01/2023
IMANE CHLIOUI
Serveur Web
Logiciel qui permet de visualiser un site Web via HTTP.
Le serveur web est un logiciel qui permet de demander des ressources (pages web,
images, etc.) via le protocole HTTP.
Accepte et répond aux demandes des clients pour du contenu statique (pages HTML,
fichiers, images et vidéos) provenant d'un site Web.
Les serveurs Web traitent uniquement les requêtes et les réponses HTTP.
Exemples: Internet Information Server, Apache
15/01/2023
IMANE CHLIOUI
Application server
Un serveur d'application est un Framework qui fournit les moyens de créer des applications Web et
un environnement serveur pour les exécuter.
Les clients d'un serveur d'application sont souvent eux-mêmes des applications et peuvent inclure
des serveurs Web et d'autres serveurs d'application.
La tâche fondamentale d'un serveur d'applications est de fournir à ses clients l'accès à ce qu'on
appelle communément la logique métier (Buisness Logic), qui génère du contenu dynamique,
c'est-à-dire un code qui transforme les données pour fournir la fonctionnalité spécialisée offerte par
une entreprise, un service ou une application.
Example: Glassfish, JBoss, Apache Tomcat, ASP.NET
15/01/2023
IMANE CHLIOUI
Web Server Application Server
Fournit un contenu statique. Fournit un contenu dynamique.
Le contenu est fourni en Fournit une logique métier aux
utilisant uniquement le programmes applicatifs
protocole HTTP. utilisant plusieurs protocoles (y
compris HTTP).
Sert uniquement les Peut servir des applications
Web Server vs
applications Web. Web et Entreprise-based
application.
Application
Aucun support pour le multi- Utilise le multi-threading pour
server
threading. prendre en charge plusieurs
requêtes en parallèle
Facilite le trafic Web qui Facilite l'exécution à plus long
n'exige pas beaucoup de terme de processus ressources-
ressources. intensive
15/01/2023
IMANE CHLIOUI
Web Server
vs
Application
server
15/01/2023
IMANE CHLIOUI
Introduction
15/01/2023
IMANE CHLIOUI
INTRODUCTION
L’interface utilisateur ou UI est tout ce qu’un utilisateur utilise pour interagir avec un site Web.
React se concentre principalement sur la construction de la couche de visualisation.
Il dispose d’un écosystème robuste et est remarquablement flexible.
Le framework React est le choix idéal lorsque vous souhaitez développer des applications à
page unique (SPA), car il peut réécrire et mettre à jour le contenu d’une page Web sans qu’il soit
nécessaire de recharger ou de rafraîchir la page.
ReactJS ou encore React.js est un outil gratuit et open source. Plus précisément, il s’agit d’une
bibliothèque JavaScript front-end utilisée surtout pour créer des interfaces utilisateurs.
15/01/2023
IMANE CHLIOUI
POURQUOI REACT JS
Flux de travail de
développement
mature et simple à
comprendre
Flexibilité et
Syntaxe JSX pour
compatibilité
un HTML étendu
ultimes.
Haute
Réutilisation sans
performance
problème des
renforcée par le
composants
DOM virtuel
15/01/2023
IMANE CHLIOUI
ARCHITECTURE DE REACT
React n’a pas de modèle d’architecture prédéfini. C’est tout simplement une vue dédiée à
l’interface utilisateur.
un élément de React est la plus petite unité structurelle centrale
L’ensemble des données nécessaires pour faire fonctionner une application est appelé un état.
Il n’y a que l’état des données qui peut déterminer ce qui s’affiche sur l’interface utilisateur
d’une application.
L’état local est un mécanisme que React propose et qui est prêt à être utilisé.
15/01/2023
IMANE CHLIOUI
Bibliothèque React
Elle est déclarative : vous écrivez le code que vous souhaitez et React prend ce code déclaré et
effectue toutes les étapes JavaScript/DOM pour obtenir le résultat souhaité.
Elle est basée sur les composants : les applications sont créées avec des modules de code
indépendants préfabriqués et réutilisables qui gèrent leur propre état et peuvent être collés ensemble à
l’aide du framework React, ce qui permet de transmettre des données à votre application tout en
conservant l’état hors du DOM.
La devise React est « apprendre une seule fois, écrire partout ». L’objectif est de réutiliser le code et de
rendre les composants réutilisables sans qu’il soit nécessaire de réécrire le code existant, et non de
faire d’hypothèses sur la façon dont vous allez utiliser l’interface utilisateur de React avec d’autres
technologies.
15/01/2023
IMANE CHLIOUI
Bibliothèque react
JSX est une extension de syntaxe pour JavaScript destinée à être utilisée avec React qui ressemble à
HTML, mais est en fait un fichier JavaScript qui doit être compilé ou converti en code JavaScript normal.
Vues : représentent ce qui s’affiche dans le navigateur de l’utilisateur. Dans React, une vue est liée au
concept d’affichage des éléments que vous souhaitez qu’un utilisateur voit sur son écran.
État : fait référence aux données stockées par différentes vues. L’état repose généralement sur l’identité
de l’utilisateur et sur ce qu’il fait. Par exemple, la connexion à un site web peut afficher votre profil
utilisateur (vue) avec votre nom (état). Les données d’état varient en fonction de l’utilisateur, mais la vue
reste la même.
15/01/2023
IMANE CHLIOUI
ARCHITECTURE de REACT
• L’application React commence à démarrer avec un seul
composant racine ;
• Le composant racine est créé grâce à un ou plusieurs
composants ;
• Chaque composant est formé comme un composant de
composants plus petits au lieu de dépendre d’un autre
composant ;
• La grande partie des composants sont des composants
d’interface utilisateur ;
• L’application React a la possibilité d’ajouter un composant
tiers à des fins spécifiques comme le routage, l’animation,
la gestion de l’état, etc.
15/01/2023
IMANE CHLIOUI
Qu'est-ce qu'un
fichier Node.js ?
• Les fichiers Node.js contiennent
des tâches qui seront exécutées à
l’occasion de certains événements.
• Un événement typique est la
tentative d'une personne d'accéder à
un port sur le serveur.
• Les fichiers Node.js doivent être
démarrés sur le serveur pour avoir
un effet.
• Les fichiers Node.js ont
l'extension ".js"
15/01/2023
IMANE CHLIOUI
Que peut faire
Node.js ?
• Node.js peut générer du contenu
de page dynamique.
• Node.js peut créer, ouvrir, lire,
écrire, supprimer et fermer des
fichiers sur le serveur.
• Node.js peut collecter les
données des formulaires.
• Node.js peut ajouter, supprimer,
modifier des données dans une
base de données.
15/01/2023
IMANE CHLIOUI
Avec une simple utilisation, les performances sont les
mêmes qu’Apache/PHP
En mode multiserveurs, les performances sont
PERFORMANC supérieures
ES DE NODEJS
Evolution avec Socket I/O très efficace, grâce à la scalability
et le fonctionnement asynchrone
NodeJS casse les barrières de langage entre le client et
le serveur
15/01/2023
IMANE CHLIOUI
Architecture de nodeJs
15/01/2023
IMANE CHLIOUI
Architecture de nodeJs
1.js maintient un pool limité de threads pour servir les requêtes.
2.Chaque fois qu’une requête arrive, Node.js la place dans une file d’attente.
3.Maintenant, la « boucle d’événement » single-thread – le composant central – entre en jeu. Cette boucle
d’événement attend les requêtes indéfiniment.
4.Lorsqu’une requête arrive, la boucle la récupère dans la file d’attente et vérifie si elle nécessite une
opération d’entrée / sortie (E / S) bloquante. Si ce n’est pas le cas, elle traite la requête et envoie une
réponse.
5.Si la requête doit effectuer une opération de blocage, la boucle d’événements attribue un thread du pool de
threads internes pour traiter la requête. Le nombre de threads internes disponibles est limité. Ce groupe de
threads auxiliaires est appelé le groupe de worker.
6.La boucle d’événements suit les requêtes bloquantes et les place dans la file d’attente une fois que la tâche
bloquante est traitée.
15/01/2023
IMANE CHLIOUI
Avantages de nodeJs
1.Facile – Easy-Node.js est assez facile à prendre en main. C’est un choix incontournable pour les débutants en
développement web. Grâce à de nombreux tutoriels et à une vaste communauté, il est très facile de se lancer.
2.Évolutif – Il offre une grande évolutivité aux applications. Node.js, étant single-thread, est capable de gérer un
grand nombre de connexions simultanées avec un débit élevé.
3.Vitesse – L’exécution non bloquante des threads rend Node.js encore plus rapide et plus efficace.
4.Paquets – Un vaste ensemble de paquets Node.js open source est disponible et peut simplifier votre travail.
Aujourd’hui, il y a plus d’un million de paquets dans l’écosystème NPM.
5.Backend solide – Node.js est écrit en C et C++, ce qui le rend rapide et ajoute des fonctionnalités comme le support
réseau.
6.Multi-plateforme – La prise en charge multi-plateforme vous permet de créer des sites web SaaS, des applications
de bureau et même des applications mobiles, le tout en utilisant Node.js.
7.Maintenable – Node.js est un choix facile pour les développeurs, car le frontend et le backend peuvent être gérés
avec JavaScript comme un seul langage.
15/01/2023
IMANE CHLIOUI
Enjoy
15/01/2023
IMANE CHLIOUI
