Kurze Zeitreise

Die Geschichte von HTTP beginnt 1989 mit Tim Berners-Lee, einem Physiker am CERN. Er entwickelte das HTTP-Protokoll, um die Übertragung von HTML-Dokumenten, den sogenannten Hypertexten, über das Internet zu ermöglichen. Dies war ein Schlüsselbestandteil seiner Vision vom World Wide Web, einem Informationsmanagement-System, dass es Benutzern ermöglicht, Informationen über das Internet zu teilen und zu verlinken.

Die Veröffentlichung der ersten dokumentierten Version von HTTP, HTTP/0.9, erfolgte 1991. Es war ein sehr einfaches Protokoll, die lediglich die GET-Methode unterstützte. Dies erlaubte einem Webbrowser, eine Anfrage an einen Webserver zu senden und ein HTML-Dokument zurückzuerhalten.

Die Veröffentlichung von HTTP/1.0 erfolgte 1996 als IETF RFC 1945. Es fügte weitere Methoden wie POST und HEAD hinzu und unterstützte auch HTTP-Header, was zusätzliche Metainformationen über die Anfrage und die Antwort ermöglichte.

HTTP/1.1, das heute weit verbreitet ist, kam 1997 zum Einsatz und man hat es später in RFC 2616 festgelegt. Es fügte wichtige Verbesserungen wie Persistente Verbindungen, Chunked-Übertragungen und zusätzliche Cache-Steuerung hinzu.

HTTP/2, im Jahr 2015, mit dem Ziel, die Leistung zu verbessern und die Latenz zu reduzieren. Es unterstützt Multiplexing, Priorisierung und Kompression von HTTP-Headern.

HTTPS – Hypertext Transfer Protocol Secure

Eingeführt, um die Übertragung sensibler Daten über das Internet sicherer zu machen. Es verwendet eine Verschlüsselung, um die Daten vor der Abhörung und Manipulation zu schützen.

Die Geschichte von HTTPS beginnt 1994 mit Netscape Communications, dem Unternehmen hinter dem damals populären Netscape Navigator Webbrowser. Sie führten HTTPS ein, zusammen mit dem SSL (Secure Sockets Layer) Protokoll, um sichere Transaktionen über das Web zu ermöglichen.

Das SSL-Protokoll entwickelte sich über die Jahre weiter und es fand schließlich eine Ersetzung durch das TLS (Transport Layer Security) Protokoll statt, dass man heute für HTTPS verwendet. Die aktuelle Version (Stand Juli 2023) ist TLS 1.3, dessen Veröffentlichung im Jahr 2018 stattfand.

Heute wird HTTPS von fast allen Websites verwendet, die sensible Daten übertragen, wie Online-Banking, E-Commerce und E-Mail-Dienste. Mit der Einführung von Let’s Encrypt, einer kostenlosen, automatisierten und offenen Zertifizierungsstelle, ist HTTPS auch zunehmend auf anderen Websites verbreitet, was zu einem sichereren Web für alle beiträgt. Auch Google achtet auf das Protokoll, wenn man beabsichtigt, das Ranking der Website auf Dauer zu verbessern.

Auch wenn es über die Geschichte ersichtlich ist, wofür unsere beiden Kandidaten gut sind, gehe ich nachfolgend nochmals etwas spezifischer auf die Definitionen, sowie auf die Vor- und Nachteile ein.

HTTP: Was ist das?

HTTP steht für Hypertext Transfer Protocol. Es ist ein Protokoll, das für die Übertragung von Informationen im World Wide Web verwendet wird. HTTP ist zustandslos, das bedeutet, dass jede Anfrage, die über HTTP gesendet wird, unabhängig von den vorherigen Anfragen ist.

HTTPS: Was ist das?

HTTPS steht für Hypertext Transfer Protocol Secure. Wie der Name schon sagt, ist es eine sichere Version von HTTP. Es verwendet SSL (Secure Sockets Layer) oder TLS (Transport Layer Security) Protokolle, um eine verschlüsselte Verbindung zwischen dem Client (zum Beispiel einem Webbrowser) und dem Server herzustellen. Dies bedeutet, dass alle Daten, die zwischen Client und Server übertragen werden, verschlüsselt und daher sicher sind.

Unterschiede zwischen den beiden Protokollen

Der Hauptunterschied zwischen HTTP und HTTPS ist die Sicherheit. HTTP überträgt Daten in Klartext. Das bedeutet, wenn jemand die Daten während der Übertragung abfangen kann, kann er sie leicht lesen und verstehen. HTTPS dagegen verschlüsselt die Daten, die übertragen werden. Das bedeutet, selbst wenn jemand die Daten abfängt, kann er sie nicht lesen, ohne den richtigen Schlüssel zu haben, um die Verschlüsselung zu entschlüsseln.

