Die JavaScript-Abhängigkeits-Rückschläge: Mythos-Busting Progressive Enhancement-js-Tutorial-php.cn

The JavaScript-Dependency Backlash: Myth-Busting Progressive Enhancement

Kernpunkte

Trotz des Aufstiegs von Client -Frameworks wie AngularJS bleibt Progressive Enhancement (PE) die beste Wahl für die Lösung von Webentwicklungsproblemen wie umfangreicher Browserunterstützung, Wartung und zukünftige Entwicklungen von Anwendungen.
pe ist nicht für Benutzer, die JavaScript deaktivieren, sondern um die Benutzererfahrung zu verbessern, wenn bestimmte JavaScript -Funktionen verfügbar sind. Es macht keine Annahmen über Ihr Publikum wie einen Kunden -Framework.
PE -Kritiker behaupten oft, dass dies bedeutet, alte Browser zu unterstützen, aber tatsächlich ist es der Vorteil von PE und eher das Hauptziel.
JavaScript-Frameworks können kurzfristige Vorteile bieten, können jedoch zu reduzierten Besuchern und langfristigen Wartungsschwierigkeiten führen. Im Gegensatz zu PE bleiben sie fest, was moderne APIs ermöglicht, ohne die Anwendung zu brechen.
Fortschrittliche Verbesserung trennt Inhalt, Layout und Funktionalität für die einfache Wartung, reduziert die Testbelastung, unterstützt eine Vielzahl von Geräten und sorgt für SEO und Zugänglichkeit. Trotz des Aufstiegs von clientseitigen JavaScript-Frameworks funktioniert diese Technologie weiterhin.

Louis hat kürzlich im Forum Thema kommentiert. "Sind wir in einem Abpraller von Skriptabhängigkeiten?"

Kurz gesagt - ich stimme zu. Andere waren sich auch einig, einschließlich Webexperten PPK (

Angular Fragen ), Jeremy Keith ( Angular Impuls ) und Jake Archibald ( progressive Verbesserung ist immer noch wichtig ).

definieren wir den Begriff, über den wir diskutieren ... was ist eine JavaScript -Abhängigkeit?

Die Verwendung von Client -Frameworks hat zugenommen. Sie bieten serverseitige Codierungsmodi wie MVC, Vorlagenansichten, wiederverwendbare Komponenten, Formularvalidierung und mehr. AngularJS ist wahrscheinlich die berühmteste und beliebteste, aber nicht die einzige Lösung. Im Gegensatz zu serverseitigen Frameworks müssen Clientalternativen auf Browsern mit modernem JavaScript-aktiviert ausgeführt werden. Ohne JavaScript scheitern sie. Tidal ist ein typisches Beispiel. Kein Inhalt, keine Fehler und kein Registrierungsformular. Obwohl es fast keinen Grund gibt, Nachrichten nicht anzuzeigen, haben JavaScript -abhängige Anwendungen einige gute Anwendungsfälle:

Prototyp Simulieren Sie schnell Websites und Anwendungen, da das Client -Framework eine Fülle von Komponenten und Verknüpfungen bietet.
reine Client -Anwendung Wenn Ihre Anwendung einfach ist und keine anderen Server -Interaktionen als den ersten Download benötigt, ist das JavaScript -Framework möglicherweise eine gute Wahl (vorausgesetzt, Sie können unerwünschte Inhalte löschen).
interne Unternehmensanwendung Erzwungener JavaScript ist kein Problem, wenn Sie Ihr Publikum und die von Ihnen verwendeten Geräte verstehen. Angular wurde ursprünglich für Unternehmensanwendungen entwickelt.
feine Schnittstelle Betrachten Sie Actionspiele, Google Maps und Dokumentation. Die Entwicklung von javaScript-freien Alternativen ist zwecklos. Google hat eine grundlegende HTML -Version von Google Maps erstellt, aber es war tatsächlich eine andere App und wurde 2010 aufgegeben.

Es gibt andere Fälle, aber die meisten öffentlich ausgerichteten Websites und Anwendungen fallen nicht in diese Kategorien. Niemand hält Sie daran, Client -Frameworks zu verwenden. Wenn Sie jedoch einen Hammer haben, sieht alles wie ein Nagel aus. Zitieren Sie noch einmal Louis: & gt; Entwickler scheinen sie nur für die Verwendung neuer Tools zu verwenden, nicht weil sie das tatsächliche Problem lösen.

