‫Instructeur : Dans
‫la conférence précédente, en parlant du front-end
‫et du back-end, j'ai mentionné à quelques reprises des sites
‫Web ou des applications simples et statiques
‫et dynamiques, mais sans vraiment définir ce qu'ils sont.
‫Donc, dans cette vidéo, je voulais clarifier ces choses
‫et aussi parler des API afin d'intégrer
‫tous ces concepts dans l'image plus large du
‫développement Web back-end en général.
‫Commençons donc par parler des sites Web statiques
‫par rapport aux sites Web dynamiques.
‫Ainsi, un site Web statique, ou un site
‫Web simple comme je l'ai
‫appelé dans la dernière vidéo, c'est lorsqu'un développeur
‫télécharge les fichiers finaux prêts à être servis d'un site Web sur le serveur Web.
‫Ces fichiers contiennent généralement du HTML, CSS,
‫JavaScript, des images, etc., et comme je l'ai dit, ce
‫sont les fichiers exacts que le serveur enverra plus tard
‫au navigateur lorsque le site Web sera demandé.
‫Le navigateur prendra alors ces
‫fichiers et les rendra tels qu'ils sont.
‫Cela signifie qu'il n'y a aucun travail effectué sur le
‫serveur, qu'il n'y a pas de code back-end et qu'aucune application
‫n'est en cours d'exécution.
‫D'accord?
‫Donc, c'est juste un serveur Web statique servant des fichiers statiques,
‫exactement comme je l'ai mentionné dans la dernière vidéo.
‫Maintenant, vous pourriez penser, attendez, quand il
‫y a du JavaScript sur la
‫page, alors il y a généralement des effets
‫dynamiques, comme des animations et des trucs, n'est-ce pas ?
‫Eh bien, cette dynamique que vous voulez dire
‫est une dynamique différente.
‫C'est juste dans le contexte du développement front-end.
‫Dans le contexte du navigateur, la dynamique n'a rien à
‫voir avec les effets sur une page ou les choses qui se
‫déplacent mais avec la façon dont les sites Web sont générés sur les serveurs.
‫D'accord?
‫Ainsi, les sites Web dynamiques sont différents des sites Web statiques
‫car ils sont généralement construits sur
‫le serveur chaque fois qu'une nouvelle demande arrive.
‫Ainsi, comme nous l'avons vu
‫dans la dernière vidéo, les sites Web dynamiques contiennent généralement une base
‫de données, puis il y a aussi une
‫application en cours d'exécution, comme un nœud. js app, qui récupère les données
‫de la base de données, puis, avec un modèle
‫prédéfini, crée chaque page que l'utilisateur demande de manière dynamique en
‫fonction des données provenant de la base de données.
‫Ainsi, chaque fois qu'un navigateur demande
‫une page, cette page est ensuite construite sous forme de fichiers HTML, CSS
‫et JavaScript, qui seront ensuite renvoyés au navigateur.
‫L'ensemble de ce processus est parfois
‫appelé rendu côté serveur.
‫Donc, encore une fois, c'est pourquoi on l'appelle dynamique,
‫car le site Web peut changer à tout moment en
‫fonction du contenu de la base
‫de données ou des actions de l'utilisateur sur le site.
‫Par exemple, si vous vous êtes connecté à Twitter,
‫cela vous montrera une page complètement différente de
‫celle lorsque vous vous êtes déconnecté, n'est-ce pas ?
‫Et demain, il vous montrera également une page différente
‫de celle d'aujourd'hui, car il y a de nouveaux tweets, donc
‫de nouvelles données dans la base de données.
‫Et c'est ce que sont les sites Web dynamiques.
‫Maintenant, si vous, par exemple, allez à Jonas. io, et vous
‫devriez, en passant, vous
‫verrez toujours le même contenu, le même
‫site Web, peu importe quand vous le visitez ou
‫ce que vous y faites.
‫Et donc, ça veut dire que c'est une page statique, d'accord ?
‫Cette différence a-t-elle un sens ?
‫Maintenant, nous utilisons parfois le terme de sites Web dynamiques
‫et parfois le terme d'application Web,
‫mais c'est un peu la même chose.
‫Habituellement, lorsque les gens se réfèrent à
‫des applications Web, cela signifie un site Web dynamique avec des
‫fonctionnalités telles que la connexion, la création de profils
‫d'utilisateurs, la recherche de choses et des choses comme ça en général.
‫Les sites Web sont, par exemple, quelque chose comme un blog WordPress.
‫Ils sont toujours générés dynamiquement, mais
‫on ne peut vraiment rien faire d'autre que les lire, non ?
‫Et traditionnellement, les sites Web statiques et dynamiques étaient les deux
‫seuls types de sites Web, mais ces dernières
‫années, grâce à la puissance des
‫navigateurs côté client, nous voyons de plus en plus
‫de sites Web basés essentiellement sur des API.
‫Voyons donc comment cela fonctionne et comment
‫nous pouvons utiliser Node. js pour les alimenter.
‫Gardons simplement les sites Web dynamiques ici dans
‫la diapositive afin que nous puissions mieux comparer les deux.
‫Ainsi, tout comme avec les sites Web dynamiques, nous avons une
‫base de données ici et nous avons une application qui récupère
‫les données de la base de données
‫chaque fois qu'un client fait une demande, donc en ce sens, un site Web
‫alimenté par API est en fait assez similaire à un
‫site Web dynamique. site Internet.
‫Ainsi, les deux fonctionnent de manière dynamique.
‫Maintenant, la grande différence ici est qu'avec une API,
‫nous envoyons uniquement les données au navigateur, généralement
‫au format de données JSON,
‫et non à l'ensemble du site Web.
‫Donc, encore une fois, seules les données sont envoyées au client
‫et non au site Web prêt à être affiché.
‫Donc, pas de HTML, pas de CSS, seulement les données JSON, d'accord ?
‫Ainsi, lors de la création
‫de sites Web
‫basés sur des API, il y a
‫toujours ces deux étapes, la création
‫d'une API, puis la consommation de l'API côté
‫client. un logiciel qui peut
‫être utilisé par un autre logiciel pour,
‫fondamentalement, permettre aux applications de communiquer entre elles.
‫Et nous parlerons un peu plus en
‫détail de ce qu'est réellement une API une fois que nous commencerons à en créer une.
‫Quoi qu'il en soit, maintenant sur le côté client que je viens de mentionner.
‫C'est donc là que le site Web est ensuite
‫assemblé en branchant les données que nous recevons
‫dans une sorte de modèles, généralement à l'aide d'un cadre
‫frontal sophistiqué comme React, Angular ou Vue.
‫Je ne vais pas entrer dans
‫les détails ici car ce serait pour un cours de
‫base, mais en termes très généraux, c'est ainsi que cela fonctionne.
‫Donc, vous voyez que lors de la création d'un site Web basé
‫sur une API, la phase de création du site Web
‫est en quelque sorte passée du back-end au front-end, n'est-ce pas ?
‫Ou on peut aussi dire qu'il est passé du serveur au client.
‫C'est pourquoi vous verrez
‫souvent des sites Web dynamiques appelés rendus côté serveur, car
‫ils sont en fait construits sur le serveur.
‫D'un autre côté, les sites Web basés sur des
‫API sont souvent appelés rendus côté client, ce qui est logique, n'est-ce pas ?
‫Donc, pour nous, développeurs back-end,
‫il est en fait beaucoup plus facile de simplement créer une API
‫et de laisser les personnes front-end créer un site, n'est-ce pas ?
‫Et en fait, Node est un outil absolument parfait pour
‫créer des API, et il est très couramment utilisé pour cela, mais
‫bien sûr, il est également
‫parfaitement adapté pour créer un site Web dynamique rendu côté serveur.
‫Ainsi, dans ce cours, nous allons en fait faire les deux versions,
‫en commençant par l'API, et à la fin du cours,
‫en créant également un site Web rendu en utilisant exactement les mêmes données.
‫J'ai choisi de faire les deux car je pense qu'il est extrêmement important pour
‫vous de savoir comment créer à la fois une API et un
‫site Web rendu côté serveur.
‫Et maintenant juste pour finir
‫cette vidéo, je voulais mentionner rapidement que
‫les API que nous construisons avec Node, ou vraiment, n'importe quel autre
‫langage, peuvent, bien
‫sûr, être consommées par d'autres clients que le navigateur,
‫ce qui est un énorme avantage de créer une API
‫au lieu d'un site Web rendu côté serveur.
‫Donc, disons que nous
‫construisons un exemple d'API sur jonas. io/api/myCourseData.
‫Ainsi, chaque fois que nous atteignons cette URL, le serveur renvoie des données
‫sur les cours
‫de développement Web que j'enseigne actuellement.
‫Jusqu'à présent, nous n'avons parlé que des
‫demandes provenant de navigateurs Web, mais nous pourrions également demander et
‫ensuite utiliser exactement les mêmes données JSON
‫sur une application iOS native ou une application Android, ou
‫même sur des applications de bureau pour Mac
‫ou pour les ordinateurs Windows.
‫Les possibilités sont vraiment infinies lorsque nous construisons une API car
‫nous avons simplement une source de données,
‫qui peut ensuite être demandée et utilisée n'importe où,
‫pas seulement des navigateurs.
‫C'est un peu le problème lorsque nous construisons un
‫site Web dynamique normal.
‫Nous renvoyons des fichiers HTML, CSS et
‫JavaScript, et seuls les navigateurs peuvent vraiment les
‫comprendre, nous sommes donc piégés dans cette plate-forme unique.
‫Et cela peut ne pas être un
‫problème dans de nombreux cas, mais pour les produits complexes
‫qui nécessitent beaucoup d'applications, puis des sites Web
‫et des applications Web, une API est généralement toujours nécessaire.
‫Donc, dans cet exemple sur Jonas. io, je pourrais créer cette
‫API, puis créer un site Web basé sur l'API et quelques
‫applications et obtenir mes données sur tous
‫ces clients à partir d'une seule source, d'accord ?
‫Et certaines personnes ou équipes n'ont même pas de
‫client du tout et vendent simplement l'accès à
‫leur API à des
‫tiers qui utiliseront ensuite ces API et non les leurs.
‫Ainsi, il existe vraiment des entreprises entières
‫construites autour de cette philosophie consistant à simplement vendre une API
‫à d'autres développeurs ou entreprises.
‫Quoi qu'il en soit, j'espère qu'avec cette dernière diapositive, le
‫concept et la raison et, en quelque sorte,
‫la philosophie derrière la création d'API sont devenus clairs pour vous.
‫Alors, passons maintenant.