Ein RealWorld-Vergleich von Front-End-Frameworks mit Benchmarks (Update 2019)

Auch erhältlich in:

Türkisch - danke an @erdenizZz,

Portugues - danke an @felipefialho

Zum dritten Mal vergleichen wir Front-End-Frameworks mithilfe der Real World-Beispiel-Apps. Die RealWorld-Beispiel-App bietet uns:

RealWorld App

Etwas mehr als ein "todo". Normalerweise vermitteln „Aufgaben“ nicht genug Wissen und Perspektive, um echte Anwendungen zu erstellen.

Standardisiert

Ein Projekt, das bestimmten Regeln entspricht. Bietet eine Back-End-API, statisches Markup, Stile und Spezifikationen.

Geschrieben oder überprüft von einem Experten

Ein konsistentes, reales Projekt, das im Idealfall ein Experte für diese Technologie erstellt oder überprüft hätte.

Welche Bibliotheken / Frameworks vergleichen wir?

Zum Zeitpunkt des Schreibens gibt es 18 Implementierungen von Conduit im RealWorld-Beispiel-App-Repo.

Es spielt keine Rolle, ob es eine große Anhängerschaft hat oder nicht. Die einzige Einschränkung ist, dass es auf der RealWorld-Repo-Seite angezeigt wird.

Welche Metriken betrachten wir?

Performance

Wie lange dauert es, bis diese App Inhalte anzeigt und verwendet werden kann?

Größe

Wie groß ist die App? Wir werden nur die Größe der kompilierten JavaScript-Datei (en) vergleichen. Das CSS ist allen Varianten gemeinsam und wird von einem CDN (Content Delivery Network) heruntergeladen. Der HTML-Code ist auch allen Varianten gemeinsam. Alle Technologien werden in JavaScript kompiliert oder transpiliert, daher haben wir nur die Größe dieser Datei (en).

Zeilen von Code

Wie viele Codezeilen benötigte der Autor, um die RealWorld-App basierend auf den Spezifikationen zu erstellen? Um fair zu sein, einige Apps haben ein bisschen mehr Schnickschnack, aber es sollte keine signifikanten Auswirkungen haben. Der einzige Ordner, den wir quantifizieren, befindet sich src/in jeder App.

Metrik 1: Leistung

Wir überprüfen den Leistungswert von Lighthouse Audit, das mit Chrome geliefert wird. Lighthouse gibt eine Leistungsbewertung zwischen 0 und 100 zurück. 0 ist die niedrigstmögliche Bewertung.

Audit-Einstellungen

Die Leistung ist eine kombinierte Bewertung aus den folgenden Metriken

  • Erster zufriedener Anstrich
  • Erste sinnvolle Farbe
  • Geschwindigkeitsindex
  • Erster CPU-Leerlauf
  • Zeit für Interaktivität
  • Geschätzte Eingangslatenz

Weitere Informationen finden Sie im Lighthouse Scoring Guide.

Leistung TL; DR

Je früher Sie malen und je schneller jemand etwas tun kann, desto besser ist die Erfahrung für die Person, die die App verwendet.

Hinweis: PureScript wurde aufgrund fehlender Demo-Anwendung übersprungen.

Fazit

Die meisten Apps erreichen einen Wert über 90. Sie werden wahrscheinlich keinen großen Unterschied in Bezug auf die Leistung spüren.

Metrik Nr. 2: Größe

Die Übertragungsgröße wird auf der Registerkarte "Chrome-Netzwerk" angegeben. GZIPed-Antwortheader sowie der vom Server bereitgestellte Antworttext.

Dies hängt von der Größe Ihres Frameworks sowie von zusätzlichen Abhängigkeiten ab, die Sie hinzugefügt haben, und davon, wie gut Ihr Build-Tool den nicht verwendeten Code aus Ihrem Bundle entfernen kann.

Größe TL; DR

Je kleiner die Datei, desto schneller der Download und weniger zu analysieren.

Fazit

In diesem Bereich passieren viele sensationelle Dinge. Svelte - das magisch verschwindende UI-Framework - hält wirklich an seiner Pointe fest. Stencil ist das neue Kind in diesem Benchmark und schneidet auch ziemlich gut ab. Beide sind relativ neu und stoßen an die Grenzen des Größeren.

Metrik Nr. 3: Codezeilen

Mit cloc zählen wir die Codezeilen im src-Ordner jedes Repos. Leer- und Kommentarzeilen sind nicht Teil dieser Berechnung. Warum ist das sinnvoll?

Wenn beim Debuggen Softwarefehler behoben werden, muss beim Programmieren diese Fehler behoben werden - Edsger Dijkstra

Codezeilen TL; DR

