EasyTech #29 - Internet, comment ça marche ?
Tout le monde l'utilise mais est-ce qu'on sait comment ça fonctionne ?
Salut à tous,
Très heureux de vous retrouver ce dimanche.
Aujourd’hui on va parler d’un concept technique !
Enfin… je ne sais pas si le mot concept technique s’applique tant il s’agit de quelque chose d’important dans notre société.
Internet !
Ce qui est intéressant, c’est que de comprendre comment fonctionne Internet va nous aider à comprendre, en complément, les éléments de base de l’architecture d’un produit.
Synthèse
Pour définir de manière macro Internet, on peut dire qu’il s’agit d’un réseau pour transporter de l’information.
Au sein de ce réseau, il y a trois composants importants : les composants qui veulent accéder à l’information (dits côté client), ceux qui transportent l’information et ceux qui donnent accès à l’information (dits côté serveur).
Dans un produit ou un site web classique, la partie client correspond à ce qu’on appelle le front-end, c’est à dire les aspects purement visuels, et la partie serveur au back-end, c’est celle qui interagit avec la base de données.
Un réseau pour transporter de l’information
Pour définir l’Internet de manière simple, il s’agit d’un grand réseau reliant des ordinateurs. On entend ordinateurs au sens large, ça peut inclure également des portables, des systèmes informatiques autonomes…
Ce réseau a pour but de faire naviguer de l’information. Quand on y réfléchit, c’est logique. Internet a pour but d’accéder ou de transmettre de l’information. C’est d’ailleurs pour ça qu’on parle de révolution de l’information pour en parler.
Lorsque je vais sur Wikipedia ou sur Youtube, j’accède en ligne, à de l’information. Qu’elle soit contenue dans des articles d’encyclopédie ou à des vidéos.
Lorsque j’achète en ligne, sur Amazon, j’accède en ligne à des informations relatives à des produits (informations « objectives » sur le prix, le délai de livraison et informations « subjectives » comme les avis d’autres personnes). Puis je vais transmettre des informations bancaires notamment pour acheter et transmettre une information selon laquelle je veux acheter le produit.
Lorsque je joue à un jeu en ligne d’ailleurs, il s’agit également d’une transmission subtile d’information. J’accède aux règles du jeu puis à l’interface du jeu : c’est un ensemble d’information comme « mon personnage est situé à tel endroit sur la carte du jeu ». Lorsque je « joue » je transmets des informations pour faire bouger mon personnage.
Bref, même si l’information n’est pas de nature académique, Internet sert à transmettre des informations. Il le fait sous forme d’octets. C’est le format utilisé par les ordinateurs pour transmettre ces informations. Ce format permet de compacter l’information (un peu comme un zip) et permet aussi d’éviter que l’information soit abîmée pendant sa transmission (un peu comme un carton qui protège le produit à l’intérieur).
La distinction structurante entre client et serveur
Les différents rôles des noeuds
On a vu que tous les ordinateurs n’ont pas exactement le même rôle lorsqu’on utilise Internet pour accéder à de l’information. Notamment dans les exemples ci-dessus, l’utilisateur avait plutôt tendance à accéder à l’information qu’à la transmettre. C’est ce qui permet de faire une distinction importante entre les ordinateurs client et serveur :
Les ordinateurs clients correspondent aux ordinateurs que nous manipulons dans la vie de tous les jours, que ce soit des ordinateurs portables ou des smartphones. Leur objectif est d’accéder à de l’information sur Internet pour réaliser des actions. Dans le cadre de ces actions, il va y avoir des échanges dans les deux sens. Quand je vais sur Wikipédia pour regarder la page « histoire de l’informatique ». J’envoie l’information que je recherche « histoire de l’informatique » à Wikipedia – on parle de requête. Ensuite Wikipedia va me répondre en m’envoyant l’information contenue dans la page correspondante. J’ai donc plutôt une posture de client, qui envoie des requêtes pour accéder à de l’information.
Les ordinateurs serveurs, comme leurs noms l’indiquent, sont là pour « servir » les clients et répondre à leurs requêtes. Leur travail est donc de comprendre les demandes des clients et de leur transmettre l’information voulue en retour. Ce sont notamment ces serveurs qui se chargent de stocker l’information ! En effet, si je n’ai pas accès à Internet, en tant que client, je ne vais pas pouvoir accéder à Wikipédia. Le serveur lui, va avoir un accès privilégié à la base de données. Cela l’aide à servir les bonnes informations au client.
Les ordinateurs serveurs sont des ordinateurs spéciaux qui ne ressemblent pas à ceux qu’on utilise dans la vie de tous les jours. Par exemple, ils n’ont pas en général d’écran ou d’interface pour qu’on interagisse avec. Il faut se connecter à distance et avec une interface extrêmement limitée pour discuter avec et le faire travailler.
Dans ce grand réseau qu’est Internet, il y a donc :
les clients qui envoient des requêtes pour accéder à des informations
les serveurs qui reçoivent et traitent ces requêtes, puis interagissent avec les systèmes où sont stockées les informations pour les renvoyer aux clients
Les interconnexions entre noeuds
Il manque un élément important ! Les connexions entre ces différents éléments (ou nœuds). C’est là la beauté d’Internet, de permettre cette interconnexion. Il faut donc des équipements pour faire transiter ces informations entre les bons clients et les bons serveurs.
Cette infrastructure de transport est composée de deux grands types d’équipement :
Des grands / gros fils qui vont naviguer l’information le plus vite possible (un peu comme des rails de TGV)
Des composants pour s’assurer que l’information est acheminée vers le bon endroit (un peu comme des gares ou des centres d’aiguillage)
Un dernier point est important. Pour s’assurer que les informations soient envoyées au bon endroit, il est nécessaire d’avoir une notion de localisation ou d’adresse. C’est ce qu’on appelle les adresses IP. L’ordinateur côté client, le serveur ou même certains composants utilisés pour l’aiguillage, possèdent une adresse dans le grand réseau Internet : leur adresse IP.
Or, de la même manière que l’on n’a pas forcément envie que son adresse postale soit publique et accessible à tout le monde, toutes les adresses IP de tous les systèmes informatiques du monde ne sont pas nécessairement publiques. On parle alors d’adresse IP privée. Et on appelle un regroupement d’adresses IP privées cohérentes un réseau privé. Il y a de nombreux réseaux privés au sein d’Internet ne serait-ce par exemple que pour des informations sensibles ou confidentielles comme celles de la Défense ou de la Sécurité intérieure.
Évidemment cette représentation est simplifiée. Dans “la vraie vie”, il y a des composants dont le rôle est de s’assurer qu’on ne puisse pas s’introduire dans un réseau privé sans avoir le droit de le faire (par exemple pare-feu ou mécanisme d’authentification).
Internet illustré par le fonctionnement d’une architecture produit “simplifiée”
Maintenant qu’on a bien vu comment fonctionne Internet, prenons l’exemple d’un site web comme Amazon.com pour illustrer comment fonctionne une architecture produit de manière “simplifiée”.
Lorsque j’ouvre mon ordinateur pour me rendre sur le site d’Amazon, mon navigateur (Chrome, Mozilla, Edge, Safari) va m’afficher un certain nombre d’éléments sur mon écran. Le fait d’avoir écrit « amazon.com » dans mon navigateur (côté client) a envoyé une requête (côté serveur) pour récupérer les informations sur l’adresse publique d’Amazon. À partir de ces informations reçues par le serveur, mon navigateur me prépare cette page que je vois.
On appelle cette partie sur mon navigateur le front-end. Cela va renvoyer à différents éléments :
Les couleurs et l’aspect visuel
L’organisation de l’information
Les différents boutons ou liens
Ces derniers sont importants car ils sont, au sein du front-end, les composants qui vont me permettre de discuter avec le back-office du site, en envoyant des requêtes comme on en a parlé auparavant.
Lorsque je clique sur le produit « Le mythe de Sisyphe » d’Albert Camus, un livre présent, sur la page d’accueil d’Amazon, cela fait 2 choses :
Ça me redirige vers la page de ce produit « Le mythe de Sisyphe »
Ça envoie une requête aux serveurs d’Amazon pour savoir comment remplir cette page du produit ! Donc si je clique puis que ma connexion s’arrête, la page produit restera vide.
On appelle en général « back-end » la partie au niveau du serveur qui permet de recevoir le message du front-end et d’interagir avec la base de données (qui stocke les informations liées à tous les produits). Pour être encore plus précis, le back-end fait 3 choses :
D’une part, il donne la possibilité au front-end de requêter des informations, via ce lien sur la page d’accueil. C’est ce qu’on appelle une API. C’est une sorte de porte d’entrée sur le back-office de l’application. On l’a paramétré pour qu’un click actionne les bons éléments sur la serrure de cette porte.
D’autre part, il interagit avec la base de données pour récupérer les bonnes informations et éventuellement les retraiter. En effet parfois, il va y avoir quelques calculs effectués à partir des informations « basiques » contenues dans la base de données. Typiquement, si je choisis de mettre des prix plus chers au livre sur lequel j’ai cliqué à certains moments de la journée. Le back-end se chargera d’appliquer le bon moment.
Enfin, il renvoie ces informations après les avoir récupéré à l’ordinateur client, pour que le code du front-end génère la bonne page web dans le navigateur du client.
Voici donc comment fonctionne un site web avec donc le front-end, le back-end composé d’APIs et une base de données.
C’est la même chose avec une application mobile comme Spotify.
Quand je clique sur une musique sur l’application Spotify sur mon portable. Cela envoie une requête aux serveurs de Spotify afin de m’envoyer le fichier .mp4 correspondant à l’audio de celle-ci ainsi que les images comme la jaquette de l’album.
Deux subtilités que l’exemple de Spotify permet d’illustrer.
Premièrement, une fois que le fichier .mp4 et les informations complémentaires ont été reçues, ces informations sont stockées sur mon téléphone portable. Si je me mets en mode avion juste après que la chanson a commencé, je continue à écouter la musique. Il n’y a donc pas de transfert d’informations en continu comme on peut l’avoir par exemple sur des sites de streaming comme YouTube et Netflix. En général pour YouTube, les 20-30 secondes suivantes sont téléchargées et pourront être visionnées si le mode avion est activé mais pas beaucoup plus.
Deuxièmement, cela montre que le front-end n’est pas uniquement là pour mettre en valeur les informations transmises par le back-end. Le front-end a aussi son utilité pour de très nombreuses actions qui n’ont pas vocation à entraîner une interaction avec le back-end.
On l’a vu le back-end a pour rôle de faire interagir l’utilisateur et la base de données. En d’autres termes, il permet à l’utilisateur de « persister » ou mémoriser des informations importantes. Toutefois, en tant qu’utilisateur de Spotify, je peux vouloir revenir en arrière de 15 secondes sur ma chanson ou la mettre en boucle. Sans que ça doive être des informations transmises à la base de données.
Il faut donc bien retenir que le front-end a une utilité intrinsèque au-delà de transmettre des informations à la base de données. Certains éléments peuvent lui être judicieusement ajoutés pour améliorer l’expérience utilisateur.
Conclusion
Voilà c’est fini pour ce premier tour d’horizon autour d’Internet et de ses enjeux.
J’espère que cette édition était claire et t’a plue.
Bonne semaine !
Victor
Très bien expliqué, peut-être rajouter une partie sur les DNS notamment pour expliquer comment l’ordinateur comprend où aller quand on cherche Amazon.com 😉👍🏽
Superbe vulgarisation d’internet. Merci