It’s #FrontendFriday – Was ist HTTP?

Es ist soweit, es ist Freitag – It’s #FrontendFriday :)

Im heutigem Blog geht es um das Thema „Was ist HTTP?“.

Was ist HTTP?

Das Hypertext Transfer Protocol (HTTP, englisch für Hypertext-Übertragungsprotokoll) ist ein zustandsloses Protokoll zur Übertragung von Daten auf der Anwendungsschicht über ein Rechnernetz. Es wird hauptsächlich eingesetzt, um Webseiten (Hypertext-Dokumente) aus dem World Wide Web (WWW) in einen Webbrowser zu laden. Es ist jedoch nicht prinzipiell darauf beschränkt und auch als allgemeines Dateiübertragungsprotokoll sehr verbreitet.

Mit Hypertext Transfer Protocol (HTTP) kommen die Nutzer eines Webbrowsers immer dann in Berührung, wenn sie die Webseiten eines entfernten Servers laden.
Das 2014 von der Internet Engineering Task Force (IETF) veröffentlichte RFC 7231 charakterisiert HTTP derweil allgemeiner als zustandsloses Protokoll, das auf Anwendungsebene angesiedelt ist und sich für verteilte, kollaborative Hypertextinformationssysteme eignet.

Wie funktioniert HTTP?

HTTP definiert für die Kommunikation zwischen Clients und Servern zweierlei Arten von Nachrichten – hierbei handelt es sich entweder um eine Anfrage (Request) oder eine Antwort (Response).

Wenn in einem Webbrowser die URL http://www.example.net/infotext.html aufgerufen wird, so wird an den Hostnamen www.example.net die Anfrage gestellt, die Ressource /infotext.html zurückzusenden.

Der Name www.example.net wird dabei zuerst über das DNS-Protokoll in eine IP-Adresse umgesetzt. Zur Übertragung wird über TCP auf den Standard-Port 80 des HTTP-Servers eine HTTP-GET-Anforderung gesendet.

HTTP

Welche HTTP-Anfragemethoden gibt es?

GET
Ist die gebräuchlichste Methode. Mit ihr wird eine Ressource (zum Beispiel eine Datei) unter Angabe eines URI vom Server angefordert. Als Argumente in dem URI können auch Inhalte zum Server übertragen werden, allerdings soll laut Standard eine GET-Anfrage nur Daten abrufen und sonst keine Auswirkungen haben (wie Datenänderungen auf dem Server oder ausloggen).

POST
Schickt unbegrenzte, je nach physischer Ausstattung des eingesetzten Servers, Mengen an Daten zur weiteren Verarbeitung zum Server, diese werden als Inhalt der Nachricht übertragen und können beispielsweise aus Name-Wert-Paaren bestehen, die aus einem HTML-Formular stammen. Es können so neue Ressourcen auf dem Server entstehen oder bestehende modifiziert werden. POST-Daten werden im Allgemeinen nicht von Caches zwischengespeichert. Zusätzlich können bei dieser Art der Übermittlung auch Daten wie in der GET-Methode an den URI gehängt werden.

HEAD

Weist den Server an, die gleichen HTTP-Header wie bei GET, nicht jedoch den Nachrichtenrumpf mit dem eigentlichen Dokumentinhalt zu senden. So kann zum Beispiel schnell die Gültigkeit einer Datei im Browser-Cache geprüft werden.

PUT

Dient dazu, eine Ressource (zum Beispiel eine Datei) unter Angabe des Ziel-URIs auf einen Webserver hochzuladen. Besteht unter der angegebenen Ziel-URI bereits eine Ressource, wird diese ersetzt, ansonsten neu erstellt.

PATCH

Ändert ein bestehendes Dokument ohne dieses wie bei PUT vollständig zu ersetzen. Wurde durch RFC 5789 spezifiziert.

DELETE

Löscht die angegebene Ressource auf dem Server.

TRACE

