Haftungsausschluss für Satire: Dieser Artikel ist ebenso viel Satire wie ernsthafte Einsicht, falls es überhaupt welche gibt. Nehmen Sie ihn nicht zu ernst, aber erzählen Sie ihn all Ihren Freunden. Außerdem ist der Teil über Taco Bell zu 100 % wahr. Ich würde über so etwas keinen Witz machen.
Mein Tag beginnt normalerweise so: Ich wache um 6:15 Uhr auf (töte mich), um die Kinder für die Schule fertig zu machen. Sie sind wütend. Ich bin wütend. Alle stehen kurz vor einem emotionalen Zusammenbruch, weil es **6:15 Uhr morgens** ist.
Normalerweise ist das Erste, was ich tue, wenn ich aufwache, aus dem Bett rollen und mit Liegestützen wie Christian Bale loslegen.
BWAHAHAHA. Nein.
Noch bevor ich ganz wach bin und aus dem Bett komme, greife ich zu meinem Handy und schaue auf Twitter. Es ist eine Krankheit, ich weiß. Ich bin nicht stolz darauf, aber wenigstens gebe ich zu, dass ich ein Problem habe, und ich glaube, gemäß den Regeln der Wissenschaft negiert das mein Problem vollständig und macht mich besser als Sie.
Eines Morgens vor ein paar Wochen wache ich auf und sehe diesen Tweet…
Die Entfernung von clientseitigem React.js (aber beibehalten auf dem Server) führte zu einer Leistungssteigerung von 50 % auf unserer Landing Page pic.twitter.com/vM7JhWhYKu
— Netflix UI Engineers (@NetflixUIE) 26. Oktober 2017
Das Wunderbare an Twitter ist, dass es im Wesentlichen *null* Kontext für alles gibt, was man sieht. Das bedeutet, dass Ihr verrücktes Gehirn alle Lücken füllen kann, und in meinem Fall ist das eine Garantie für völlige Katastrophe.
So habe ich diesen Tweet gelesen….
Ich glaube, mein Gehirn hat ihn so gelesen, weil das *buchstäblich* das ist, was der ursprüngliche Tweet sagt. Mein Gehirn fügt einfach den Teil "Dein ganzes Leben ist eine Lüge" zu so ziemlich allem hinzu, was ich lese oder höre.
Dein ganzes Leben ist eine Lüge
Das stürzte mich sofort in eine existenzielle Krise.
Um fair zu sein, ich bin fast ständig in einem Zustand der Krise, also war das kein großer Sprung für mich. Erst letzte Nacht bei Taco Bell musste ich zwischen dem Beefy 5-Layer Burrito und dem Cheesy Gordita Crunch wählen und kam im Drive-Through fast auseinander. Man kann Leute nicht zu solchen Entscheidungen zwingen und eine sofortige Reaktion erwarten! Und warum brauche ich 50 Päckchen Fire Sauce!?!
Der Punkt ist, dass ich sowieso emotional ziemlich zerbrechlich bin, also können Sie mir nicht vorschlagen, dass Sie React abgeschafft haben, weil es plötzlich niemanden mehr braucht.
Ich hatte so, so, so viele. Fragen wie
- Was ist mit Binding?
- Was ist mit Komponenten?
- Was ist mit State?
- Was ist mit Templates?
Sie sagen mir, dass Sie all das Zeug plötzlich nicht mehr brauchen? Man kann nicht einfach "zu einfachem JavaScript wechseln", indem man React aus seinem Projekt entfernt. Wenn Sie das tatsächlich tun würden, würden Sie nur von React zu *Ihrer eigenen Version von React* wechseln. Facebook könnte auch sagen, dass ihre Seite in "einfachem JavaScript" aufgebaut ist. Sie haben einfach nur beschlossen, einen Teil dieses JavaScripts im Prozess "React" zu nennen.
Es war unsinnig. Man hätte genauso gut sagen können, dass man 15 % bei der Kfz-Versicherung gespart hat, indem man auf einfaches JavaScript umgestiegen ist. Glücklicherweise musste ich nur 6 quälende Tage warten, bis Jake Archibald in den Blogs alles klarstellte.
📝 Netflix "entfernte" React und verbesserte die Leistung.
➡️ Trotz des Anscheins spricht dies gut für React.https://#/R8SohrLX6q— Jake Archibald (@jaffathecake) 31. Oktober 2017
DAS HILFT NICHT, JAKE! ICH VERLIERE DEN VERSTAND HIER!
Der Beitrag erklärt weiter, dass Netflix clientseitiges React tatsächlich aufschiebt, bis es benötigt wird, und sich in der Zwischenzeit für serverseitig gerendertes React entscheidet. Er weist auch darauf hin, dass es logisch ist, dass es schneller ist, weil der Browser weniger Arbeit leistet. Netflix lädt clientseitiges React scheinbar im Hintergrund. Es ist da, wenn Sie es brauchen, aber Sie müssen es nicht parsen, wenn Sie es nicht tun.
Ich beschloss, dem nachzugehen und selbst zu sehen, was los ist.
Netflix Login
Einer der Orte, die Jake erwähnt, an denen serverseitiges React angebracht ist, ist die Login-Seite. Fangen wir also dort an. Ich lud die Login-Seite und sie sieht für mich so aus, als wäre clientseitiges React hier immer noch in vollem Umfang vorhanden.
Nebenbei bemerkt, Netflix ist *großartig* im Benennen von Dingen. Ich meine, schauen Sie sich diese Komponenten an: `AkiraLayout`, `JawboneLinkProvider`, `FreezedWrapper`? Okay, `FreezedWrapper` ist nicht so aufregend, aber `AkiraLayout` können Sie mir nicht wegnehmen.
Ich kann also nicht finden, wo React entfernt wurde. Die Login-Seite selbst kommt auf etwa 194 KB und das, bevor sie die Datei `loginController.jsx` lädt, die sie um weitere 204 KB erhöht.
Dann tat ich, was ich zum ersten Mal hätte tun sollen, nämlich das Video von Netflix anzusehen, das für diesen Abstieg in die Tiefen meiner Unsicherheit verantwortlich war, und bemerkte, dass sie nur die Splashpage erwähnten.
Die Splashpage ist nur netflix.com. Kein Login. Keine Videos. Die Splashpage. Diese Folie? Die, die sich im ganzen Internet verbreitete und in meine Therapiesitzungen gelangte? Diese Folie bezieht sich nur auf die Splashpage. Netflix hat React von seiner Splashpage entfernt und die wenigen Interaktionen, die es gab, durch einfaches JavaScript ersetzt.
Und da haben Sie den Kontext. Also korrigieren wir die Folie noch einmal…
Das ist die eigentliche Geschichte hier.
Es ist bedauerlich, dass wir uns an einer einzigen Folie festhalten, die völlig aus dem Kontext gerissen ist. Das ist nicht die Schuld von Netflix. Oder vielleicht doch. Ich meine, sie haben es getwittert, aber sehen Sie, das ist wirklich die Schuld von 2017. So spielt sich all der Nachrichtenfluss in unserem Leben ab.
Was wirklich bedauerlich ist und was Jake in seinem Beitrag zu vermitteln versuchte, ist, dass wir einige tatsächliche coole Dinge, die Netflix tut, völlig verpasst haben. Hauptsächlich die Kombination aus serverseitigem React und Prefetching. Oder besser gesagt, die Idee, dass komplexerer Code im Hintergrund heruntergeladen und geparst werden kann, anstatt beim Laden der Seite.
Prefetching ist kein gelöstes Problem
Wir neigen dazu zu vergessen, dass Dinge wie Prefetching nicht unbedingt ein gelöstes Problem sind. Während Service Worker großartig sind, kann Netflix sie nicht verwenden, da die Unterstützung zu spärlich ist. Darüber hinaus ist die Prefetching-API des Browsers fehlerhaft. In derselben Präsentation berichtet Netflix, dass die API (die nur das Link-Tag ist) eine Erfolgsquote von nur 30 % hat. Das bedeutet, dass Ihr Prefetch in einigen Fällen nur etwa ein Drittel der Zeit funktioniert. 😳
Der Grund dafür ist, dass die API eine Reihe von Entscheidungen darüber trifft, ob sie präfetchen soll oder nicht, abhängig von Ihrem Gerät und Ihren Ressourcen. Es gibt keine Garantie dafür, dass Ihre Ressourcen überhaupt geladen werden.
Was mir am bemerkenswertesten erscheint, ist, dass Netflix eine weitere Lösung gefunden hat, die so einfach ist, dass es weh tut: Machen Sie einfach einen AJAX-Aufruf und tun Sie nichts mit dem Ergebnis; der Browser wird diese Ressource zwischenspeichern.
MEIN GOTT, ICH LIEBE DAS WEB!
Sie brauchen äh, immer noch React
Also ja, Sie brauchen clientseitig immer noch React. Netflix verwendet es immer noch und hat nie gesagt, dass sie es nicht tun.
Was sie gesagt haben, ist, dass sie einige kreative Wege gefunden haben, um die Benutzererfahrung zu verbessern, und diese mit ihrer aktuellen React-Implementierung kombiniert haben. Das sollte Sie als React-Entwickler begeistern.
Vielleicht veröffentlicht Netflix eine Bibliothek für Prefetching mit einem sehr coolen Namen. Ist "fakenews.js" noch frei?
Besonderer Dank an Brian Holt, der diesen Artikel rezensiert hat und immer noch bereit war, mein Freund zu sein.
Eine Splashpage. Heh. Letztes Mal, als ich eine Splashpage auf einer Drupal-basierten Website erstellen musste, habe ich Drupal komplett übersprungen und eine einfache HTML-Seite mit fast allem Inline erstellt, einschließlich einiger Bilder. Die einzigen Dinge, die nicht inline waren, waren das große Hintergrundbild und ein gemeinsames Header-Bild.
Die Lektion, die ich hier ziehe, ist: Wenn Sie eine Splashpage benötigen, die schnell angezeigt wird, erstellen Sie sie manuell.
Ich war selbst etwas überrascht zu erfahren, dass sich überhaupt React auf dieser Splashpage befand. Es gab jedoch einige Aktionen dort – wie das Anzeigen der Nutzungsbedingungen und andere Elemente, also war es wahrscheinlich etwas mehr als nur eine Splashpage, aber immer noch weniger als eine vollständige Anwendung.
Aber ja – nichts ist schneller als eine statische Seite mit ein paar handgestrickten Events.
Wahrscheinlich der beste Artikel, den ich seit langer Zeit gelesen habe, haha. Die beste Art, meinen Tag zu beenden, nachdem ich die ganze Woche an meiner React-App gearbeitet habe ;)
Das ist das Netteste, was mir je jemand gesagt hat. Nun, abgesehen von dem Mal, als der Pfarrer meine Frau fragte, ob sie mich zu ihrer rechtmäßig angetrauten Ehefrau nehme, und sie sagte: "Ich schätze mal".
Eigentlich ist die Login-Seite so einfach, dass ich erstaunt bin, dass sie sich nicht auch dafür für Vanilla entschieden haben. Ich denke, dieses Muster ist ziemlich gut: Machen Sie die einfachen Seiten, die der Benutzer schnell erreicht, mit einfachem, kleinem JavaScript und laden Sie die schweren Geschütze, wenn Sie sie brauchen.
Ich fand das auch viel, aber ich denke, die Login-Seite ist wahrscheinlich deutlich komplexer, als sie scheint. Ich bin mir auch nicht 100% sicher, aber ich glaube, sie laden dort viel JavaScript im Voraus, damit die Seite, wenn Sie sich erfolgreich einloggen, SCHNELL lädt.
Fast 400 KB nur für das JS zur Handhabung einer Login-Seite ist ein guter Grund, die Dinge zu überdenken.
$ npm remove reactIch gebe Netflix hier den Vorteil des Zweifels. Wenn sie React auf der Login-Seite verwenden, haben sie bereits untersucht, es NICHT zu verwenden, und festgestellt, dass es besser ist, es einzubeziehen.
Ich arbeite seit etwa 15 Jahren als Webentwickler und kann mich nicht in moderne Frameworks wie React, Angular oder sogar Vue einarbeiten. Ich ziehe es immer noch vor, reines Vanilla JS zu verwenden. Ich fühle, dass etwas mit mir falsch ist und ich überlege, die Webentwicklung aufzugeben.
Ich denke – und das ist nur meine Meinung (aber sie ist zu 100 % richtig) – dass es keinen einzig richtigen Weg gibt, etwas zu tun. Wenn einfaches JavaScript für Sie funktioniert, machen Sie weiter damit. Wenn Sie ein Framework brauchen, ist das auch in Ordnung.
Außerdem, schauen Sie sich Ihren niedlichen Avatar an. Jeder, der so viel Mühe investiert, um so ein entzückendes... was auch immer das ist... zu finden, ist in Ordnung für mich. Wir brauchen mehr Leute wie Sie.
Toller Artikel, Burke.
Wir alle könnten gut daran tun, uns daran zu erinnern, zurückhaltend zu sein, wenn wir voreilige Schlüsse ziehen, und stattdessen tiefer in den Kontext von Aussagen im Web einzutauchen.
Ich bin hierfür auch extrem schuldig. Ich bin wahrscheinlich schuldiger als jeder andere im Internet. Ich ziehe immer voreilige Schlüsse und verbreite dann eine Menge falscher Informationen. Ich hoffe, das ist eine Phase und ich werde darüber hinwegkommen. Da ich fast 40 bin, beginne ich die Hoffnung zu verlieren.
Papa hat gesprochen! Ist das nicht die Wahrheit!
Fürs Protokoll, ich stehe um 5:00 Uhr auf.
Benutze immer noch kein React. Der Grund: Wir betreiben nicht Facebook oder Netflix. Unsere Anforderungen rechtfertigen nicht das Ausmaß an Aufwand, das eine Umstellung erfordern würde.
Vue sieht aber immer noch interessant aus.
Hut ab vor Ihrer Fähigkeit, sich aus dem Bett zu quälen, was ich als "mitten in der Nacht" bezeichnen würde. Ich dachte, wenn ich älter werde, würde ich früh aufstehen wie ein anständiger Erwachsener, aber das wird anscheinend nie passieren.
Ich dachte, wir fangen heutzutage mit einem Framework an und *finden dann* die Anwendungsanforderungen heraus. ICH MACH NUR SPASS.
Und ich stimme zu – Vue.js ist interessant… *hust* https://www.recallact.com/presentation/vuejs-next-big-thing-javascript *hust*
Ein wunderbarer Artikel, Burke!
Also, was ich verstanden habe, ist, dass Netflix einen Mietwagen benutzt hat, um das JavaScript zu beschleunigen, das mit React versichert war? Somit würde die Verwendung Ihres eigenen JavaScripts auf einer Splashpage eine absturzsichere Fahrt garantieren und Ihnen etwa 15-40 % freie Browser-Ressourcen hinterlassen!
Habe ich das richtig verstanden?
Klingt für mich plausibel!
Toller Artikel, und das meine ich nicht nur wegen der Witze. Er bringt den starken Punkt hervor, der in einer Zeit, in der es so viele Frameworks und Optionen gibt, manchmal übersehen werden kann. Manchmal braucht man kein Framework, manchmal schon und manchmal ist es eine Mischung aus beidem; es geht darum, was für das Projekt funktioniert. Werde das auf jeden Fall mit meinem Team teilen!
Danke, Cara! Ich stimme voll und ganz zu: "Es geht darum, was für das Projekt funktioniert". Wir scheinen uns als Branche auf das "richtige Vorgehen" zu versteifen, aber wie kann es eine einzige Lösung für jede einzelne jemals existierende Anwendung geben?