Was ist eine allmähliche Verbesserung?

progressive Verbesserung (PE) ist keine Technologie, sondern eine Entwicklungsmethode. Ich habe 2009 einige Tutorials und Beispiele geschrieben, aber dieses Konzept wurde seit 2003 diskutiert. Sie erstellen zunächst eine grundlegende Benutzererfahrungsstufe und fügen dann fortgeschrittenere Funktionen hinzu, wenn Ihr Browser sie unterstützt. Pe PE auf das Extrem der Logik drücken:

Sie erstellen eine reine HTML -Anwendung, und jede wichtige Verarbeitung erstellt auf der Serverseite. Es kann in jedem Browser ausgeführt werden.
Sie verwenden CSS, um das Layout zu verbessern. CSS ist PE bereit, weil Browser Eigenschaften ignorieren, die sie nicht verstehen. Sie können es weiter mit Optionen wie Medienabfragen oder @Supports -Regeln verbessern. Die App arbeitet immer noch überall, bietet aber ein verbessertes Erlebnis für Browser mit modernen CSS -Funktionen.
Sie verwenden JavaScript -Verbesserungen. JavaScript ist die instabilste Ebene, da Sprach- und API -Unterstützung vom Browser bis zum Browser unterschiedlich ist. Angenommen, es wird ausgeführt, testen Sie die Verfügbarkeit, bevor Sie sie verwenden. Wenn Canvas oder SVG beispielsweise unterstützt werden, können Sie Datentabellen in wunderschöne Diagramme umwandeln.

Jeder Browser erhält die beste App, die er verarbeiten kann. Möglicherweise gibt es nicht zwei Browser, die genau die gleiche Erfahrung bieten. Mobile-First Responsive Design und weniger verwendete Offline-Priorität sind Beispiele für progressive Verbesserungstechniken. Schauen wir uns die Kritik von PE an.

Mythos: Niemand deaktiviert JavaScript

Zweite Leute wissen, was JavaScript ist. Mit wenigen Browsern können Benutzer JavaScript deaktivieren (einfach) Das ist absolut korrekt. PE -Kritiker kamen dann zu dem Schluss: & gt; diejenigen, die JavaScript nicht haben, bekommen das, was sie verdienen.

Es ist gefährlich anzunehmen, dass JavaScript immer überall und jederzeit das für Ihre Bewerbung erforderliche Niveau erreichen wird. Jeder hat JavaScript, oder? Dies zeigt. Progressive Verbesserung gilt nicht für Benutzer, die JavaScript deaktivieren. Es soll die Benutzererfahrung verbessern, wenn bestimmte JavaScript -Funktionen verfügbar sind. Wenn JavaScript deaktiviert ist, kann die Anwendung eine schlechte Schnittstelle bieten, aber der Benutzer erhält immer noch etwas .

Mythos: Niemand verwendet den alten Browser

Was meinen wir mit "alt"? Für die meisten Entwickler ist es jeder Browser, der seit mehr als zwölf Monaten veröffentlicht wird. Nicht jeder kann die neuesten und besten Apps verwenden:

Große Organisationen und Regierungsabteilungen
deaktiviert
Menschen in Entwicklungsländern
Die weniger wohlhabende Klasse in der Community
Jeder, der iPhone 5.0 oder Android 4.0 und darunter verwendet.

Diese Abteilungen sind für Sie möglicherweise keine Rolle. Aber sind sie nie eine Rolle? Progressive Verbesserung macht keine Annahmen über Ihr Publikum. Dies ist bei Client -Frameworks nicht der Fall. Diejenigen, die Ihre Anwendung nicht verwenden können, verschwinden aus dem Serverprotokoll. Es wird sich bald in eine sich selbst erfüllende Prophezeiung verwandeln: "Niemand benutzt unsere App in einem alten Browser, damit wir das weiterhin tun können ..." Mythos: Progressive Verbesserung ist Anti-JavaScript

