Cet article est destiné aux débutants et à ceux qui veulent un peu de conseils sur les termes et technologies des applications Web modernes. L'article décrit en quoi les applications Web diffèrent des sites, quelles sont les applications Web, en quoi elles consistent et comment elles fonctionnent.
1. Différences entre les applications Web et les sites
Pour moi, un site est avant tout un élément informatif et statique: une carte de visite d'entreprise, un site de recettes, un portail de ville ou un wiki. Un ensemble de fichiers HTML pré-préparés qui se trouvent sur un serveur distant et sont remis au navigateur sur demande.
Les sites contiennent diverses statiques qui, comme un fichier HTML, ne sont pas générées à la volée. Le plus souvent, ce sont des images, des fichiers CSS, des scripts JS, mais il peut y avoir d'autres fichiers: mp3, mov, csv, pdf.
Blogs, cartes de visite avec formulaire de contact, landing pages avec plein d'effets, je me réfère également aux sites pour plus de simplicité. Bien que, contrairement aux sites complètement statiques, ils incluent déjà une sorte de logique métier.
Et une application Web est quelque chose de techniquement plus complexe. Ici, les pages HTML sont générées à la volée en fonction de la demande de l'utilisateur. Clients de messagerie, réseaux sociaux, moteurs de recherche, boutiques en ligne, programmes commerciaux en ligne, ce sont toutes des applications Web.
2. Que sont les applications Web
Les applications Web peuvent être divisées en plusieurs types, selon différentes combinaisons de ses principaux composants:
- Le backend (backend ou côté serveur de l'application) s'exécute sur un ordinateur distant, qui peut être situé n'importe où. Il peut être écrit dans différents langages de programmation: PHP, Python, Ruby, C # et autres. Si vous créez une application en utilisant uniquement le côté serveur, à la suite de toute transition entre les sections, les soumissions de formulaires, les mises à jour de données, le serveur générera un nouveau fichier HTML et la page du navigateur se rechargera.
- Le frontend (frontend ou côté client de l'application) s'exécute dans le navigateur de l'utilisateur. Cette partie est écrite dans le langage de programmation Javascript. Une application ne peut être constituée que d'une partie client si elle n'est pas requise pour stocker des données utilisateur pendant plus d'une session. Il peut s'agir, par exemple, de monteurs photo ou de simples jouets.
- Application d'une seule page (SPA ou application d'une seule page). Une option plus intéressante est lorsque le backend et le frontend sont utilisés. En utilisant leur interaction, vous pouvez créer une application qui fonctionnera sans aucun rechargement de page dans le navigateur. Ou dans une version simplifiée, lorsque les transitions entre les partitions provoquent des redémarrages, mais que toutes les actions de la partition s'en passent.
3. Framework Pyhon Django aka backend
En développement, un framework est un ensemble de bibliothèques et d'outils prêts à l'emploi qui vous aident à créer des applications Web. Par exemple, je décrirai le principe de fonctionnement du framework Django écrit en langage de programmation Python.
La première étape est une demande de l'utilisateur au routeur (répartiteur d'URL), qui décide quelle fonction traiter la demande à appeler. La décision est prise sur la base d'une liste de règles composée d'une expression régulière et du nom de la fonction: si telle URL, alors telle fonction.
La fonction appelée par le routeur est appelée vue. Toute logique métier peut être contenue à l'intérieur, mais le plus souvent, il s'agit de deux choses: soit les données sont extraites de la base de données, préparées et renvoyées à l'avant; ou une demande est venue avec des données d'une certaine forme, ces données sont vérifiées et stockées dans la base de données.
Les données d'application sont stockées dans une base de données (DB). Bases de données relationnelles les plus utilisées. C'est quand il y a des tables avec des colonnes prédéfinies et ces tables sont interconnectées via l'une des colonnes.
Les données de la base de données peuvent être créées, lues, modifiées et supprimées. Parfois, pour désigner ces actions, on peut rencontrer l'abréviation CRUD (Create Read Update Delete). Pour interroger des données dans la base de données, un langage SQL spécial (langage de requête structuré) est utilisé.
Dans Django, les modèles sont utilisés pour travailler avec des bases de données. Ils vous permettent de décrire des tableaux et de faire des requêtes sur le développeur python habituel, ce qui est beaucoup plus pratique. Vous devez payer pour cette commodité: de telles requêtes sont plus lentes et limitées en capacités par rapport à l'utilisation de SQL pur.
Les données reçues de la base de données sont préparées pour être envoyées au front. Ils peuvent être substitués dans un modèle et envoyés sous forme de fichier HTML. Mais dans le cas d'une application d'une page, cela ne se produit qu'une seule fois, lorsqu'une page HTML est générée, à laquelle tous les scripts JS sont connectés. Dans d'autres cas, les données sont sérialisées et envoyées au format JSON.
4. Framework Javascript aka frontend
La partie client de l'application est constituée de scripts écrits dans le langage de programmation Javascript (JS) et exécutés dans le navigateur de l'utilisateur. Auparavant, toute la logique client était basée sur l'utilisation de la bibliothèque JQuery, qui vous permet de travailler avec le DOM, l'animation sur la page et de faire des requêtes AJAX.
DOM (modèle d'objet de document) est la structure d'une page HTML. Travailler avec le DOM signifie rechercher, ajouter, modifier, déplacer et supprimer des balises HTML.
AJAX (javascript asynchrone et XML) est un nom commun pour les technologies qui vous permettent de faire des demandes asynchrones (sans recharger la page) au serveur et d'échanger des données. Étant donné que les parties client et serveur de l'application Web sont écrites dans différents langages de programmation, pour l'échange d'informations, il est nécessaire de convertir les structures de données (par exemple, listes et dictionnaires) dans lesquelles elles sont stockées au format JSON.
JSON (JavaScript Object Notation) est un format universel pour l'échange de données entre un client et un serveur. Il s'agit d'une chaîne simple qui peut être utilisée dans n'importe quel langage de programmation.
La sérialisation est la conversion d'une liste ou d'un dictionnaire en chaîne JSON. Pour un exemple:
Dictionnaire:
{ 'id': 1, 'email': 'mail@example.com' }
Chaîne sérialisée:
'{"id": 1, "email": "mail@example.com"}'
La désérialisation est la transformation inverse d'une chaîne en liste ou dictionnaire.
En manipulant le DOM, vous pouvez contrôler complètement le contenu des pages. En utilisant AJAX, vous pouvez échanger des données entre le client et le serveur. Avec ces technologies, vous pouvez déjà créer un SPA. Mais lors de la création d'une application complexe, le code frontal basé sur jQuery devient rapidement déroutant et difficile à maintenir.
Heureusement, les frameworks Javascript ont remplacé JQuery: Backbone Marionette, Angular, React, Vue et autres. Ils ont une philosophie et une syntaxe différentes, mais ils vous permettent tous de gérer les données sur le front-end avec beaucoup plus de commodité, ils ont des moteurs de modèle et des outils pour créer une navigation entre les pages.
Un modèle HTML est une page HTML intelligente dans laquelle des variables sont utilisées à la place de valeurs spécifiques et divers opérateurs sont disponibles:
if , la boucle
for et d'autres. Le processus d'obtention d'une page HTML à partir d'un modèle lorsque des variables sont substituées et des opérateurs appliqués est appelé rendu de modèle.
La page résultante est montrée à l'utilisateur. Passer à une autre section de SPA utilise un modèle différent. Si vous devez utiliser d'autres données dans le modèle, elles sont demandées au serveur. Toutes les soumissions de formulaire avec des données sont des demandes AJAX au serveur.
5. Comment le client et le serveur communiquent entre eux
Le client communique avec le serveur via HTTP. La base de ce protocole est la demande du client au serveur et la réponse du serveur au client.
Pour les requêtes, ils utilisent généralement les méthodes GET si nous voulons obtenir des données et POST si nous voulons modifier les données. La demande indique également l'hôte (domaine du site), le corps de la demande (s'il s'agit d'une demande POST) et de nombreuses informations techniques supplémentaires.
Les applications Web modernes utilisent le protocole HTTPS, une version étendue de HTTP avec prise en charge du cryptage SSL / TLS. L'utilisation d'un canal de transmission de données crypté, quelle que soit l'importance de ces données, est devenue une bonne forme sur Internet.
Il existe une autre demande qui est effectuée avant HTTP. Il s'agit d'une requête DNS (système de nom de domaine). Il est nécessaire pour obtenir l'adresse IP à laquelle le domaine demandé est lié. Ces informations sont stockées dans le navigateur et nous n'y consacrons plus de temps.
Lorsqu'une requête du navigateur atteint le serveur, elle ne parvient pas immédiatement à Django. Tout d'abord, il est traité par le serveur Web Nginx. Si un fichier statique est demandé (par exemple, une image), Nginx lui-même l'envoie en réponse au client. Si la requête n'est pas statique, Nginx doit la proxy (la transférer) à Django.
Malheureusement, il ne sait pas comment. Par conséquent, un autre programme de couche est utilisé - le serveur d'applications. Par exemple, pour les applications python, ce pourrait être uWSGI ou Gunicorn. Et maintenant, ils envoient la demande à Django.
Une fois que Django a traité la demande, il renvoie une réponse avec une page ou des données HTML et un code de réponse. Si tout va bien, alors le code de réponse est 200; si la page n'est pas trouvée, alors - 404; si une erreur se produit et que le serveur n'a pas pu traiter la demande, alors - 500. Ce sont les codes les plus courants.
6. Mise en cache dans les applications Web
Une autre technologie que nous rencontrons constamment, qui est présente à la fois dans les applications Web et les logiciels, et au niveau du processeur dans nos ordinateurs et smartphones.
Le cache est un concept en développement lorsque les données fréquemment utilisées, au lieu de les extraire de la base de données à chaque fois, calculées ou préparées d'une autre manière, sont stockées dans un endroit rapidement accessible. Quelques exemples d'utilisation du cache:
- À Django, une demande est venue de recevoir les données du graphique dans le rapport. Nous obtenons les données de la base de données, les préparons et les mettons dans la base de données avec un accès rapide, par exemple, memcached pendant 1 heure. À la prochaine demande, nous les récupérerons immédiatement de memcached et les enverrons au frontend. Si nous découvrons que les données ont cessé d'être pertinentes, nous les invalidons (les supprimons du cache).
- Pour la mise en cache des fichiers statiques, des fournisseurs CDN (Content Delivery Network) sont utilisés. Ce sont des serveurs situés dans le monde entier et optimisés pour la distribution de statiques. Parfois, il est plus efficace de mettre des images, des vidéos, des scripts JS sur CDN au lieu de votre serveur.
- Tous les navigateurs activent la mise en cache des fichiers statiques par défaut. Grâce à cela, l'ouverture du site n'est pas la première fois, tout se charge sensiblement plus vite. L'inconvénient pour le développeur est qu'avec le cache activé, les modifications apportées au code ne sont pas toujours immédiatement visibles.