liefert die Anfrage so zurück, wie der Server sie empfangen hat. So kann überprüft werden, ob und wie die Anfrage auf dem Weg zum Server verändert worden ist – sinnvoll für das Debugging von Verbindungen.

OPTIONS

Liefert eine Liste der vom Server unterstützten Methoden und Merkmale.

CONNECT

Wird von Proxyservern implementiert, die in der Lage sind, SSL-Tunnel zur Verfügung zu stellen.

Was ist der Unterschied zwischen HTTP/1.1 und HTTP/2?

2015 veröffentlicht die Internet Engineering Task Force (IETF) HTTP/2, die zweite Hauptversion des nützlichsten Internetprotokolls, HTTP. Es wurde von dem früheren experimentellen SPDY-Protokoll abgeleitet.

Hauptziele der Entwicklung von HTTP/2 waren:

  • Protokollverhandlungsmechanismus – Protokollauswahl, z.B. HTTP/1.1, HTTP/2 oder andere.
  • Hohe Kompatibilität mit HTTP/1.1 – Methoden, Statuscodes, URIs und Header-Felder.

Verbesserungen der Seitenladegeschwindigkeit:

  • Komprimierung von Anfrage-Headern
  • Binäres Protokoll
  • HTTP/2-Server-Push
  • Anforderung von Multiplexing über eine einzelne TCP-Verbindung
  • Anfrage für Pipelining
  • HOL-Blockierung (Head-of-Line) – Paket-Blockierung

Antrag auf Multiplexing

HTTP/2 kann mehrere Datenanforderungen parallel über eine einzige TCP-Verbindung senden. Dies ist die fortschrittlichste Funktion des HTTP/2-Protokolls, da es Ihnen ermöglicht, Webdateien asynchron von einem Server herunterzuladen. Die meisten modernen Browser beschränken TCP-Verbindungen auf einen Server.

Header-Komprimierung

HTTP/2 komprimiert eine große Anzahl von redundanten Header-Frames. Es verwendet die HPACK-Spezifikation als einfachen und sicheren Ansatz zur Header-Komprimierung. Sowohl Client als auch Server führen eine Liste von Headern, die in früheren Client-Server-Anforderungen verwendet wurden.
HPACK komprimiert den individuellen Wert jedes Headers, bevor er an den Server übertragen wird, der dann die kodierten Informationen in einer Liste zuvor übertragener Header-Werte nachschlägt, um die vollständigen Header-Informationen zu rekonstruieren.

Browser-Kompatibilität

Die meisten modernen Browser unterstützen das HTTP/2-Protokoll vollständig:

Quelle: https://caniuse.com/#feat=http2

 

Ich hoffe ich konnte euch mit diesem Blogpost einen Einblick in das Thema „Was ist HTTP?“ geben.

Wir wünschen euch ein schönes Wochenende :)

It’s #FrontendFriday – Klassen / Modul-Diagramme in Frontend-Projekten

Hallo #FrontendFriday-Leser/in,

heute geht es um Tools, die Klassendiagramme aus Frontend-Projekten (speziell TypeScript, Angular) generieren.

Zu Beginn eines Projekt wird eine Architektur der Anwendung erstellt (die sich im Laufe des Projekts weiterentwickelt). Während des Projekts stellt sich die Frage, ob die geplante Soll-Architektur mit der tatsächlich umgesetzten Architektur übereinstimmt. Hierzu können unter anderem Klassendiagramme helfen, die automatisch aus dem entwickelten Code generiert werden.

Mehr

It’s #FrontendFriday – Google macht das Tracking transparent

Es ist bereits allgemein bekannt, dass Google versucht so viel wie möglich von unseren Aktivitäten im Netz (und auch außerhalb) zu tracken. Dennoch möchten wir mit diesem Blogpost das Bewusstsein darüber schärfen, da sicherlich nicht jedem der volle Umfang des Trackings bewusst ist und was der Einzelne dagegen unternehmen kann.

Was wird von Google getrackt?

