Mein neuer Web-Technologie-Stack für 2020

Erinnern Sie sich an die Tage, als Web-Technologie-Stapel einfach waren? Wann könnten Ebenen dieser Stapel in Form einer Vier-Buchstaben-Reduktion wie LAMP, LEMP oder LEPP bezeichnet werden? Wenn alles, was zum Erstellen und Verwalten von Websites erforderlich war, auf ganz normale Hardware, auf Open Source-Software und auf hartnäckiges Erreichen des Ziels reduziert wurde?

Meine erste erfolgreiche Site, jetzt ein altes Projekt aus dem Jahr 1999, wurde mit Technologien erstellt, die an einer Hand gezählt werden können: HTML4, CSS2, JavaScript3 und Apache 1.1. All dies drehte sich auf einem Server mit Linux 2.0. Die Website umfasste 38.000 Seiten. Und heute, nach 20 Jahren, stellt er sie immer noch aus .



Seitdem hat sich alles verändert. Dies gilt auch für Web-Technologie-Stacks. Jetzt sind sie überhaupt nicht mehr so ​​wie früher.

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, möchte darüber sprechen, wie er vom vollständigen Stapel zum 2020-Stapel übergegangen ist. Einige Technologien wurden auf dieser Reise unerwartet zu Favoriten, andere verloren ihre frühere Anziehungskraft.

2020 Web Stack

2020 beginnt ein neues Jahrzehnt. Dies ist die Zeit, um über den neuen Web-Technologie-Stack zu sprechen.

Wie sieht der 2020-Stack aus? Ich muss sagen, dass dies sehr stark von dem beeinflusst wird, was der Website-Entwickler erreichen möchte. Die Auswahl der richtigen Ebenen hängt in hohem Maße von der für das Projekt erforderlichen Skalierbarkeit ab.

Ich interessiere mich besonders für kleine Websites. Diejenigen, die sich auf einem virtuellen Server wohlfühlen. Diese Sites benötigen keine Load Balancer oder persistenten Datenspeicher. Dies ist die CMS-Nische, die WordPress schon lange besetzt hat. Das Herzstück ist jedoch kein minimalistischer Server. Stattdessen handelt es sich um ein System, das einem konstanten Verkehrsfluss standhält, ohne dass die Leistung in Spitzenzeiten automatisch erhöht werden muss.

Jetzt verwende ich für die Entwicklung und Unterstützung von Projekten in meinem Interessengebiet einen Technologie-Stack, der aus 12 Ebenen besteht.

▍1. Cloud-Anbieter

Die Basis meines Stacks ist ein Cloud-Anbieter, der die Bedürfnisse derjenigen berücksichtigt, die es gewohnt sind, die Umgebungen zu optimieren, in denen ihre Webprojekte ausgeführt werden. Ich benutzte meine eigenen Server, bis die Kosten für deren Support zu hoch wurden. Mieten Sie Platz im Server-Rack, eine dedizierte IP-Adresse, um die erforderliche Bandbreite sicherzustellen ... All dies trägt zu den monatlichen Kosten eines physischen Servers bei. Aber die wahre Ransomware sind die Stromkosten. Cloud-Anbieter sind viel billiger als die 1,25 USD pro Tag, die ich an den Stromversorger gesendet habe. Durch die Ablehnung solcher Ausgaben konnte ich Hunderte von Dollar pro Jahr einsparen.

▍2. Fedora Linux Distribution mit SELinux

Sicherheit ist das, was uns alle wirklich stört. SELinux kann mit einem leistungsstarken Sicherheitssystem verglichen werden, das unter Linux ausgeführt wird. Wenn wir eine gut konfigurierte iptables-Firewall hinzufügen, wird sich herausstellen, dass der Websitebesitzer nachts ruhig schlafen kann. Wenn Sie sich nicht sicher sind, ob Sie all dies benötigen, führen Sie das folgende Experiment durch. Stellen Sie einen neuen Server bei Ihrem bevorzugten Cloud-Anbieter bereit und beobachten Sie, wie er bald angegriffen wird. Ich habe gesehen, wie Brute-Force-Angriffe auf neue Server mit SSH-Anmeldeversuchen weniger als 10 Minuten nach ihrer Erstellung begannen.

▍3. Webserver Read Write Serve