Verbessern Sie schrittweise die grundlegenden Vorteile der Aufnahme des Web. Eine Website oder Anwendung, die überall auf der Welt auf jedem Netzwerkgerät ausgeführt werden kann, kann entwickelt werden. Je besser das Gerät, desto besser die Benutzererfahrung. Client -Frameworks machen JavaScript zu einer absoluten Abhängigkeit. Sie codieren das Web nicht mehr. Ihre Anwendung verwendet das Web als Liefermechanismus für eine bestimmte Laufzeit -Engine. Ein Browser ist Ihr Betriebssystem und Updates können Ihre Anwendung brechen.

Mythos: Progressive Verbesserung macht Annahmen über Benutzer und Geräte

pe handelt von

keine Annahmen aus

. Sie nehmen nichts an - dies ist die Kernvoraussetzung für diese Technologie. Mit JavaScript Frameworks werden Sie fälschlicherweise denken, dass jeder einen leistungsstarken Browser auf einem leistungsstarken Gerät verwendet. Wir haben diese Annahmen schon einmal gemacht. Wie unterscheidet sich das von der Annahme, dass jeder Breitband verwendet? Oder hat jeder mindestens einen 17-Zoll-Bildschirm, der mindestens 960 Pixel breit ist? Oder werden jeder IE6 jetzt und in Zukunft verwenden? Mythos: Progressive Verbesserung bedeutet Unterstützung für veraltete Browser

verstärkten Kritiker glauben, dass Sie Ihre ganze Zeit über alte Browser arbeiten werden. Tatsächlich ist es das Gegenteil: Sie müssen sich nie mit alten Browsern befassen, da der richtige Fallback bereits vorhanden ist. Die Unterstützung von alten Browsern ist ein Vorteil von PE -

und nicht von Target

. Sie können die schlimmsten Browser unterstützen, aber Sie können jede Basis erstellen, die Sie mögen. Zum Beispiel entwickle ich derzeit eine Anwendung, in der AddEventListener für die meisten JavaScript -Läufe erforderlich ist. Daher kann IE8 und unten nicht in der Lage sein, Feature -Verbesserungen anzuzeigen. Ich kann dieses Problem lösen, aber es ist die Investition nicht wert, da es sich um eine Unternehmensanwendung ohne alte IE -Benutzer handelt. IE8 -Benutzer können das System jedoch weiterhin verwenden und es bei Bedarf verbessern.

Mythos: JavaScript -Framework -Anwendungen sind cooler

Sie können PE -Technologie verwenden, um Anwendungen zu erstellen, die gleich aussehen. Der Grund für die Verwirrung ist, dass die meisten JavaScript-Frameworks eine Reihe von vorentwickelten Widgets bieten, die gut aussehen. Dieselben Widgets können zunehmend verbesserte Anwendungen verwendet werden. Ohne JS greifen sie jedoch auf die grundlegende HTML -Alternative zurück. Mit PE können Sie auch moderne HTML-, CSS- und JavaScript -APIs verwenden, die in keinem Browser erschienen sind. Betrachten Sie die Fetch -API - eine moderne Alternative zu XMLHTTPrequest. Es unterstützt minimal, aber ich kann es ohne Probleme verwenden, da ich auf XMLHTTPrequest- oder Serveranforderung zurückgreifen kann. Das JavaScript -Framework bleibt in der Gegenwart fest - nicht in der Zukunft. Mythos: Allmählich behindert die Webentwicklung

oder genauer gesagt, das Client -Framework steht vor der Spitze der Technologie und drängt den Web vorwärts. Entschuldigung, aber das ist eine Illusion. AngularJS-ähnliche Frameworks implementieren magische Merkmale, aber wenn Sie tiefer graben, verwenden Sie immer noch HTML-, CSS-, JavaScript- und DOM-Operationen. Bestenfalls ist es eine Abstraktion. Im schlimmsten Fall ist es eine Ablenkung. Ihr Kunden -Framework ist nur so gut wie der Browser, der es entwickelt hat. AngularJS 2.0 wird vollständig umgeschrieben, da Merkmale wie Object.Observe () und Webkomponenten nicht häufig waren, wenn AngularJS 1.x freigegeben wurde. Der Rahmen zwingt Sie dazu, alte Technologie zu nutzen, versteckt jedoch die Implementierung von Ihnen. Mit PE können Sie eine moderne API verwenden, ohne Ihre Anwendung zu brechen. Viel Glück beim Upgrade von Angular 1 ...

