En reel sammenligning af front-end rammer med benchmarks

Foto af delfi de la Rua på Unsplash
OPDATERING: Der er en nyere version af denne artikel

I de sidste par år har vi set en eksplosion af front-end rammer. Hver af dem er mere end i stand til at opbygge gode webapplikationer. Så hvordan kan du sammenligne og beslutte, hvilken der skal bruges til dit næste projekt?

For det første har vi brug for et par ting for at kunne foretage en meningsfuld sammenligning:

  1. Real World App - Noget mere end en “todo”. Normalt overfører “todos” ikke viden og perspektiv til faktisk at opbygge reelle applikationer.
  2. Standardiseret - Et projekt, der overholder visse regler. Hostet på samme sted giver en back-end API, statisk markering, stilarter og spec.
  3. Skrevet af en ekspert - Et konsistent projekt i den virkelige verden, som ideelt set ville en ekspert i den teknologi have bygget. Dette er i det mindste det meste af tiden (se nedenfor).

Så hvordan får vi et sådant projekt? Den gode nyhed er, at Eric Simons allerede har oprettet et RealWorld-projekt. Det er en klon af Medium-bloggingsplatformen. Hver implementering af dette projekt bruger den samme HTML-struktur, CSS og API-specifikationer, men en anden bibliotek / ramme. Når det kommer til ekspertviden er det sandt det meste af tiden. Jeg skrev en implementering i ClojureScript og re-frame, og jeg betragter mig ikke som en ekspert. Til mit forsvar gennemgik en ekspert min kode - tak Daniel Compton.

Nu har vi en basespecifikation, vi har brug for et standard sæt test / metrics for at sammenligne dem.

  1. Ydeevne. Hvor lang tid tager denne app for at vise indhold og blive anvendelig?
  2. Størrelse. Hvor stor er appen? Vi sammenligner kun størrelsen på det samlede JavaScript. 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 kompileres eller transpileres til JavaScript, og vi formaterer derfor kun denne fil.
  3. Kodelinjer. Hvor mange kodelinjer havde forfatteren brug for at oprette RealWorld app baseret på spec? For at være retfærdige har nogle apps lidt flere klokker og fløjter, men det bør ikke have nogen betydelig indflydelse. Den eneste mappe, vi kvantificerer, er src / i hver app.

I skrivende stund (dec. 2017) er RealWorld-projektet tilgængeligt i følgende rammer:

  • React / Redux
  • Elm
  • Vinkel 4+
  • Vinkel 1,5+
  • React / MobX
  • Crizmas MVC
  • CLSJ Keechma
  • AppRun
  • CLJS re-frame (Dette er den jeg gjorde. Det er endnu ikke opført på RealWorld Project).

Metrisk nr. 1: Ydeevne

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

Jo før du maler, jo bedre er oplevelsen for den person, der bruger appen. Lighthouse måler også First interaktiv, men dette var næsten identisk for de fleste apps.

Første meningsfuld maling (ms) - lavere er bedre

Metrisk nr. 2: Størrelse

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

Mindre fil = hurtigere download og mindre at analysere.

Dette afhænger af størrelsen på din ramme, eventuelle ekstra afhængigheder, du tilføjede, og hvor godt dit build-værktøj kan lave et lille bundt.

Transfer størrelse (KB) - lavere er bedre

Metrisk nr. 3: kodelinjer

Ved hjælp af cloc tæller vi kodelinjer i hver repos src-mappe. Blanke og kommentarlinjer er ikke en del af denne beregning. Hvorfor er dette meningsfuldt?

Hvis fejlfinding er processen til at fjerne softwarebugs, skal programmering være processen med at sætte dem i - Edsger Dijkstra

Jo færre kodelinjer har du, mindre sandsynlighed for en fejl og mindre kodebase at opretholde.

# Kodelinjer - færre er bedre

Konklusion

Ydeevne

Dette er en RealWorld-sammenligning og ikke et benchmark i et vakuum. Tests blev udført fra Europa (Schweiz). Alle apps blev hostet på Github. Værdier kan variere for dig, hvilket er fint. Tests blev udført et par gange for hver app, derefter gennemsnitligt og afrundet. Resultaterne var ret lineære, når man sammenligner hele dagen. De fleste af bibliotekerne / rammerne er inden for området fremragende og gode. Du vil ikke se meget forskel, når det kommer til præstationer.

Størrelse

Bundtstørrelsen for hver app er altid den samme. Vi sammenligner lignende implementeringer og ser på, hvordan bundstørrelser adskiller sig. AppRun er sindssyg! Jeg kiggede et par gange, fordi jeg ikke kunne tro det. Elm laver et fantastisk stykke arbejde, når det kommer til bundstørrelse og især når man ser på kodelinjer.

AppRun bundstørrelse 18,7KB

Kodelinjer

Dette har den største indflydelse på dig som softwareudvikler. Jo flere kodelinjer, jo mere skal du indtaste og mere for at vedligeholde. Der er nogle modregninger her. Især når det kommer til typiske kontra dynamiske sprog. Typer giver dig mere sikkerhed og kommer til en pris - flere ting at skrive.

Typet kontra dynamisk

Typet: Elm, Angular 4+ og AppRun.

Dynamisk: React | Redux, Angular 1.5, React | MobX, Crizmas MVC, CLJS Keechma og CLJS omrammer.

Så hvad er bedre? Det er ikke bedre eller værre, det er anderledes. Som TDD (Test Driven Development) elsker nogle mennesker det, nogle hader det. Du kan udvikle fantastisk software med eller uden det - vælg den, der passer bedre til dig.

Hvor er Vue, Preact, Ember, Svelte, Aurelia og andre?

Det ser ud til, at de er sent til festen, men bekymre dig ikke. Jeg laver en ny runde, når vi har dem. Der er allerede åbne problemer - overvej at bidrage! Eller start fra bunden og åbn et nyt nummer.

Sidste ord

Denne sammenligning er nøjagtigt hvad den siger. Sammenligner forskellige implementeringer af lignende webapplikationer i den virkelige verden i en reel verden. Jeg ved, det er ikke perfekt. Det adskiller sig fra serverbelastning, netværkstrafik og mange andre ting, der sker i den virkelige verden.

Tak til Daniel Compton for korrekturlæsning.

Hvis du nød denne artikel og gerne vil blive underrettet, når jeg frigiver en lignende artikel, kan du overveje at følge mig på medium og twitter.