Auf einer kürzlichen Konferenz (leider weiß ich nicht mehr, welche) gab es ein schnelles Beispiel für schlechte Web-Performance in Form eines Widgets von Drittanbietern. Das Beispiel zeigte eine Website, die das Widget installierte, um einen „E-Mail an uns“-Button am unteren rechten Rand des Viewports zu integrieren. Nicht einmal ein Live-Chat-Widget – nur eine E-Mail-Sache. Es wog etwa 470 KB, was absolut verrückt ist.
Nur für den Fall, dass Sie jemand sind, der sich gefangen fühlt und ein zehn Tonnen schweres Widget verwenden muss, weil Sie noch nicht sicher sind, wie Sie die gleiche Funktionalität nachbilden können, habe ich ein kleines Stück HTML für Sie vorbereitet.
Es sind 602 Bytes, oder etwa 1/10 % der Größe des anderen Widgets – ohne etwas herunterladen, parsen oder rendern zu müssen.
Siehe den Pen
Mailto Fixed Position Widget von Chris Coyier (@chriscoyier)
auf CodePen.
Vielleicht würden Sie auf Ihrer eigenen Website die Stile in Ihr Stylesheet verschieben und einige Hover- und Fokusstile hinzufügen.
Es ist nicht so, dass JavaScript von Drittanbietern schlecht sein muss. Es hat nur die Angewohnheit, schlecht zu sein.
Mein Freund Richard zeigte mir ein neues Produkt, das er gebaut hat, namens Surfacer. Es ist wie ein RSS-Widget, das Sie überall platzieren können.
Siehe den Pen
Surfacer von Chris Coyier (@chriscoyier)
auf CodePen.
Das ist eine 773 Byte große JavaScript-Datei, die eine 3,5 KB große Ajax-Anfrage für Daten durchführt, und Sie würden sie am Ende des Dokuments platzieren, um jegliche Renderblockierung zu vermeiden. Es wäre schön, mehr von dieser Art von Dingen zu sehen.
Cool. Bitte erzählen Sie mir mehr über Widgets im Vergleich zu Apps. Es tut mir leid, ich bin ein Neuling, aber ein schneller, eifriger Lerner. Danke! Diane Diamond
Hallo Diane,
In diesem Kontext des Artikels verwende ich das Wort „Widget“, um beliebigen Code zu beschreiben, den ein anderer Dienst Sie bittet, auf Ihrer Website einzufügen, um Funktionalität hinzuzufügen.
Jeder hat schon von Facebook gehört, richtig? Und diese kleinen Facebook „Gefällt mir“-Buttons, die man vielleicht auf anderen Websites findet, die nicht Facebook sind? Man könnte diesen kleinen Button als „Widget“ betrachten. Ich bin mir nicht sicher, ob es eine offizielle Definition von Widget gibt, aber so verwende ich es hier.
Mann… ich streite mich ständig mit einem Junior-Entwickler in meinem Team. Ich weise Aufgaben zu/definiere Anforderungen, und seine erste Anlaufstelle ist npm. Sein Argument ist immer „Warum das Rad neu erfinden?“. Nun, vielleicht kam das Rad, das du gefunden hast, von einem brennenden Müllcontainer. Er hat Programmierkenntnisse, aber ich fürchte, der Instinkt, immer nach einer vorgefertigten Lösung zu suchen, hemmt sein Wachstum als Entwickler. Andererseits bin ich viel näher an 40 als an 20 und erinnere mich an die Tage, an denen man alles von Grund auf neu schreiben musste. Wir alten Hasen hatten früher unsere eigenen persönlichen Bibliotheken, die wir wie eine Tasche voller Nerd-Abzeichen-Stolz mit uns herumtrugen.
Andererseits bin ich mir nicht sicher, ob Sie viel glücklicher wären, wenn er darauf bestehen würde, alles selbst zu schreiben. Das Prüfen vorhandener Lösungen ist eine gute Möglichkeit, viel unnötige Entwicklungs- und Wartungsarbeit zu vermeiden. Offensichtlich gibt es Grenzen… das Einfügen eines 500 KB schweren „E-Mail an uns“-Button-Widgets ist lächerlich.
Hahaha. Ich denke, Sie haben mir gute Ratschläge gegeben. Ich werde anfangen, mehr eigenen Code zu schreiben. In letzter Zeit vermeide ich es auch, mir eigene Logik auszudenken, in dem Gedanken, dass es bereits geschriebene Logik gibt, die ich nur importieren muss. Ich glaube, das beeinträchtigt auch mein Wachstum als Entwickler negativ.
Ihre Ängste sind berechtigt. Ich habe dumme Fehler gemacht, weil ich zu sehr an ein Plugin gewöhnt war, und ich hatte auch Gespräche mit sehr erfahrenen Entwicklern (Teamleiter, VP), die buchstäblich keine praktische Kenntnis davon haben, wie gängige UI-Komponenten funktionieren, weil sie immer Plugins benutzt haben. (Modals sind ein gutes Beispiel.)
Wenn ich mich in diese Diskussion begebe, bringe ich diese Punkte an:
– Open Source bedeutet, dass wir den Quellcode lesen können, nicht ihn warten. Wir können nur um ein Plugin herum programmieren oder es kopieren.
– Rechenschaftspflicht: Der Autor des Plugins hat in den meisten Fällen buchstäblich keine vertragliche Verpflichtung, uns zu unterstützen.
– Lizenzierung: Könnte unser Unternehmen wegen der Nutzung verklagt werden? Ist es Copyleft?
– Bedürfnisse: Müssen wir wirklich alles tun, was dieses Plugin tut? Auch hier müssen wir darum herum warten.
– Bloat: Wir müssen den zusätzlichen Code über das Netzwerk an das Gerät des Benutzers senden. Das hat finanzielle Kosten sowohl für unser Unternehmen als auch für den Benutzer.
– Ästhetische Konsistenz: Mangelnde Konsistenz in der Benutzeroberfläche schadet der Glaubwürdigkeit der Anwendung.
– Programmatische Konsistenz: Passt es zu unserer Anwendungsstruktur? Würde ein neuer Entwickler wissen, wie er damit umgehen soll und was zu erwarten ist, oder ist es ein Haufen Ausnahmen von der Norm?
Wenn ein Entwickler auf eine starke Nutzung von Tools Dritter besteht, können Sie als letzten Punkt anführen: „Werkzeuge, die Ihnen beim Bauen von Dingen helfen, sind gut (React, Angular, Lodash), Werkzeuge, die Dinge für Sie bauen, sind schlecht.“
Sie können auch argumentieren, dass das „Rad“ viele, viele Male neu erfunden wurde. Deshalb passen Trauerrad-Räder nicht auf Rollschuhe, so dass die ursprüngliche Metapher nie zutraf.
Hallo Chris,
wirklich interessant. Könnten Sie erklären, wie etwas so Einfaches auf 470 KB kommen kann?
Danke
Diese Widgets könnten
* Eine Animation aus einer vollständigen Animations-JS-Bibliothek mit 100 Animationen laden.
* Einen Stil aus einer CSS-Datei laden, die 100 Stile enthält.
* 100 zusätzliche Funktionen haben, die Sie nicht nutzen, aber trotzdem alle zugehörigen Assets dafür laden.
Ein Software-Widget ist eine relativ einfache und benutzerfreundliche Softwareanwendung oder -komponente, die für eine oder mehrere verschiedene Softwareplattformen entwickelt wurde. Ein Schreibtischzubehör oder eine Applet ist ein Beispiel für eine einfache, eigenständige Benutzeroberfläche im Gegensatz zu einer komplexeren Anwendung wie einer Tabellenkalkulation oder einem Textverarbeitungsprogramm.
Dies scheint eine gute Parallele zur Diskussion über Anwendungsfälle zu sein, bei denen man sich für ein oder zwei spezifische Funktionen auf eine Bibliothek oder ein Framework verlässt. So wie die Verwendung von jQuery, weil man Zugriff auf `$.ajax()` haben möchte, oder das Einbinden von Bootstrap in alle Projekte, um deren Carousel-Komponente nutzen zu können.
Ich bin nicht so gut mit JavaScript, wie ich es gerne wäre… aber wenn ich auf Fälle stoße, in denen die Bibliothek eines Drittanbieters entweder nicht das eine spezifische Ding tut, das ich brauche, oder viel zu viel tut, nutze ich das normalerweise als Gelegenheit, etwas selbst zu schreiben. Es funktioniert nicht immer, aber es ist eine gute Möglichkeit zu lernen.