Een realistische vergelijking van front-end frameworks met benchmarks

Foto door delfi de la Rua op Unsplash
UPDATE: Er is een nieuwere versie van dit artikel

De afgelopen jaren hebben we een explosie van front-end frameworks gezien. Elk van hen is meer dan in staat om geweldige webapplicaties te bouwen. Dus hoe vergelijk je en besluit je welke te gebruiken voor je volgende project?

Allereerst hebben we een paar dingen nodig om een ​​zinvolle vergelijking te maken:

  1. Real World App - Iets meer dan een "todo". Gewoonlijk brengen 'taken' geen kennis en perspectief over om echte toepassingen te bouwen.
  2. Gestandaardiseerd - Een project dat voldoet aan bepaalde regels. Gehost op dezelfde plaats, biedt een back-end API, statische markup, stijlen en spec.
  3. Geschreven door een expert - Een consistent, echt project, dat idealiter een expert in die technologie zou hebben gebouwd. Dit is waar, in de meeste gevallen (zie hieronder).

Dus hoe krijgen we zo'n project? Het goede nieuws is dat Eric Simons al een RealWorld-project heeft gemaakt. Het is een kloon van het blogplatform Medium. Elke implementatie van dit project gebruikt dezelfde HTML-structuur, CSS en API-specificatie, maar een andere bibliotheek / framework. Als het om expertkennis gaat, is dat meestal het geval. Ik schreef een implementatie in ClojureScript en re-frame en ik beschouw mezelf niet als een expert. Ter verdediging heeft een expert mijn code beoordeeld - bedankt Daniel Compton.

Nu we een basisspecificatie hebben, hebben we een standaardset tests / metrieken nodig om ze te vergelijken.

  1. Prestatie. Hoe lang duurt het voordat deze app inhoud weergeeft en bruikbaar wordt?
  2. Grootte. Hoe groot is de app? We zullen alleen de grootte van de gecompileerde JavaScript vergelijken. De CSS is gemeenschappelijk voor alle varianten en wordt gedownload van een CDN (Content Delivery Network). De HTML is ook voor alle varianten gebruikelijk. Alle technologieën compileren of transpileren naar JavaScript, dus we rangschikken dit bestand alleen.
  3. Regels code. Hoeveel regels code had de auteur nodig om de RealWorld-app te maken op basis van specificaties? Om eerlijk te zijn hebben sommige apps een beetje meer toeters en bellen, maar het zou geen significante impact moeten hebben. De enige map die we kwantificeren is src / in elke app.

Op het moment van schrijven (december 2017) is het RealWorld-project beschikbaar in de volgende kaders:

  • Reageren / Redux
  • Iep
  • Hoekig 4+
  • Hoekig 1.5+
  • Reageren / MobX
  • Crizmas MVC
  • CLSJ Keechma
  • AppRun
  • CLJS re-frame (dit heb ik gedaan. Het staat nog niet op RealWorld Project).

Metriek # 1: prestaties

Eerste zinvolle verftest met Lighthouse Audit die wordt geleverd met Chrome.

Hoe sneller je schildert, hoe beter de ervaring voor de persoon die de app gebruikt. Lighthouse meet ook First interactive, maar dit was bijna identiek voor de meeste apps.

Eerste betekenisvolle verf (ms) - lager is beter

Metriek 2: Grootte

De overdrachtsgrootte is van het Chrome-netwerktabblad. GZIPed-antwoordkoppen plus de antwoordtekst, zoals geleverd door de server.

Kleiner bestand = snellere download en minder om te parseren.

Dit is afhankelijk van de grootte van uw framework, eventuele extra afhankelijkheden die u hebt toegevoegd en hoe goed uw build-tool een kleine bundel kan maken.

Overdrachtsgrootte (KB) - lager is beter

Metriek # 3: regels code

Met behulp van cloc tellen we coderegels in de src-map van elke repo. Lege regels en commentaarregels maken geen deel uit van deze berekening. Waarom is dit zinvol?

Als foutopsporing het proces is van het verwijderen van softwarefouten, moet programmeren het proces zijn om ze in te voeren - Edsger Dijkstra

Hoe minder regels code, hoe kleiner de kans op een fout en hoe kleiner de codebasis.

# Coderegels - minder is beter

Conclusie

Prestatie

Dit is een RealWorld-vergelijking en geen benchmark in een vacuüm. Tests werden uitgevoerd vanuit Europa (Zwitserland). Alle apps werden gehost op Github. Waarden kunnen voor u verschillen, wat prima is. Tests werden een paar keer uitgevoerd voor elke app, vervolgens gemiddeld en afgerond. De resultaten waren behoorlijk lineair in de loop van de dag. De meeste bibliotheken / frameworks zijn uitstekend en goed. Je zult niet veel verschil zien als het gaat om prestaties.

Grootte

De bundelgrootte voor elke app is altijd hetzelfde. We vergelijken vergelijkbare implementaties en kijken hoe de bundelgroottes verschillen. AppRun is krankzinnig! Ik heb een paar keer gekeken omdat ik het niet kon geloven. Elm doet geweldig werk als het gaat om bundelgrootte en vooral als je naar coderegels kijkt.

AppRun-bundelgrootte 18,7 KB

Regels code

Dit heeft de grootste impact op u als softwareontwikkelaar. Hoe meer regels code, hoe meer u moet typen en meer onderhoud. Er zijn hier enkele afwegingen. Vooral als het gaat om getypte versus dynamische talen. Typen bieden meer veiligheid en kosten: meer dingen om te typen.

Getypt versus dynamisch

Getypt: Elm, Angular 4+ en AppRun.

Dynamisch: Reageren | Redux, hoekig 1.5, reageren | MobX, Crizmas MVC, CLJS Keechma en CLJS re-frame.

Dus wat is beter? Het is niet beter of slechter, het is anders. Net als TDD (Test Driven Development) houden sommige mensen ervan, sommigen haten het. Je kunt geweldige software met of zonder ontwikkelen - kies degene die beter bij je past.

Waar zijn Vue, Preact, Ember, Svelte, Aurelia en anderen?

Het lijkt erop dat ze te laat zijn op het feest, maar maak je geen zorgen. Ik zal nog een ronde doen als we ze hebben. Er zijn al open problemen - overweeg een bijdrage te leveren! Of begin helemaal opnieuw en open een nieuw nummer.

Laatste woord

Deze vergelijking is precies wat er staat. Vergelijkt verschillende implementaties van vergelijkbare real-world webapplicaties in een echte wereld. Ik weet het, het is niet perfect. Het verschilt op basis van serverbelasting, netwerkverkeer en vele andere dingen die in de echte wereld gebeuren.

Met dank aan Daniel Compton voor het lezen van het bewijs.

Als je dit artikel leuk vond en graag op de hoogte gebracht wilt worden wanneer ik een vergelijkbaar artikel uitbreng, overweeg me dan te volgen op medium en twitter.