Ein weiterer Unterschied ist die Port-Nummer, die von den beiden Protokollen verwendet wird. HTTP verwendet Port 80, während HTTPS Port 443 verwendet.

Vorteile von HTTP

Einfachheit: HTTP ist einfacher zu implementieren, da es keine Zertifikate oder Schlüssel benötigt.

Geschwindigkeit: Da es keine Verschlüsselung gibt, ist HTTP in der Regel schneller als HTTPS.

Nachteile von HTTP

Sicherheit: HTTP ist unsicher. Jede übertragene Information, einschließlich sensibler Daten wie Kreditkartennummern und Passwörtern, kann abgefangen und gelesen werden.

Vorteile von HTTPS

Sicherheit: HTTPS ist sicher. Es schützt die übertragenen Daten vor Abhören und Manipulation.

Vertrauen: Websites, die es verwenden, sind in der Regel von Benutzern und Suchmaschinen als vertrauenswürdiger eingestuft.

SEO: Suchmaschinen wie Google bevorzugen HTTPS-Websites und ordnen sie in den Suchergebnissen höher ein.

Nachteile von HTTPS

Komplexität: Die Einrichtung von HTTPS erfordert den Kauf und die Installation eines SSL-Zertifikats. Dies kann für einige Benutzer kompliziert sein.

Leistung: Aufgrund der Verschlüsselung kann es etwas langsamer sein als HTTP.

Fazit

Die Nutzung der beiden Protokolle hängt stark von den Anforderungen und dem Schutzbedarf von Nutzerdaten ab. HTTP, obwohl weniger komplex und in manchen Fällen schneller, bietet keine Sicherheit für übertragene Daten. Jede Information, die über HTTP gesendet wird, ist anfällig für das Abfangen und den Missbrauch.

HTTPS hingegen stellt sicher, dass alle übertragenen Daten verschlüsselt und somit sicher sind. Es bietet ein höheres Maß an Vertrauen für Benutzer und kann sogar die SEO-Positionierung verbessern. Obwohl die Einrichtung der sichereren Variante eine gewisse Komplexität mit sich bringt und die Performance potenziell etwas beeinträchtigt werden kann, sind die Sicherheits- und Vertrauensvorteile in der heutigen digitalen Landschaft unverzichtbar. Aus diesem Grund fällt einem auch immer wieder das Schlosssymbol in der URL Leiste auf, die auf eine ungeschützte oder eben geschützte Website hinweist.

Insgesamt ist es klar, dass der Wechsel zu HTTPS nicht nur für Websites, die sensible Informationen verarbeiten, sondern für alle Websites von Vorteil ist. Dieser Trend zur Universalverschlüsselung ist ein positiver Schritt in Richtung eines sichereren und vertrauenswürdigeren Internets für alle Benutzer und ist in Bezug auf das Kosten-Nutzen-Verhältnis innerhalb eines vertretbaren Rahmens.

Der Beitrag http und https – Eine Reise zur Web-Sicherheit erschien zuerst auf CEOsBay.

Seit 2009 ist es ein Open-Source-Projekt, dass auf gute Testbarkeit ausgelegt ist (An dieser Stelle möchte ich auf den Test Driven Development Beitrag verweisen 😉 ). Dies bietet ein MVC/MVVM-Framework, welches bidirektionales Databinding unterstützt.

MVC/MVVM?

MVVM teilt die verschiedenen Komponenten des Entwicklungsprozesses in drei Kategorien auf. Model, View und ViewModel. In der Regel handelt es sich dabei um Code-Markup oder grafische Benutzeroberflächen (GUI). MVC (Model-View-Control) ist eine Methode, mit der Entwickler Programme in diese drei Komponenten aufteilen. Auf diese Weise lassen sich geschäftliche Anforderungen und Regeln von der Art und Weise unterscheiden, wie Benutzer mit der Anwendung arbeiten. Gerne gehe ich in einem zukünftigen Beitrag näher darauf ein.

Unterschiede zwischen Angular und AngularJS

Angular ist wie bereits erwähnt der Nachfolger von AngularJS. Von Grund auf neu geschrieben, unterscheiden die beiden sich grundsätzlich und in vielerlei Hinsicht.