Mythos: JavaScript Framework erleichtert die Entwicklung

Dieser Teil ist korrekt - aber nur, wenn Sie Ihre Bewerbung erstellen. Sie können auf eine Reihe von Kontrollpersonen zugreifen, die die anfängliche Entwicklungszeit verkürzen. Sie sind jedoch im Rahmen des Rahmens gefangen, was später zu Problemen führen kann. Angenommen, Ihre Bewerbung ist seit einiger Zeit ausgeführt und der Kunde benötigt Support
browserx . Es wird von einem Hauptkunden verwendet und ist nicht besonders alt. Sie können erwarten, dass die Entwicklungszeit mehrere Tage beträgt, aber es ist möglicherweise nicht möglich, wenn Ihr JavaScript -Framework nicht kompatibel ist. Für Anwendungen, die mit der PE -Technologie entwickelt wurden, können Sie den Browser möglicherweise bereits unterstützen. Weitere Verbesserungen können ohne größere Umschreibungen hinzugefügt werden.

Mythos: Progressive Verbesserung ist doppelt so
Dies ist das beliebteste Zitat von Kritikern. Die einzigen Leute, die sagen, dass PE überarbeitet ist, sind diejenigen, die es nie versucht haben oder in irgendeiner Weise gescheitert sind. Wenn Sie von Anfang an nicht an PE nachgedacht haben, dauert es nur doppelt so lange. Der Versuch, PE in vorhandene Anwendungen umzubauen, ist zum Scheitern verurteilt - insbesondere für Anwendungen, die auf JavaScript beruhen. Betrachten wir ein einfaches Beispiel, wie z. B. eine Paging -Liste von Suchabfrageergebnissen. Auf der ersten Seite wird alle HTML zurückgegeben. Es ist schnell, JavaScript muss nichts tun. Hinter den Kulissen verwenden wir Datenbankabfragen und fügen die Ergebnisse in die HTML -Vorlage ein. Sie können denselben Dienst schnell anpassen, um die Ergebnisse als JSON -Daten oder zu HTML -Ergebnis zu erhalten, ohne Titel und Fußzeile. Wenn der Benutzer auf "Seite 2" klickt, wird das Ergebnis der zweiten Seite angezeigt:

Mit JavaScript können wir Klicks abfangen und die AJAX -Technologie verwenden, um die Ergebnisse der Seite zu erhalten. HTML -Daten können mit InnerHTML in die Seite eingefügt werden. Alternativ können wir Seite 1 als Vorlage für die zurückgegebenen JSON -Daten verwenden.

Wenn JavaScript, xmlhttpRequest oder Fetch nicht verfügbar sind -
oder AJAX -Anruf fehlschlägt - wir können die zweite Seite adjed html anfordern.

Dies erfordert mehr Arbeit, aber es ist definitiv nicht doppelt so viel Arbeit. Wir profitieren von Cross-Browser-Fehler-toleranten Lösungen.

Mythos: nach und nach bedeutungslos erweitert - Website -Entwicklung oder Aussterben

Die Logik hinter diesem Argument ist, dass die Website letztendlich veraltet sein wird. Sie können also einen Framework verwenden, der zu einem bestimmten Zeitpunkt auf eine bestimmte Technologie abzielt. Ich hoffe es. Wenn Ihr Code gut ist, wird er viel länger als erwartet verwendet. Schlechter Code überlebt länger, weil niemand ihn berühren will. Mithilfe der progressiven Verbesserung werden Sie jedoch keine anderen Annahmen als das Web als Client/serverbasiertes HTML-basiertes System ergeben. Das Web muss sich grundlegend ändern, damit Ihre Anwendung fehlschlägt - es wird nicht mehr das Web sein!

Mythos: Progressive Verbesserung ist eine alte Technologie, die von den alten Vorgängern empfohlen wird

Zitat ODDZ: & gt; Der Anstieg in den kundenseitigen JavaScript-Frameworks hat Sie zusammen mit anderen "alten Senioren" zu einer Minderheit gemacht.