Ich verwende den Read Write Serve-Webserver mit TLS-Zertifikaten von LetsEncrypt. Früher war ich ein Apache-Fan. Es dauerte nur ein paar Minuten, um neue Websites einzurichten und zu starten. Aber seit ich von PHP auf JavaScript umgestiegen bin, musste ich Apache vergessen. Der Express-Server schien mir ein extrem einfaches Werkzeug zu sein, aber nur bis ich versuchte, die gesamte Funktionalität, die Apache mir gab, darin wiederzugeben. Wir sprechen über den Mechanismus der Inhaltskoordinierung, über das bedingte Zwischenspeichern, über die Datenkomprimierung, über das Umschreiben von URLs für SEO, über CORS und über Richtlinien zum Schutz von Inhalten. Infolgedessen habe ich auf den Read Write Serve-Server gewechselt, auf dem alle diese Funktionen standardmäßig vorhanden sind.

▍4. Node.js-Anwendungslaufzeit

Die Node.js-Umgebung ist für die auf dem Server ausgeführte Anwendungslogik verantwortlich. Es besteht das Gefühl, dass es im NPM-Ökosystem Pakete für alle Gelegenheiten gibt. Daher erwies sich die Aufgabe, aus den verfügbaren Paketen genau das zusammenzustellen, was ich brauchte, und dies alles auf Read Write Serve zu starten, als einfach und verständlich. Um die Arbeit von allem, was für ein modernes Webprojekt notwendig ist, zu organisieren, müssen Sie keine übermäßigen Anstrengungen unternehmen. Dies bedeutet, E-Mails zu senden, mit Zahlungsdiensten zu arbeiten, auf Datenbanken zuzugreifen und alles andere, was die Arbeit mit Server-APIs impliziert.

▍5. MariaDB-Datenbank

Ich benutze den MariaDB-Datenbankserver. Dies ist ein Zweig von MySQL, der von der Open-Source-Community umbenannt und gemastert wurde. Wenn ich unstrukturierte JSON-Daten speichern muss, verwende ich PostgreSQL. Tatsache ist, dass ich auf diese Weise Anforderungen direkt für bestimmte JSON-Eigenschaften ausführen kann. Dies ähnelt MongoDB, basiert jedoch auf der bekannten SQL-Syntax.

▍6. HTTP / 2

Ich verlasse mich auf HTTP / 2-Funktionen mit dauerhaften Verbindungen und Stream-Multiplexing, um zwischen Teilen von Anwendungen zu kommunizieren. Dies sind zwei Ergänzungen zum respektablen HTTP / 1.1-Protokoll. änderte meine Herangehensweise an die Bildung von Dokumenten. Erstens ist das Problem des Blockierens des Warteschlangenanfangs verschwunden. Infolgedessen sind keine Sprite-Listen mehr erforderlich, auch wenn ich Dutzende kleiner Bilder habe. Zweitens müssen jetzt keine JavaScript- und CSS-Dateien mehr optimiert werden, indem sie zu Paketen zusammengefasst werden. Nachdem die Client-Server-Verbindung hergestellt wurde, werden alle diese kleinen Dateien ohne Unterbrechung über diese Verbindung übertragen.

▍ 7. HTML-Vorlage mit blauer Phrase

Blue Phrase ist ein Vorlagensystem, mit dem Sie HTML-Strukturen in kompakter Form genau beschreiben können. Für mich sind die Zeiten eines unlesbaren Hashs von HTML-Code und der Diskrepanzen zwischen dem Öffnen und Schließen von Tags vorbei. In Vorlagen verwende ich normalerweise nur eine kleine Anzahl von Variablen (Titel, Beschreibung, Schlüsselwörter, SEO-Daten, Ladebildschirm, Datum usw.) und platziere sie deklarativ in einer Vorlage.

▍8. Schreiben von Seitencode mit Read Write Doc

Wenn ich neue Seiten erstelle, konzentriere ich mich auf das, was ich auszudrücken versuche, nicht auf das Design. Um dieses Problem zu lösen, verwende ich Read Write Doc. Dieses Tool hilft mir, Geschäfte zu machen, ohne von irgendetwas abgelenkt zu werden. Ich verwende es auch dann, wenn geplant ist, dass das, woran ich arbeite, auf Medium veröffentlicht wird (und es gibt einen ausgezeichneten Online-WYSIWYG-Editor). Ich betrachte mich als ein Veteran in der Webentwicklung, daher habe ich mich an monospaced Schriftarten gewöhnt und sichergestellt, dass meine Hände auf der Tastatur sind und nicht zwischen Tastatur und Maus hin und her rasen. In jedem Fall kann ich mit einer einfachen Tastenkombination zwischen Anzeige- und Bearbeitungsmodus wechseln, wenn ich sehen möchte, woran ich mit angewendetem CSS arbeite.

▍ 9. Standard-Webkomponenten