• Angular kennt keine „scopes“ oder Controller, sondern verwendet eine Hierarchie von Komponenten als zentrales Architekturkonzept.
• Angular hat eine einfachere Syntax für Ausdrücke: Mit „[ ]“ werden Bindings für Eigenschaften und mit „( )“ werden Bindings für Events erzeugt.
• Mobile-First-Ansatz: Die Anforderungen von mobilen Plattformen haben besondere Priorität.
• Modularität: Module können Funktionalitäten auslagern, sodass Code leichtgewichtiger und schneller sein kann.
• Es liegt lediglich die Unterstützung moderner Browser vor, wodurch man weniger Workarounds wegen Browser-Kompatibilitätsproblemen benötigt.
• Angular empfiehlt die Verwendung von TypeScript. Es bietet Klassenbasierte objektorientierte Programmierung, Statische Typisierung und Generics.
• TypeScript ist eine Obermenge von ECMAScript 6 (ES6) und ist rückwärts kompatibel mit ECMAScript 5, damit JavaScript. Angular bietet somit auch die Vorzüge von ES6: (Lambdas, Iteratoren, for…of-Schleifen, Generatoren im Stil von Python, Reflexion)
• Verbesserte Dependency Injection: Bindings ermöglichen die Benennung von Abhängigkeiten.
• Directives dienen dem Zweck, dass Aussehen und Verhalten eines Tags dynamisch zu verändern.
• Dynamisches Laden ist möglich
• Asynchrone Kompilierung von Templates
• Einfacheres Routing
• Kontroller und $scope sind durch Komponenten und Directives ersetzt. Eine Komponente ist eine Directive mit einem Template.
• Reaktive Programmierung mit RxJS

Angular für konventionelle Websites?

Angular ist ideal für Websites mit dynamischem Inhalt, jedoch nicht für kleine Seiten mit statischem Inhalt geeignet. Die Implementierung von Angular erhöht in diesem Fall lediglich die Gesamtgröße des Projekts und folglich auch die Ladezeiten. Dies ist eines der Hauptgründe, warum man Angular nicht für Landing Pages und Websites mit statischem Inhalt verwenden sollte. Davon abgesehen ist Angular weit davon entfernt, SEO-freundlich zu sein. Und im Zeitalter von Search-Engine-Optimization gibt es weitaus bessere Alternativen, um dieses Ziel zu erreichen. Auch ist Angular keine gute Lösung für kurzfristige Projekte oder Start-ups mit begrenzten Ressourcen. Die Komplexität des Front-Ends kann in relativ kurzer Zeit immense Ausmaße annehmen und später schwer zu bändigen sein.

Das Hauptanwendungsgebiet von Angular bestand darin, Einzelseiten-Webanwendungen zu erstellen. Aus diesem Grund verfügt es über eine breite Palette von Werkzeugen für die SPA-Entwicklung. Darüber hinaus ist es eine ideale Technologie für Websites, bei denen sich der Inhalt auf der Grundlage des Nutzerverhaltens und der Präferenzen der Benutzer dynamisch anpasst. Dependency Injections stellen sicher, dass im Falle der Änderung einer Komponente andere Komponenten, die mit ihr in Zusammenhang stehen, automatisch mitgeändert werden.

Die 3 verschiedenen Ladetechniken

Bei der Arbeit mit Angular bieten sich 3 verschiedene Ladetechniken an. Diese sind das Eager Loading, Lazy Loading und Preloading, auf die ich nachfolgend eingehe.

Eager Loading (Eifriges Laden)

Der Abruf aller benötigten Daten möglichst wirksam und umgehend bzw. sofort. Hierzu gibt es im Grunde genommen nicht viel anzumerken. Die Technik ist zwar effizient, doch die Tatsache, dass man eventuell nur einen bestimmten Teil der Daten benötigt aber dennoch alle Daten lädt, kann sich schnell zu einem Nachteil entwickeln, wenn es sich um große Datenmengen handelt.

Lazy Loading (Langsames Laden)

Die am wenigsten eifrige bzw. nicht eifrige Ladetechnik. Wenn man faul ist, tut man so lange nichts, bis man es wirklich muss oder dazu gezwungen wird. Man stelle sich vor, dass die Anwendung drei Bereiche hat. Home, Admin und das Dashboard. Auf den Home-Bereich wird ständig zugegriffen, auf den Dashboard-Bereich die meiste Zeit. Der Admin-Bereich wird jedoch nur von einigen wenigen Nutzern verwendet. Folglich kann man die Admin-Route nach und nach laden. So lange niemand auf die Idee kommt, auf den Verwaltungsbereich der Anwendung zu klicken, wird der damit verbundene Code auch nicht ausgeführt bzw. nicht geladen.