Aufgezeichnet wird alles wofür ein Google-Konto verwendet wird. Darunter fällt nicht nur der Sucherverlauf von verschiedenen Endgeräten, sondern auch:

  • der Standort-Verlauf (sofern am Handy das GPS eingeschaltet ist),
  • Youtube-Aktivitäten:
    • Was wurde gesucht?
    • Welche Videos wurden angesehen?
    • Welche Videos wurden geliked oder disliked?
    • Welche Videos wurden kommentiert?,
  • Google-Pay Rechnungen und Einkäufe im Play-Store,
  • Reisen und Routen welche mit Google Maps ermittelt wurden

und noch einiges mehr.

Mehr

It’s #FrontendFriday – Trusted Web Activity

Endlich ist es wieder soweit – Es ist Freitag und das bedeutet It’s #FrontendFriday

Was ist Trusted Web Activity?

Trusted Web Activity ist eine neue Möglichkeit, eure Webinhalte mit Hilfe einer Chrome Activity im Vollbildmodus in euer Android-App zu integrieren.

Technisch ist eine Trusted Web Activity (kurz: TWA) eine besondere Version des Chrome Custom Tab (kurz: CCT). Dadurch könnt ihr viele Chrome-Features nutzen, die auch mit dem CCT möglich sind – nicht aber in der klassischen Webview.

Konkret sind das Funktionen wie Push-Benachrichtigungen, Hintergrundsynchronisierung, Autofill bei Eingabeformularen, Media-Source-Extensions oder die Sharing API. Ein weiterer Pluspunkt: Die TWA teilt den Cache, Speicher und Sessions mit dem installierten Webbrowser.

Wenn der Nutzer sich also in der TWA anmeldet, ist er es auch weiterhin beim Starten der Web-App im Browser – weil eben die Session geteilt wird.Mehr

It’s #FrontendFriday – Animationen mit Webkit

It’s Friday that means #FrontendFriday :)

Der ein oder andere findet Animationen auf einer Homepage passend zum Kontent interessant.

Was sind CSS Webkit-Animationen?

Eine Animation lässt die CSS-Eigenschaften ändern so wie ihr es haben wollt und auch so oft ihr es wollt.

Um die CSS Webkit-Animationen zu verwenden, muss man zunächst einige Keyframes für die Animationen festlegen.Mehr

It’s #FrontendFriday – Warum heute noch iFrames zum Standard gehören?

Es ist mal wieder Freitag und das heißt It’s #FrontendFriday. In diesem Blogpost geht es um iFrames – manche haben bestimmt sowohl gute als auch schlechte Erfahrung hiermit gemacht.

Was ist ein iFrame und was ist der Sinn und Zweck hierzu?

Ein iFrame ist das Einbetten einer HTML-Seite innerhalb einer HTML-Seite. Beispiel: Auf einer Webseite gibt es eine Menüleiste, je nach Auswahl wird in einem festgelegtem Bereich der Inhalt einer anderen HTML-Seite angezeigt (HTML-Seite innerhalb einer HTML-Seite) – Oldschool, derzeit nicht mehr state of the art.Mehr

It’s #FrontendFriday – Was sind die Standards für ein Webfrontend-Projekt?

Es ist wieder Freitag und kurz vor dem Wochenende – It’s #FrontendFriday :)

EditorConfig

EditorConfig hilft den Entwicklern konsistenze Codierungsstile zwischen verschiedenen Editoren und IDEs zu definieren und zu pflegen.

Das EditorConfig-Projekt besteht aus einem Dateiformat zum Definieren von Codierungsstilen und einer Sammlung von Text-Editor-Plugins, die es Editoren ermöglichen, das Dateiformat zu lesen und definierte Stile einzuhalten. EditorConfig-Dateien sind leicht lesbar und funktionieren gut mit Versionskontrollsystemen.

Für die Installation der EditorConfig, muss überprüft werden, ob die eingesetzte Entwicklungsumgebung (IDE) bereits ein EditorConfig Plugin installiert hat oder ob dies manuell durchzuführen ist. In Visual Studio Code muss dies manuell durchgeführt werden.Mehr