Wie Webanwendungen funktionieren

Dieser Artikel richtet sich an Anfänger und diejenigen, die eine kleine Einführung in die Begriffe und Technologien moderner Webanwendungen wünschen. Der Artikel beschreibt, wie sich Webanwendungen von Websites unterscheiden, was Webanwendungen sind, woraus sie bestehen und wie sie funktionieren.

1. Wie unterscheiden sich Webanwendungen von Websites?

Für mich ist eine Site in erster Linie etwas Informatives und Statisches: eine Visitenkarte eines Unternehmens, eine Site für Rezepte, ein Stadtportal oder ein Wiki. Eine Reihe vorbereiteter HTML-Dateien, die sich auf einem Remote-Server befinden und auf Anfrage an den Browser übergeben werden.

Websites enthalten verschiedene Statiken, die wie eine HTML-Datei nicht im laufenden Betrieb generiert werden. Meistens sind dies Bilder, CSS-Dateien, JS-Skripte, aber es können auch andere Dateien vorhanden sein: mp3, mov, csv, pdf.

Blogs, Visitenkarten mit einem Kontaktformular, Zielseiten mit einer Reihe von Effekten. Der Einfachheit halber verweise ich auch auf Websites. Im Gegensatz zu vollständig statischen Sites enthalten sie jedoch bereits eine Art Geschäftslogik.

Und eine Webanwendung ist technisch etwas komplexer. Hier werden HTML-Seiten je nach Benutzeranforderung im laufenden Betrieb generiert. E-Mail-Clients, soziale Netzwerke, Suchmaschinen, Online-Shops, Online-Business-Programme - all dies sind Webanwendungen.

2. Was sind Webanwendungen?

Webanwendungen können abhängig von verschiedenen Kombinationen ihrer Hauptkomponenten in verschiedene Typen unterteilt werden:

1. Das Backend (Backend oder Serverseite der Anwendung) wird auf einem Remotecomputer ausgeführt, der sich an einer beliebigen Stelle befinden kann. Es kann in verschiedenen Programmiersprachen geschrieben werden: PHP, Python, Ruby, C # und andere. Wenn Sie eine Anwendung nur auf der Serverseite erstellen, generiert der Server aufgrund von Übergängen zwischen Abschnitten, Formularübermittlungen und Datenaktualisierungen eine neue HTML-Datei und die Seite im Browser wird neu geladen.
2. Das Frontend (Frontend oder Client-Seite der Anwendung) wird im Browser des Benutzers ausgeführt. Dieser Teil ist in der Programmiersprache Javascript geschrieben. Eine Anwendung kann nur aus einem Client-Teil bestehen, wenn Benutzerdaten nicht länger als eine Sitzung gespeichert werden müssen. Dies können beispielsweise Bildbearbeitungsprogramme oder einfaches Spielzeug sein.
3. Einzelseitenanwendung (SPA oder Einzelseitenanwendung). Eine interessantere Option ist, wenn sowohl das Backend als auch das Frontend verwendet werden. Mithilfe ihrer Interaktion können Sie eine Anwendung erstellen, die ohne erneutes Laden von Seiten im Browser funktioniert. Oder in einer vereinfachten Version, wenn Übergänge zwischen Partitionen einen Neustart verursachen, aber alle Aktionen in der Partition ohne sie auskommen.

3. Pyhon Framework Django aka Backend

In der Entwicklung besteht ein Framework aus einer Reihe vorgefertigter Bibliotheken und Tools, mit denen Sie Webanwendungen erstellen können. Zum Beispiel werde ich das Funktionsprinzip des Django-Frameworks beschreiben, das in der Programmiersprache Python geschrieben ist.

Der erste Schritt ist eine Anfrage des Benutzers an den Router (URL-Dispatcher), der entscheidet, welche Funktion die aufzurufende Anfrage verarbeitet. Die Entscheidung wird auf der Grundlage einer Liste von Regeln getroffen, die aus einem regulären Ausdruck und dem Namen der Funktion besteht: Wenn eine solche URL, dann eine solche Funktion.

Die vom Router aufgerufene Funktion heißt view. Jede Geschäftslogik kann darin enthalten sein, aber meistens ist es eines von zwei Dingen: Beide Daten werden aus der Datenbank entnommen, vorbereitet und an die Front zurückgegeben; oder eine Anfrage kam mit Daten aus irgendeiner Form, diese Daten werden geprüft und in der Datenbank gespeichert.