Die Mehrheit der Nutzer lädt den Code für den Verwaltungsbereich schlichtweg nie. Wenn man also Lazy Loading verwendet, kann man grundsätzlich schneller auf die Anwendung zugreifen, da man nicht so viel Code vom Server laden muss. Dies hängt damit zusammen, dass das ORM-Werkzeug (Objekt-Relationales Mapping-Werkzeug) jeglichen Zugriff auf alle Objektreferenzen »abfangen« muss, um hier bei Bedarf die verbundenen Objekte nachladen zu können. Dieses Abfangen erfolgt durch die Verwendung bestimmter Klassen für Einzelreferenzen und Mengenklassen. Der Unterschied zwischen den ORM-Werkzeugen liegt darin, ob der Entwickler diese Klassen explizit im Code verwenden muss oder ob das ORM-Werkzeug diese beim Kompilieren oder zur Laufzeit austauscht.

Preloading (Vorladen)

Die „somewhere-in-between“ (Irgendwie Zwischendrin) Ladetechnik. Beim Preloading macht man im Grunde genommen dasselbe wie beim Lazy Loading, nur ein bisschen anders.

Anhand des Home, Dashboard und Admin Beispiels lässt sich dies folgendermaßen darstellen. Die Startseite braucht man immer. Also lädt man diese schnell bzw. eifrig. Der Admin-Bereich wird nur selten und nur von wenigen Benutzern benötigt, also kann man diesen erst einmal etwas vernachlässigen bzw. „lazy“ laden. Aber das Dashboard ist nicht das Erste, was ein Benutzer sieht, also kann es grundsätzlich erst einmal warten. Doch das Dashboard ist gleichzeitig etwas, dass die meisten der Benutzer irgendwann sehen möchten. Also sollte es zumindest dann zur Verfügung stehen, wenn das Laden des Home-Bereichs fertiggestellt ist. Nach jeder erfolgreichen Navigation sucht der Router in seiner Konfiguration nach einem nicht geladenen Modul, das er vorladen kann.

Der Home-Bereich wird erfolgreich geladen und unmittelbar danach wird der Dashboard-Bereich im Hintergrund geladen.

Welche Ladetechnik kann/soll ich nun verwenden?

Wie bei vielen Angelegenheiten in der IT kommt es hier auf den spezifischen Anwendungsfall und den zur Verfügung stehenden Ressourcen an. Wenn man nicht genau weiß, ob man die zusätzlichen Daten benötigt oder nicht, dann kann es ungünstig sein, sie direkt zu laden. Es kann aber auch ungünstig sein, sie später nachladen zu müssen. Entscheidend bei der Entscheidung ist die Wahrscheinlichkeit, ob und wann man die jeweiligen Daten für wen benötigt, um welche Datenmenge es sich handelt und ob man die Daten später einfach nachladen kann. Zu beachten ist, dass man ein automatisches Nachladen, nach einer Serialisierung, in der Regel nicht mehr initiieren kann.

Release-Frequenz

Angular Releases folgen dem Konzept des Semantic Versionings. Man unterscheidet zwischen Major-, Minor- und Bugfix-Releases. Alle 6 Monate gibt es eine neue Major Release. Major Releases enthalten signifikante neue Features, sind aber nicht abwärtskompatibel. Der Umstieg auf eine neuere Major Release benötigt daher oft Update-Scripts, Refactorings des bestehenden Codes, weitere Tests und das Erlernen neuer APIs. Zu jeder Major Release gibt es ein bis drei Minor Releases. Patch Releases und Pre-Releases gibt es fast jede Woche.

Support

Der Support von Major Releases beträgt typischerweise 18 Monate lang nach Release. Davon 6 Monate aktiv. Aus diesem Grund gibt es in regelmäßigen Abständen Minor Releases und Patch Releases. Es folgt ein 12-monatiger Long Term Support (LTS) in Form von Patch-Releases, ausschließlich zur Behebung kritischer und sicherheitsrelevanter Fehler.

Fazit

Bei der Verwendung von Angular sollte von vornherein klar sein, dass die Realisierung eines Projekts mit der Abnahme vieler Entscheidungen über Architektur und des Renderings verbunden ist. Dies hat den Vorteil, dass sich das Projektteam zu 100% auf die Umsetzung von Features konzentrieren kann und nicht die grundlegende Architektur eigenständig aufbauen muss.

