En sammenligning fra den virkelige verden af ​​frontend-rammer med benchmarks (opdatering fra 2018)

Denne artikel er en opdatering af A Real-World Comparison of Front-End Frameworks with Benchmarks fra december 2017.

I denne sammenligning viser vi, hvordan forskellige implementeringer af næsten identiske RealWorld-eksempler på apps stabler op mod hinanden.

RealWorld-eksempelappen giver os:

  1. Real World App - Noget mere end en "todo". Normalt formidler “todos” ikke nok viden og perspektiv til faktisk at opbygge rigtige applikationer.
  2. Standardiseret - Et projekt, der overholder visse regler. Giver en back-end API, statisk markering, typografier og spec.
  3. Skrevet eller gennemgået af en ekspert - Et konsekvent projekt i den virkelige verden, som ideelt set en ekspert inden for denne teknologi ville have bygget eller gennemgået.

Kritik fra den sidste version (dec. 2017)

✅️ Angular var ikke i produktion. Demo-appen, der er anført på RealWorld-repoen, brugte en udviklingsversion, men takket være Jonathan Faircloth er den nu i produktionsversion!

✅ Vue blev ikke opført i Real World repo, og blev derfor ikke inkluderet. Som du kan forestille dig, i front-end-verdenen, forårsagede dette en masse varme. Hvorfor tilføjede du ikke Vue? Hvad er der galt med dig? Denne gang er Vue.js inde! Tak Emmanuel Vilsbol .

Hvilke biblioteker / rammer sammenligner vi?

Som i december 2017-artiklen inkluderede vi alle implementeringer, der er anført i RealWorld-repoen. Det betyder ikke noget, om det har en stor følge eller ej. Den eneste kvalifikation er, at den vises på RealWorld-reposiden.

Hvilke målinger ser vi på?

  1. Ydeevne: Hvor lang tid tager denne app at vise indhold og blive anvendelig?
  2. Størrelse: Hvor stor er appen? Vi sammenligner kun størrelsen på de kompilerede JavaScript-filer. CSS er fælles for alle varianter og downloades fra et CDN (Content Delivery Network). HTML er også fælles for alle varianter. Alle teknologier kompilerer eller transpilerer til JavaScript, så vi kun størrelse denne fil (er).
  3. Lines of Code: Hvor mange linjer med kode havde forfatteren brug for for at oprette RealWorld-appen baseret på spec? For at være retfærdig har nogle apps lidt flere klokker og fløjter, men det bør ikke have en væsentlig indvirkning. Den eneste mappe, vi kvantificerer, er src/i hver app.

Metrisk nr. 1: Ydeevne

Tjek den første meningsfulde malingstest med Lighthouse Audit, der leveres med Chrome.

Jo hurtigere du maler, jo bedre er oplevelsen for den person, der bruger appen. Fyr måler også Først interaktiv, men dette var næsten identisk for de fleste apps, og det er i beta.

Du vil sandsynligvis ikke se meget forskel, når det kommer til ydeevne.

Metrisk nr. 2: Størrelse

Overførselsstørrelse er fra Chrome-netværksfanen. GZIPed-svaroverskrifter plus svarorganet, som leveret af serveren.

Jo mindre filen er, jo hurtigere downloades (og der er mindre at analysere).

Dette afhænger af størrelsen på din ramme såvel som af eventuelle ekstra afhængigheder, du har tilføjet, og hvor godt dit buildværktøj kan skabe et lille bundt.

Du kan se, at Svelte, Dojo 2 og AppRun gør et ret godt stykke arbejde. Jeg kan ikke sige nok om Elm - især når man ser på det næste diagram. Jeg vil gerne se, hvordan Hyperapp sammenligner ... måske næste gang, Jorge Bucaran?

Metrisk nr. 3: Kodelinjer

Ved hjælp af cloc tæller vi kodelinjerne i hver repos src-mappe. Tomme linjer og kommentarer er ikke en del af denne beregning. Hvorfor er dette meningsfuldt?

Hvis fejlretning er processen med at fjerne softwarefejl, skal programmering være processen med at sætte dem i - Edsger Dijkstra

Jo færre kodelinjer du har, så sandsynligheden for at finde en fejl er mindre. Du har også en mindre kode base at vedligeholde.

Afslutningsvis

Jeg vil gerne sige en stor tak til Eric Simons for oprettelsen af ​​RealWorld Eksempel Apps repo og til mange bidragydere, der skrev forskellige implementeringer.

Opdatering: Tak til Jonathan Faircloth for at levere produktionsversionen af ​​Angular.

Og hvis du fandt denne artikel interessant, skal du følge mig på Twitter og Medium.