Umfassen Sie die Plattform

Was können die Leute also ihre Website verbessern? Um das zu beantworten, machen wir einen Schritt in die Vergangenheit zurück…

Das Jahr ist 1998 und das Web steigt. Um einen Überblick über die Architektur des WWW auf hoher Ebene zu geben, veröffentlicht Tim Berners-Lee-ja, dass Tim Berners-Lee-ein Papier mit dem Titel „Webarchitektur aus 50.000 Fuß“ veröffentlicht. Der Bericht umfasst viele Dinge: Inhaltsverhandlungen, das semantische Web, HTML, CSS und coole URIs (die sich nicht ändern).

In dem Artikel stellt Berners-Lee auch sehr früh einige Designprinzipien fest. Eines dieser Prinzipien ist die „Regel der geringsten Macht“.

Die Regel der geringsten Macht ist so:

Bei der Gestaltung von Computersystemen wird häufig eine Wahl zwischen der Verwendung einer mehr oder weniger leistungsstarken Sprache für die Veröffentlichung von Informationen, zum Ausdruck von Einschränkungen oder zur Lösung von Problemen konfrontiert. […] Die „Regel der geringsten Macht“ schlägt vor, die für einen bestimmten Zweck geeignete am wenigsten leistungsstarke Sprache zu wählen.

Wir haben drei Hauptsprachen im Internet für das Frontend:

Html

Beschreibt semantisch den Inhalt

CSS

Steuert die Präsentation und das Layout

JavaScript

Fügt Interaktivität und Verhalten hinzu

Die Regel der geringsten Macht deutet darauf hin, dass es so viel wie möglich mit HTML versucht und zu tun hat, bevor er auf CSS zurückgreift. Sobald CSS nicht mehr ausreicht, greifen Sie nach JavaScript - aber nur, wenn Sie es wirklich müssen.

Wie Derek Featherstone es schön ausdrückte:

Im Web-Front-End-Stack-HTML, CSS, JS und ARIA-sollten Sie ein Problem mit einer einfacheren Lösung, die im Stapel niedriger ist, lösen. Es ist weniger zerbrechlich, narrensicherer und funktioniert einfach.

? Halten Sie sich auf: Dies bedeutet nicht, dass Sie Schriftgrößen und Farben über Markup festlegen sollten - eine Sache, die wir in den „alten“ Tagen des Webs getan haben. Ein typisches Beispiel: Eine der Regeln, die in Berners-Lees Stück behandelt werden, ist die Trennung von Form und Inhalt.

Das kaputte Netz

Es ist fast 25 Jahre her, seit Berners-Lee diesen Artikel veröffentlicht hat. Doch irgendwie ist die von ihm gesendete Nachricht nicht durchgestanden, und viele Entwickler - aber nicht alle - sind sich dessen nicht bewusst. Nehmen wir diese Situation Drew Devault vor nicht allzu langer Zeit:

Mein Browser war in den letzten 28 Jahren vollkommen kompetent darin, HTML -Formulare einzureichen, aber aus irgendeinem dummen Grund hat ein Entwickler beschlossen, das Formular in JavaScript neu zu implementieren, und jetzt kann ich meine Stromrechnung nicht bezahlen, ohne die Entwickler -Tools zu eröffnen.

Leider ist dies kein isolierter Fall, sondern ein bekanntes Phänomen. Allzu oft sehe ich Websites und Bibliotheken, die versuchen, klug zu sein oder das Rad neu zu erfinden - vor allem, indem sie eine Reihe von JavaScript darauf werfen. Bei ihrem Versuch, dies zu tun, erreichen sie genau das Gegenteil von dem, was sie anstrichen: Diese Websites werden weniger funktional, weniger zugänglich oder - noch schlimmer -, funktionieren unter bestimmten Bedingungen überhaupt nicht.

Während ein Formular ein bekanntes Beispiel sein könnte, gibt es mehr Situationen, in denen die Anwendung der Regel der geringsten Macht bessere Ergebnisse liefert:

• Glatte Scrollen?
  ? KEINE Notwendigkeit von JavaScript, da CSS das kann.
• Müssen Sie Fehler von Ihrer JSON-basierten API kommunizieren?
  ? Verwenden Sie keinen HTTP 200 mit {Fehler: True} im Antwortkörper, sondern einen HTTP -Statuscode, um den Fehler stattdessen zu kommunizieren.
• Schließen eines über JavaScript?
  ? Ein
  Element mit [method = "Dialog"] funktioniert gut.