Durch die sehr einheitliche Struktur von Angular Anwendungen lassen sich gute Entwickler sehr schnell in das Projekt integrieren, da Angular Anwendungen stets einer gewissen Struktur folgen. Dies vereinfacht die Skalierbarkeit des Teams als auch des Projektes selbst als vergleichsweise bei Individuallösungen der Architektur in anderen Frameworks.

Generell ist es für Enterprise Projekte sicherlich eine gute Wahl. Dennoch sollte man andere Frameworks wie React und VueJS nicht außer Acht lassen, über die ich in den kommenden Tagen schreibe.

Der Beitrag Angular – Entfaltung des vollen Potenzials von Webanwendungen erschien zuerst auf CEOsBay.

Was ist SEO?

SEO (englisch für Search Engine Optimization), die Suchmaschinenoptimierung. So bezeichnet man alle Maßnahmen, die sich dazu eignen, die Platzierung einer Website in den organischen Suchergebnissen von Suchmaschinen zu verbessern und damit den Traffic zu steigern. Man kann den Begriff unter Marketingmaßnahme oder Marketingstrategie ablegen.

Ausgezeichnet wird diese Marketingstrategie einerseits durch den bedingt hohen Wert des Suchmaschinen-Traffics über die benutzten Worte. Andererseits ist SEO die einzige Marketingmaßnahme, die Traffic generiert, ohne viel Geld investieren zu müssen. In meinem Fall ist es eine gute Übung und es trägt seinen Teil dazu bei, dass relevante Informationen die relevanten Personen erreichen, um eine gewisse Hilfestellung oder einen schnellen Einstieg, in das ein oder andere Thema zu ermöglichen.

Wichtige Bestandteile der Suchmaschinenoptimierung sind das Erstellen bzw. Aufbessern relevanter Inhalte (Content), der Einsatz entsprechender Schlüsselbegriffe (Keywords), Title-Tags oder Meta-Descriptions sowie das interne Verlinken auf der Website. Besonders Links von anderen Seiten, die auf die eigene führen, sind für ein gutes Ranking unabdingbar.

Was sind Title Tags?

Der Title Tag, auch Meta-Title oder nur Title genannt, ist ein HTML-Element, welches im Header-Bereich einer Webseite eingebunden wird und den Seitentitel einer Webseite definiert.

Was ist die Meta-Description bzw. Meta-Beschreibung?

Eine Meta-Beschreibung ist ein HTML-Element, dass eine kurze Zusammenfassung einer Webseite enthält. Der Meta-Description-Tag einer Webseite wird als Teil des Such-Snippets auf der SERP angezeigt und soll dem Benutzer eine Vorstellung vom Inhalt der Seite und dessen Bezug zu seiner Suchanfrage vermitteln.

Was ist SERP

Als Search Engine Result Page, kurz SERP, deutsch Suchergebnisseite, wird die Darstellung der Suchergebnisse in Suchmaschinen wie Google bezeichnet.

Google versucht Websites mit Hilfe eines Algorithmus nach den Maßstäben eines menschlichen Lesers zu evaluieren. Nach diesen Kriterien wird auch das Ranking definiert.

Fazit

Suchmaschinenoptimierung kann potenziell günstig die Reichweite steigern. Ist man kommerziell unterwegs und will damit profitablen Traffic erreichen, also den Umsatz eines Unternehmens steigern, ist zu beachten, dass es Agenturen gibt, die sich rein auf SEO spezialisiert haben und damit die Konkurrenz relativ stark sein kann. Vor allem ist zu beachten, dass die Algorithmen und die künstliche Intelligenz sehr schnell dazulernen und die Ansprüche der Suchmaschinen an hochwertigen Content ebenfalls steigt. Dies führt dazu, dass SEO immer teurer und damit weniger profitabel werden kann.

Bereits heute nutzen mehr Menschen mobile Endgeräte statt stationärer Computer. Auch die Suchmaschinen, besonders Google, hat dies in seinen Mitteilungen explizit zu Wort gebracht. Demnach fallen jetzt schon viele Webseiten aus dem Raster, wenn die Mobile Konformität nicht gegeben ist. Des Weiteren ist SEO keine einmalige Sache. Es muss immer wieder frischer Content generiert werden, um mehr Themen abzubilden, die gefragt sind.

Für kleinere Projekte bieten sich Hilfsmittel wie Open Source Lösungen oder kommerzielle Plug-Ins an. Ansonsten gibt es, wie bereits angesprochen Agenturen, die sich explizit darum kümmern. Ein paar dieser Tools werde ich gerne in den kommenden Beiträgen vorstellen.

Der Beitrag SEO – Online-Erfolg durch optimierte Sichtbarkeit erschien zuerst auf CEOsBay.