Anwendungsdaten werden in einer Datenbank (DB) gespeichert. Am häufigsten verwendete relationale Datenbanken. Dies ist der Fall, wenn Tabellen mit vordefinierten Spalten vorhanden sind und diese Tabellen über eine der Spalten miteinander verbunden sind.

Daten in der Datenbank können erstellt, gelesen, geändert und gelöscht werden. Um diese Aktionen zu kennzeichnen, stößt man manchmal auf die Abkürzung CRUD (Create Read Update Delete). Zum Abfragen von Daten in der Datenbank wird eine spezielle SQL-Sprache (strukturierte Abfragesprache) verwendet.

In Django werden Modelle verwendet, um mit Datenbanken zu arbeiten. Mit ihnen können Sie Tabellen beschreiben und Abfragen an den üblichen Python-Entwickler stellen, was viel praktischer ist. Für diese Bequemlichkeit müssen Sie bezahlen: Solche Abfragen sind langsamer und in ihren Funktionen eingeschränkt als bei Verwendung von reinem SQL.

Die von der Datenbank empfangenen Daten werden für den Versand an die Front vorbereitet. Sie können in eine Vorlage eingesetzt und als HTML-Datei gesendet werden. Bei einer einseitigen Anwendung geschieht dies jedoch nur einmal, wenn eine HTML-Seite generiert wird, mit der alle JS-Skripte verbunden sind. In anderen Fällen werden die Daten serialisiert und im JSON-Format gesendet.

4. Javascript Frameworks aka Frontend

Der Client-Teil der Anwendung sind Skripte, die in der Programmiersprache Javascript (JS) geschrieben und im Browser des Benutzers ausgeführt werden. Bisher basierte die gesamte Clientlogik auf der Verwendung der JQuery-Bibliothek, mit der Sie mit dem DOM und der Animation auf der Seite arbeiten und AJAX-Anforderungen stellen können.

DOM (Document Object Model) ist die Struktur einer HTML-Seite. Wenn Sie mit dem DOM arbeiten, müssen Sie HTML-Tags suchen, hinzufügen, ändern, verschieben und löschen.

AJAX (asynchrones Javascript und XML) ist ein gebräuchlicher Name für Technologien, mit denen Sie asynchrone Anforderungen (ohne die Seite neu zu laden) an den Server senden und Daten austauschen können. Da die Client- und Serverteile der Webanwendung in verschiedenen Programmiersprachen geschrieben sind, müssen für den Informationsaustausch die Datenstrukturen (z. B. Listen und Wörterbücher), in denen sie gespeichert sind, in das JSON-Format konvertiert werden.

JSON (JavaScript Object Notation) ist ein universelles Format für den Datenaustausch zwischen einem Client und einem Server. Es ist eine einfache Zeichenfolge, die in jeder Programmiersprache verwendet werden kann.

Serialisierung ist die Konvertierung einer Liste oder eines Wörterbuchs in eine JSON-Zeichenfolge. Beispielsweise:

Wörterbuch:

{ 'id': 1, 'email': 'mail@example.com' } 

Serialisierte Zeichenfolge:

  '{"id": 1, "email": "mail@example.com"}' 

Deserialisierung ist die inverse Umwandlung eines Strings in eine Liste oder ein Wörterbuch.

Durch Manipulieren des DOM können Sie den Inhalt der Seiten vollständig steuern. Mit AJAX können Sie Daten zwischen Client und Server austauschen. Mit diesen Technologien können Sie bereits ein SPA erstellen. Beim Erstellen einer komplexen Anwendung wird jQuery-basierter Front-End-Code jedoch schnell verwirrend und schwierig zu warten.

Glücklicherweise haben Javascript-Frameworks JQuery ersetzt: Backbone Marionette, Angular, React, Vue und andere. Sie haben eine andere Philosophie und Syntax, aber alle ermöglichen es Ihnen, Daten im Front-End mit viel größerem Komfort zu verwalten. Sie verfügen über Vorlagen-Engines und Tools zum Erstellen der Navigation zwischen Seiten.

Eine HTML-Vorlage ist eine intelligente HTML-Seite, auf der Variablen anstelle bestimmter Werte verwendet werden und verschiedene Operatoren verfügbar sind: if , die for- Schleife und andere. Das Abrufen einer HTML-Seite aus einer Vorlage, wenn Variablen ersetzt und Operatoren angewendet werden, wird als Vorlagenrendering bezeichnet.