• Möchten Sie faule Bilder laden?
  ? Das wird bald von allen modernen Browsern direkt im HTML -Markup mit einem Attribut unterstützt.
• Ein anpassbares ?
  ? Das ist in der Entwicklung, während wir sprechen.
• Möchten Sie Animationen mit einem Scroll-Offset verknüpfen?
  ? Eine externe JavaScript -Bibliothek ist nicht erforderlich, da es sich jetzt um eine native API von Browser handelt, und bald auch etwas, das nur mit CSS durchgeführt werden kann.
• Müssen Sie bestimmte Zeichen in Formeingängen verhindern?
  ? Deaktivieren Sie kein Einfügen, sondern wählen Sie stattdessen einen richtigen Eingangstyp und/oder verwenden Sie das Musterattribut.
• Benötigen Sie kollabierende Abschnitte?
  ?
  und

  sind deine Freunde.
• und so weiter…

In all diesen Beispielen können wir einige Funktionen von einem Obermaterial in eine untere Schicht bewegen. Berners-Lee wäre stolz auf uns.

Widerstandsfähigkeit

Durch die Auswahl einer Technologie im Webstapel, näher am Kern der Webplattform, erhalten wir auch den Vorteil der integrierten Resilienz gegen Misserfolge.

JavaScript ist schrecklich zu scheitern. Ein Skript, das im Prozess nicht geladen oder verstümmelt wird, oder ein falsches Argument für eine Funktion, und Ihre gesamte App funktioniert möglicherweise nicht mehr. Wenn Ihnen eine Fehlermeldung wie "Eigenschaft X von undefined nicht lesen kann" für Sie bekannt ist, wissen Sie, wovon ich spreche.

CSS hingegen ist sehr gut im Scheitern. Selbst wenn Sie einen Syntaxfehler in einem Ihrer Style -Laken haben, funktioniert der Rest Ihres CSS immer noch. Gleiches gilt für HTML. Dies sind verzeihende Sprachen.

Wenn Sie bezweifeln, warum Sie die Regel der geringsten Macht verwenden sollten, bringt Jeremy Keith uns die Antwort in seinem Artikel „Bewertung der Technologie“:

Wir neigen dazu zu fragen: "Wie gut funktioniert es?", Aber was Sie wirklich fragen sollten: "Wie gut scheitert es?"

Jeremy Keith

Wir können es besser machen

Eine hochkarätige Website, die von der Regel der geringsten Macht profitieren könnte, ist die Nike-Website. Wenn Sie ihre Website mit Deaktiviert von JavaScript besuchen, können Sie keine Bilder sehen, noch können Sie Schuhe bestellen.

Diese übermäßige Abhängigkeit von JavaScript ist nicht erforderlich, da alle diese kaputten Funktionen mit Technologien im Frontend-Stack aufgebaut werden können:

• Warum nicht sofort Elemente eingeben, um die Schuhfotos anzeigen, anstatt sie dynamisch über JavaScript zu injizieren?
• Warum nicht ein
  mit einem (um Ihre Größe auswählen) und einen Subay zu bestellen, um die Schuhe zu bestellen, anstatt den gesamten Zustand und die Einreichung über JavaScript zu verwalten?

☝️ Wenn Sie sich fragen, warum jemand jemals im Internet mit deaktiviertem JavaScript durchsuchen würde: Es ist oft nicht ihre Wahl, sondern ein externer Faktor, der sich stört. Siehe "Jeder hat JavaScript, oder?" Für eine gute Erklärung zum Thema.

Noch schlimmere Straftäter in dieser Kategorie sind hochkarätige Websites wie Instagram und Twitter. Ohne JavaScript funktionieren diese Websites überhaupt nicht. Sie geben Ihnen entweder eine Warnung oder bleiben einfach leer. Seit wann ist JavaScript erforderlich, um Text und Bilder im Web anzuzeigen?

Progressive Verbesserung

Es muss nicht so schlimm sein wie dieses isolierte Nike -Beispiel. Manchmal sind es kleinere Komponenten, die sich weigern, zu arbeiten, wenn JavaScript fehlschlägt. Nehmen Sie als Beispiel eine Registerkartenschnittstelle. Auch wenn Sie viele finden können JavaScript -Bibliotheken, die diese Funktionalität liefern, ist der Kicker, dass Sie dafür kein JavaScript benötigen, da HTML, CSS und Aria selbst bereits in der Lage sind, Sie sehr weit zu bringen.