Ja, danke! Der JavaScript -Rebound wurde von Menschen geleitet, die sich seit einiger Zeit im Internet entwickelt haben. Sind wir alle hartnäckige Menschen, die Angst vor neuen Technologien haben und nicht mit der Zeit Schritt halten können? Vielleicht. Oder vielleicht daran, dass wir von vielen, vielen unserer historischen Fehler einige Lektionen gelernt haben? JavaScript Framework wirft vertraute Fragen auf:

Einige Leute mischen HTML und Funktionen wie früher Onclick -Handler, wie z. B.

Sie zielen auf bestimmte Browser ab. Es gab eine Wiederbelebung von
"Bester Weg zum Durchsuchen ..." Nachrichten und Tags.

Sie treffen Annahmen über das heutige Web - zum Beispiel funktioniert JavaScript überall und 2 MB pro Seite ist angemessen.

Sie haben keine Pläne für die Zukunft.

JavaScript -Framework nützt den Entwicklern hauptsächlich - eher als Benutzer. Sie können kurzfristige Vorteile auf Kosten reduzierter Besucher und schmerzhafte langfristige Aufrechterhaltung bieten. Und vergiss SEO nicht. Google indiziert JavaScript -Seiten, ist jedoch nicht unbedingt in der Lage, jeden logischen Zweig zu verfolgen. Es ist auch schwierig, auf eine bestimmte URL zurückzukehren, es sei denn, Sie schreiben Ihren Code sorgfältig. Progressive Verbesserung ergänzt die Vorteile des Web:

Es trennt Inhalt, Layout und Funktionalität für einfache Wartung

Sie schreiben defensive, fehlertolerante, geräteunabhängige Code für das Web-
anstelle des Browsers
Sie können verschiedene Geräte unterstützen

Ihre Testbelastung wird reduziert, da Ihre Bewerbung weiterhin ausgeführt wird, wenn ein Fehler
vorliegt
SEO und Barrierefreiheit sind integriert (oder erfordern weniger Aufwand)

Websites und Anwendungen werden auf Browsern ausgeführt, die heute, gestern und morgen veröffentlicht wurden

Niemand widerlegt die Vorteile von zunehmend verbesserten oder schlägt bessere Techniken vor.

Nur ein Nachteil: Es ist klar, dass viele Entwickler der fortschreitenden Verbesserung immer noch nicht vertrauen oder verstehen. Es lebe die Erholung der JavaScript -Abhängigkeiten!

FAQs (FAQ) über JavaScript -Abhängigkeiten und progressive Verbesserung

Was ist eine JavaScript -Abhängigkeit?

JavaScript -Abhängigkeit bedeutet, dass der JavaScript -Code von anderen JavaScript -Dateien oder Bibliotheken abhängt, die sie normal ausführen können. Wenn beispielsweise eine JavaScript -Datei eine Funktion oder eine Variable verwendet, die in einer anderen Datei oder Bibliothek definiert ist, soll sie von dieser Datei oder Bibliothek abhängen. Abhängigkeiten können Code effizienter und überschaubarer machen, aber sie können auch Komplexität und potenzielle Probleme einführen, wenn sie nicht ordnungsgemäß verwaltet werden.

Was ist eine progressive Verbesserung in JavaScript?

Progressive Enhancement ist eine Designphilosophie, die zuerst den Kern -Webinhalt betont und dann allmählich detailliertere und komplexere Präsentations- und Funktionen über sie hinzufügt. Im Kontext von JavaScript bedeutet dies, Code zu schreiben, das allen Browsern grundlegende Funktionen bietet und gleichzeitig Browser erweiterte Funktionen bietet, die ihn unterstützen können.

Wie wirkt sich JavaScript -Abhängigkeiten die allmähliche Verbesserung aus?

JavaScript -Abhängigkeiten können die Implementierung zunehmend verbessert. Wenn eine JavaScript -Datei stark auf andere Dateien oder Bibliotheken angewiesen ist, die nicht alle Browser unterstützen, bietet sie möglicherweise nicht grundlegende Funktionen für diese Browser. Dies widerspricht dem Prinzip der progressiven Verbesserung, die darauf abzielt, allen Benutzern eine Kernfunktionalität zu bieten.