Im Bereich der Arbeit mit Webkomponenten halte ich mich an die W3C-Standards. Dies sind Schatten-DOM, Benutzerelemente, HTML <template> , ECMAScript-Module. Auf diese Weise kann ich alles, was ich brauche, vollständig in die Pakete integrieren, die ich über NPM verteile. Für mich war der größte Vorteil die Isolationsstufe, die das Schatten-DOM bietet. Dadurch konnten wir den CSS-Fluch loswerden, der durch die Verschmutzung von Namespaces verursacht wurde.

▍ 10. JavaScript für Client-Skripte

Zum Schreiben von Clientskripten verwende ich modularen objektorientierten JavaScript-Code. Ich wende die neuen Funktionen des ECMAScript-Standards nur an, wenn deren Unterstützung in den neuesten Browser-Versionen enthalten ist. Das heißt, ich füge sie gerade in mein Arsenal ein, wenn ich sehe, dass alle wichtigen Browser auf caniuse.com "grün" werden . Ich vermeide Polyfills.

11. CSS-Styling

CSS ist Typografie und Seitenlayout. Typografie beginnt mit der richtigen Schriftauswahl. Das Wichtigste für mich ist die gute Lesbarkeit des Textes. Kürzlich habe ich es mir zur Regel gemacht, die Dateien der verwendeten Schriften auf meinem eigenen Server zu hosten. Dies schützt meine Ressourcen vor möglichen Blockierungen, die durch die begrenzte Bandbreite eines Drittanbieter-Dienstes verursacht werden. Zum Beispiel verwende ich ungefähr die folgenden Konstruktionen:

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

Ein zusätzlicher Vorteil dieses Ansatzes besteht darin, dass ich mich vollständig von dem als FOUT bekannten Problem entledigt habe (Aufblitzen von nicht formatiertem Text, Aufblitzen einer regulären Schriftart).

▍ 12. Grafikressourcen mit GIMP und InkScape vorbereiten

Und schließlich benutze ich für die Vorbereitung der Grafikressourcen einige Editoren. Ich bereite Bitmap-PNG-Bilder mit GIMP und Vektor-SVG-Materialien mit InkScape vor.

Technologien, die ihre frühere Anziehungskraft verloren haben

Einige der Tools, die ich vorher wirklich mochte, sowie einige, die ich nur flüchtig mochte, sind nicht mehr in meinem Stapel von Webtechnologien enthalten.

• Adobe Photoshop und Illustrator. Dies sind zwei großartige Anwendungen, die seit vielen Jahren alle meine Grafikanforderungen erfüllen. Ich verabschiede mich leider von ihnen und danke ihnen, dass sie bei mir sind. Jetzt brauche ich nur noch ihre kostenlosen Open Source-Ersatzprodukte.
• jQuery Diese Bibliothek wurde unnötig, als die Cross-Browser-Kompatibilitätskriege endeten. Die wertvollste jQuery-Funktion war für mich die Selektorsyntax. Es stellte sich heraus, dass es so gefragt war, dass es 2009 als querySelector zum DOM querySelector .
• Ajax. Dieser Vorläufer von Web 2.0. jetzt in ein Relikt der Vergangenheit verwandelt. Die XMLHttpRequest API wird durch eine moderne und einfachere fetch API ersetzt, und JSON ersetzt XML.
• SASS / SCSS. Ich gebe zu, dass das Schreiben von CSS-Code ohne Variablen ineffizient war, was zur Folge hatte, dass viele Leute SASS mochten. Und die Module waren auch ein sehr wichtiges Merkmal. Aber um dies alles in JavaScript zu nutzen, musste man am Ende zu viel Zeit und Mühe aufwenden. Gleichzeitig mit der Entwicklung von Hilfswerkzeugen für die Arbeit mit Stilen blieb auch der CSS-Standard nicht stehen. Verschiedene Tools zur Konvertierung von CSS-Code gehören damit allmählich der Vergangenheit an.
• BEM. Das bei der Bildung von CSS-Klassennamen verwendete Benennungsschema für BEM-Entitäten (Block, Element, Modifikator) löst das Problem mit dem globalen Namespace. Dafür muss man aber mit sehr langen Designs bezahlen. Ich wechselte zu Eltern / Kind-Selektoren in semantischen Elementen und bevorzuge einen einfacheren Zugang zu Bezeichnern und Klassennamen.
  
  Zum Beispiel:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• Schriften Georgia und Verdana. Diese beiden Schriften stehen seit vielen Jahren an der Spitze meiner Schriftenbewertung. Ich konnte mich auf ihre Zugänglichkeit und ihre Lesbarkeit verlassen. Aber nachdem die @font-face Regel aufgetaucht war und sich die Open-Source-Schriften verbreitet hatten, begann ich, ähnliche Schriften zu verwenden.