Dies zeigt, wie prägnant eine Bibliothek / ein Framework / eine Sprache ist. Wie viele Codezeilen benötigen Sie, um fast dieselbe App (einige von ihnen haben etwas mehr Gürtel und Pfeifen) entsprechend der Spezifikation zu implementieren.

Hinweis Imba: Imba wurde übersprungen, da Cloc keine .imbaDateien verarbeiten konnte.

Hinweis Elm: Elm-Entwickler schreiben den Code etwas vertikaler, daher die hohe Anzahl an LoC - zumindest wurde mir dies gesagt.

Hinweis Angular + ngrx: Die LoC-Berechnung wird nur mit Ordnern /libseinschließlich .tsund .htmlDateien durchgeführt. Wenn Sie glauben, dass dies falsch ist, lassen Sie mich bitte wissen, was die richtige Zahl ist und wie Sie sie berechnet haben.

Hinweis Hyperapp: LoC war bei Veröffentlichung des Artikels nicht korrekt, danke an Mateusz Kwasniewski für den Hinweis auf die korrekte Methode zur Berechnung der LoC.

Fazit

ClojureScript mit Re-Frame gibt Ihnen das meiste Knall? für die LoC. Clojure ist dafür bekannt, ungewöhnlich ausdrucksstark zu sein. Wenn Sie sich für Ihre LoC interessieren, sollten Sie sich ClojureScript, AppRun und Svelte ansehen.

Zusammenfassung

Beachten Sie, dass dies nicht gerade ein Vergleich von Äpfeln zu Äpfeln ist. Einige Implementierungen verwenden die Codeaufteilung, andere nicht. Einige von ihnen werden bei GitHub gehostet, andere bei Now und andere bei Netlify. Möchten Sie immer noch wissen, welches das beste ist? Das beste ist das, das Ihren Bedürfnissen entspricht.

F: Magst du Typen?

A: Sehen Sie sich Elm, PureScript und TypeScript an - Angular, AppRun, Dojo.

F: Möchten Sie einen sehr kleinen Platzbedarf haben?

A: Schauen Sie sich Svelte, Stencil und AppRun an.

F: Möchten Sie die kleinste zu wartende Codebasis haben?

A: Testen Sie ClojureScript mit Re-Frame, AppRun und Svelte.

F: Möchten Sie etwas Neues lernen?

A: Wählen Sie die aus, die Sie nicht kennen!

FAQ

# 1 Warum wurden Framework X, Y und Z nicht in diesen Vergleich einbezogen?

Weil die Implementierung bei RealWorld Repo nicht abgeschlossen ist. Erwägen Sie einen Beitrag! Implementieren Sie die Lösung in Ihrer bevorzugten Bibliothek / Ihrem bevorzugten Framework und wir werden sie beim nächsten Mal einbinden!

# 2 Warum nennst du es die reale Welt?

Weil es ein bisschen mehr als eine To-Do-App ist. Mit RealWorld meinen wir nicht, dass wir Gehälter, Wartung, Produktivität, Lernkurven usw. vergleichen. Es gibt andere Umfragen, die einige dieser Fragen beantworten. Was wir unter RealWorld verstehen, ist eine Anwendung, die eine Verbindung zu einem Server herstellt, sich authentifiziert und Benutzern CRUD ermöglicht - genau wie es eine reale App tun würde.

# 3 Warum hast du mein Lieblings-Framework nicht aufgenommen?

Bitte sehen Sie # 1 oben, aber nur für den Fall, hier kommt es wieder: weil die Implementierung bei RealWorld Repo nicht abgeschlossen ist. Ich mache nicht alle Implementierungen - es ist eine Gemeinschaftsanstrengung. Erwägen Sie einen Beitrag, wenn Sie Ihr Framework im Vergleich sehen möchten.

# 4 Welche Version der Bibliothek / des Frameworks haben Sie aufgenommen?

Die zum Zeitpunkt der Verkabelung (März 2019) verfügbare. Die Informationen stammen aus dem RealWorld-Repo. Ich bin sicher, dass Sie dies im GitHub-Repo herausfinden können.

# 5 Warum haben Sie vergessen, ein Framework aufzunehmen, das beliebter ist als das im Vergleich?

Wieder siehe oben. Die Implementierung ist bei RealWorld Repo nicht abgeschlossen. so einfach ist das

Vielen Dank an Rich Harris und Richard Feldman für den Blick vor der Veröffentlichung.

Aktualisierung:

Als dieser Artikel veröffentlicht wurde, hatte die TL; DR LoC folgende Beschreibung:

Je weniger Codezeilen Sie haben, desto geringer ist die Wahrscheinlichkeit, einen Fehler zu finden. Sie müssen auch eine kleinere Codebasis pflegen. Wenn Ihnen dieser Artikel gefällt, sollten Sie mir auf Twitter folgen. Ich schreibe / twittere nur über Programmierung und Technologie.