Was sind die Vorteile einer allmählichen Verbesserung?

Fortschrittliche Verbesserung bietet viele Vorteile. Es stellt sicher, dass alle Benutzer unabhängig von der Funktionalität ihres Browsers auf den Kerninhalt und die Funktionen der Webseite zugreifen können. Es fördert auch gute Webpraktiken wie semantisches HTML und die Trennung von Bedenken und macht die Website resistenter gegen potenzielle Probleme mit JavaScript oder CSS.

Was sind die Nachteile von JavaScript -Abhängigkeiten?

Während JavaScript -Abhängigkeiten den Code effizienter und überschaubarer machen können, kann er auch Komplexität und potenzielle Probleme einführen. Wenn die Abhängigkeit nicht ordnungsgemäß verwaltet wird, kann dies zu Problemen wie Blähungscode, langsamer Ladezeit und möglichen Konflikten zwischen verschiedenen Dateien oder Bibliotheken führen. Es kann auch den Code schwieriger machen, zu warten und zu debuggen.

Wie man JavaScript -Abhängigkeiten effektiv verwaltet?

Es gibt mehrere Strategien, um JavaScript -Abhängigkeiten effektiv zu verwalten. Diese Strategien umfassen die Verwendung von Modulbundlern wie Webpack oder Rollup, die alle Abhängigkeiten in eine einzelne Datei mit Paketmanagern wie NPM oder Garn bündeln können, um die Abhängigkeiten zu verwalten und zu aktualisieren. .

Wie kann ich eine progressive Verbesserung in meinem JavaScript -Code erzielen?

Implementierung progressiver Verbesserungen in Ihrem JavaScript -Code enthält das Schreiben von Code, die Bereitstellung grundlegender Funktionen für alle Browser und dann schrittweise erweiterte Funktionen zu Browsern, die ihn unterstützen können. Dies kann durch die Verwendung der Funktionserkennung erfolgen, um zu überprüfen, ob der Browser eine Funktion unterstützt, bevor Sie sie verwenden, und sicherzustellen, dass Ihr Code in Browsern, die bestimmte Funktionen nicht unterstützen, elegant herabgestuft werden kann.

Wie besteht die Beziehung zwischen JavaScript-Abhängigkeiten und clientseitigem JavaScript-Framework?

Client -JavaScript -Frameworks basieren normalerweise stark auf JavaScript -Abhängigkeiten. Diese Frameworks (wie React, Angular und Vue.js) enthalten viele integrierte Funktionen und Bibliotheken, auf die sich Ihr Code verlassen kann. Dies kann die Entwicklung schneller und einfacher machen, kann aber auch zu potenziellen Problemen führen, wenn diese Abhängigkeiten nicht ordnungsgemäß verwaltet werden.

Welche Rolle spielt die progressive Verbesserung im Client JavaScript -Framework?

progressive Verbesserung kann eine Schlüsselrolle im clientseitigen JavaScript-Framework spielen. Diese Frameworks enthalten häufig Funktionen, mit denen Entwickler inkrementelle Verbesserungen implementieren können, z. Diese Funktionen können dazu beitragen, dass Ihre Webanwendung allen Benutzern unabhängig von der Funktionalität ihres Browsers Kernfunktionen bietet.

Wie können Sie JavaScript -Abhängigkeiten und progressive Verbesserungen in meinem Webentwicklungsprojekt ausgleichen?

Ausgewogene JavaScript -Abhängigkeiten und progressive Verbesserungen erfordern sorgfältige Planung und gute Codierungspraktiken. Sie sollten die Abhängigkeiten in Ihrem Code minimieren und sicherstellen, dass sie ordnungsgemäß verwaltet werden. Gleichzeitig sollten Sie hart daran arbeiten, eine inkrementelle Verbesserung zu erzielen, um sicherzustellen, dass Ihre Webanwendung allen Benutzern eine Kernfunktionalität bietet. Dies kann die Verwendung von Merkmalserkennung, eleganten Herabstufungen und anderen Technologien beinhalten.

Das obige ist der detaillierte Inhalt vonDie JavaScript-Abhängigkeits-Rückschläge: Mythos-Busting Progressive Enhancement. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!