• Babel, Grunzen, Schlucken, Browserify, WebPack. Die ersten vier Punkte auf dieser Liste werden wahrscheinlich niemanden überraschen. Aber warum hat mein Webpack Webpack verlassen? Die Tatsache, dass dieser Bundler für mich an Relevanz verloren hat, hat einige Gründe, auf die ich mich genauer konzentrieren werde:
  
  
  1. Vor HTTP / 2 mit Unterstützung für dauerhafte Verbindungen und Stream-Multiplexing waren wir auf die Funktionen dieser Tools zum Erstellen von Anwendungsressourcenpaketen angewiesen. In einer Welt, in der es HTTP / 2 gibt, bringt uns die Bündelung jedoch nichts.
  2. Der ECMAScript 2015-Standard war ein neues Wort in der JavaScript-Entwicklung, und jeder wollte die neuen Funktionen der Sprache sofort nutzen, wenn er das Licht der Welt erblickte. Es gab jedoch ein Problem. Mit neuen Funktionen geschriebener Code wurde von Browsern nicht unterstützt. Daher musste es in ECMAScript 5-Code umgesetzt werden. In diesem Geschäft vertrauten wir auf Babel, dessen Anwendung ein Standardschritt bei der Vorbereitung von Webprojekten für die Veröffentlichung war. Heute sind alle neuen Sprachfunktionen, die ich benötige, buchstäblich überall verfügbar. Infolgedessen brauche ich Babel nicht mehr.
  3. Vor der Möglichkeit des dynamischen Imports von Modulen in Browser musste der Code in das CommonJS-Format übersetzt werden. Jetzt unterstützen die meisten gängigen Browser <script type='module'> (und Edge 76+ wird bald ausgeführt). In Kürze können wir daher die ECMAScript-Module begrüßen und uns von allen anderen verabschieden.
• JSX. Ich verstehe diejenigen nicht, die glauben, dass JSX gut ist. Und "Aber du bist daran gewöhnt" für mich - kein Argument.
• Funktionale Programmierung. Ich beschränkte die Verwendung der funktionalen Programmierung in meinem Code auf einfache einzeilige Konstrukte wie numbers.sort((a, b) => a - b); . Für alles andere verwende ich objektorientierte Programmierung.

Technologien, die zu Favoriten geworden sind

Hier ist eine Übersicht über die Ebenen meines Technologie-Stacks, von denen ich besonders beeindruckt bin:

• JavaScript-Module. Module haben sich im serverseitigen JavaScript-Code bewährt. Und ich bin sehr froh, dass ich sie endlich auf der Clientseite einsetzen kann.
• Objektorientiertes JavaScript Hier sind fünf goldene Regeln für die objektorientierte JavaScript-Entwicklung:
  
  
  1. Ersetzen Sie anonyme Objekte durch benannte Klassen.
  2. Deklarieren und initialisieren Sie alle Eigenschaften von Objekten in den Konstruktoren.
  3. Schützen Sie Objekte unmittelbar nach der Erstellung vor Änderungen.
  4. Deklarieren Sie Methoden mit unveränderlichen Signaturen.
  5. Binden Sie this an jeden Rückruf.
• Blaue Phrase Mit diesem System kann ich deklarativ vorgehen, wenn ich Vorlagen erstelle und verschiedene Materialien vorbereite. Es macht das Schreiben von qualitativ hochwertigem HTML-Code zum Vergnügen.

Zusammenfassung

Zuvor konnten Web-Technologie-Stacks durchaus nur vier Elemente enthalten. Aber unter modernen Bedingungen werden Sie niemanden mit einem Stapel von zwölf Levels überraschen. Ich möchte nicht wie eine Person aussehen, die bekannte Wahrheiten ausspricht, aber dennoch, wenn ich dieses Material vervollständige, werde ich sagen, dass jeder Entwickler seinen eigenen Stack haben kann. Und es wäre äußerst interessant für mich, zu erfahren, was andere als ihren „idealen Stapel von Webtechnologien von 2020“ bezeichnen werden.

Sehr geehrte Leser! Und was ist Ihr - Ihr Stapel von Web-Technologien im Jahr 2020?

Haftungsausschluss des Übersetzers: Blue Phrase, Read Write Serve und Read Write Doc - Technologien, die vom Autor dieses Artikels entwickelt wurden. Download und Installation erfolgen auf eigene Gefahr.