Sobald Sie diese Grundschichten vorhanden haben, verwenden Sie JavaScript, um die Erfahrung weiter zu verbessern. Stellen Sie sich JavaScript als Verbesserung anstelle einer Anforderung vor.

Gleiches gilt für bestimmte CSS -Funktionen, die möglicherweise verfügbar sind oder nicht. Bereitstellen Sie ein grundlegendes Styling, und wenn eine Funktion verfügbar ist - mit @Supports erkennbar - verbessern Sie das Ergebnis, das Sie bereits hatten.

Dieser Ansatz wird als progressive Verbesserung bezeichnet: Sie fügen die Funktionalität hinzu, wenn weitere Funktionen verfügbar werden, so dass das Ergebnis im Hinblick auf die Erfahrung besser wird, aber nicht so sehr, dass die Funktion nicht ohne diese zusätzlichen Blumen funktionieren kann.

Und für Browser, die eine bestimmte neue Funktion noch nicht unterstützen, können Sie versuchen, eine Polyfill zu finden, die diese Funktionen für die Browser verleiht.

Das Web holt auf

Seit den frühen Tagen des Web haben wir gesehen, dass die Webplattform im Laufe der Zeit viele neue Funktionen gewonnen hat. Neue HTML -Elemente wurden definiert, JavaScript (die Sprache) ist gereift, und CSS hat viele leistungsstarke neue Funktionen für das Erstellen von Layouts, Animationselementen usw. erhalten.

Dinge, die vor Jahren unmöglich waren und die nur durch die Stütze auf externe Technologien wie Flash geschehen konnten, sind jetzt in den Browser selbst eingebaut.

Ein klassisches Beispiel sind die Funktionen, die JQuery eingeführt hat. Vor über zehn Jahren war JQuery das allererste, was ein Projekt einlief. Heute ist dies nicht mehr der Fall, da die Webplattform eingeholt hat und nun document.querySelectorAll (), element.classlist usw. integriert ist-alle Funktionen, die auf Funktionen inspiriert sind, die uns JQuery gegeben hat. Man könnte sagen, dass JQuery eine Polyfill war, bevor Polyfills sogar Polyfills genannt wurden.

Während JQuery ein bekanntes Beispiel sein könnte, gibt es viele andere Situationen, in denen das Web eingeholt hat:

• Kämpfe mit der sehr schlechten Date () API in JavaScript?
  ? Die zeitliche API ist schöner zu arbeiten.
• Verwenden einer JavaScript-Bibliothek von Drittanbietern, um Elemente auf dem Bildschirm zu animieren?
  ? Probieren Sie die integrierte Webanimationen-API aus? Es ist wirklich mächtig.
• Benötigen Sie farbige Optionsfelder und Kontrollkästchen?
  ? Das neue CSS-Akzent-Farben-Eigentum erledigt das für Sie.
• Verlassen Sie sich auf einen Präprozessor, damit Sie CSS -Variablen verwenden können?
  ? CSS -benutzerdefinierte Eigenschaften sind in den letzten 20 Jahren die größte Ergänzung zu CSS.
• und so weiter…

Das zentrale Thema hier ist, dass diese Funktionen nicht mehr auf eine Polyfill oder eine externe Bibliothek beruhen, sondern sich dem Kern des Webstapels näher gebracht haben. Das Web holt auf.

Während einige dieser neuen APIs ziemlich abstrakt sein können, gibt es Bibliotheken, die Sie in Ihren Code einstecken können. Ein Beispiel ist Redaxios, das Fetch unter der Motorhaube verwendet und gleichzeitig eine Entwickler-freundliche, axios-kompatible API enthüllt. Es würde mich nicht überraschen, wenn diese Convenience -Methoden irgendwann in die Webplattform rennen.

Abschließend

Was Berners-Lee vor fast 25 Jahren geschrieben hat, ist die Zeit der Zeit. Es liegt an uns, Entwicklern, diese Botschaft zu ehren. Indem wir uns annehmen, was uns die Webplattform gibt - anstatt zu versuchen, dagegen zu kämpfen - können wir bessere Websites erstellen.

Halte es einfach. Wenden Sie die Regel der geringsten Macht an. Bauen Sie im Hinblick auf progressive Verbesserung auf.

HTML, CSS und JavaScript - in dieser Reihenfolge.

Das obige ist der detaillierte Inhalt vonUmfassen Sie die Plattform. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!