Die resultierende Seite wird dem Benutzer angezeigt. Beim Wechseln zu einem anderen Abschnitt in SPA wird eine andere Vorlage verwendet. Wenn Sie andere Daten in der Vorlage verwenden müssen, werden diese vom Server angefordert. Alle Formularübermittlungen mit Daten sind AJAX-Anforderungen an den Server.

5. Wie der Client und der Server miteinander kommunizieren

Der Client kommuniziert mit dem Server über HTTP. Die Basis dieses Protokolls ist die Anforderung vom Client an den Server und die Antwort des Servers an den Client.

Bei Abfragen verwenden sie normalerweise GET-Methoden, wenn wir Daten abrufen möchten, und POST, wenn wir die Daten ändern möchten. Die Anfrage enthält auch Host (Site-Domain), Anfragetext (wenn es sich um eine POST-Anfrage handelt) und viele zusätzliche technische Informationen.

Moderne Webanwendungen verwenden das HTTPS-Protokoll, eine erweiterte Version von HTTP mit Unterstützung für die SSL / TLS-Verschlüsselung. Die Verwendung eines verschlüsselten Datenübertragungskanals, unabhängig von der Bedeutung dieser Daten, ist im Internet zu einer guten Form geworden.

Es gibt eine weitere Anforderung, die vor HTTP gestellt wird. Dies ist eine DNS-Abfrage (Domain Name System). Es wird benötigt, um die IP-Adresse zu erhalten, an die die angeforderte Domain gebunden ist. Diese Informationen werden im Browser gespeichert und wir verbringen keine Zeit mehr damit.

Wenn eine Anfrage vom Browser den Server erreicht, gelangt sie nicht sofort zu Django. Zunächst wird es vom Nginx-Webserver verarbeitet. Wenn eine statische Datei angefordert wird (z. B. ein Bild), sendet Nginx diese selbst als Antwort an den Client. Wenn die Anforderung nicht statisch ist, muss Nginx sie an Django weiterleiten.

Leider weiß er nicht wie. Daher wird ein anderes Ebenenprogramm verwendet - der Anwendungsserver. Bei Python-Anwendungen kann es sich beispielsweise um uWSGI oder Gunicorn handeln. Und jetzt senden sie die Anfrage an Django.

Nachdem Django die Anfrage verarbeitet hat, gibt er eine Antwort mit einer HTML-Seite oder Daten und einem Antwortcode zurück. Wenn alles in Ordnung ist, lautet der Antwortcode 200; Wenn die Seite nicht gefunden wird, - 404; Wenn ein Fehler auftritt und der Server die Anforderung nicht verarbeiten konnte, dann - 500. Dies sind die häufigsten Codes.

6. Caching in Webanwendungen

Eine weitere Technologie, der wir ständig begegnen und die sowohl in Webanwendungen und Software als auch auf Prozessorebene in unseren Computern und Smartphones vorhanden ist.

Cache ist ein Konzept in der Entwicklung, wenn häufig verwendete Daten an einem schnell zugänglichen Ort gespeichert werden, anstatt sie jedes Mal aus der Datenbank zu holen, wenn sie auf andere Weise berechnet oder aufbereitet werden. Einige Beispiele für die Cache-Nutzung:

• In Django wurde eine Anfrage gestellt, um Daten für das Diagramm im Bericht zu erhalten. Wir holen die Daten aus der Datenbank, bereiten sie vor und stellen sie mit schnellem Zugriff in die Datenbank, z. B. 1 Stunde lang im Speicher. Bei der nächsten Anfrage werden wir sie sofort von memcached erhalten und an das Frontend senden. Wenn wir feststellen, dass die Daten nicht mehr relevant sind, machen wir sie ungültig (löschen Sie sie aus dem Cache).
• Zum Zwischenspeichern statischer Dateien werden CDN-Anbieter (Content Delivery Network) verwendet. Hierbei handelt es sich um Server auf der ganzen Welt, die für die Verteilung von Statiken optimiert sind. Manchmal ist es effizienter, Bilder, Videos und JS-Skripte auf CDN anstatt auf Ihrem Server abzulegen.
• Alle Browser aktivieren standardmäßig das Zwischenspeichern statischer Dateien. Dank dessen ist das Öffnen der Site nicht das erste Mal, alles wird spürbar schneller geladen. Das Minus für den Entwickler ist, dass bei aktiviertem Cache Änderungen am Code nicht immer sofort sichtbar sind.