A front-end keretrendszerek összehasonlítása a benchmarkokkal (2018-as frissítés)

Ez a cikk egy frissítés a front-end keretrendszerek és a benchmarkok valós összehasonlításáról 2017 decemberétől.

Ebben az összehasonlításban megmutatjuk, hogy a szinte azonos RealWorld példaalkalmazások különböző megvalósításai hogyan halmozódnak egymással.

A RealWorld példaalkalmazás:

  1. Valós világalkalmazás - Valami több, mint egy "todo". Általában a „todosok” nem adnak elegendő tudást és perspektívát ahhoz, hogy valódi alkalmazásokat építsenek ki .
  2. Standardizált - Bizonyos szabályoknak megfelelő projekt. Biztosít egy háttér-API-t, statikus jelölést, stílusokat és specifikációkat.
  3. Szakértő által írt vagy áttekintett - Következetes, valós projekt, amelyet ideális esetben az adott technológia szakértője épített volna vagy áttekintene.

Kritika a legutóbbi verziótól (2017. dec.)

✅️ Az Angular nem volt gyártásban. A RealWorld repón felsorolt ​​demo alkalmazás fejlesztői verziót használt, de Jonathan Faircloth-nak köszönhetően most már gyártói verzióban van!

✅ Vue nem szerepelt a Való Világ repóban, így nem szerepelt. Ahogy el lehet képzelni, a front-end világban ez sok hőt okozott. Hogy nem adtad hozzá Vue-t? Mi a fene bajod van? Ezúttal a Vue.js van bent! Köszönöm Emmanuel Vilsbol .

Mely könyvtárakat / keretrendszereket hasonlítjuk össze?

A 2017. decemberi cikkhez hasonlóan a RealWorld repóban felsorolt ​​összes megvalósítást belefoglaltuk. Nem számít, van-e nagy követője vagy sem. Az egyetlen minősítés az, hogy a RealWorld repo oldalán jelenik meg.

Milyen mutatókat nézünk?

  1. Teljesítmény: Mennyi ideig tart ez az alkalmazás a tartalom megjelenítéséhez és használhatóvá válásához?
  2. Méret: mekkora az alkalmazás? Csak a lefordított JavaScript fájl (ok) méretét fogjuk összehasonlítani. A CSS minden változatban közös, és letölthető a CDN-ről (Content Delivery Network). A HTML minden változatban közös. Valamennyi technológia fordítja vagy áttelepíti a JavaScript-be, így csak ezeket a fájlokat méretezzük.
  3. Kódsorok : Hány sornyi kódra volt szüksége a szerzőnek a RealWorld alkalmazás létrehozásához specifikációk alapján? Hogy igazságos legyek, egyes alkalmazásokban valamivel több a csengő és a síp, de ennek nem kellene jelentős hatást gyakorolnia. Az egyetlen mappa, amelyet számszerűsítünk, src/az egyes alkalmazásokban található.

1. mutató: Teljesítmény

Nézze meg az első értelmes festéstesztet a Lighthouse Audit alkalmazással, amelyet a Chrome-mal szállítanak.

Minél hamarabb fest, annál jobb élményt nyújt az Alkalmazást használó személy számára. A Lighthouse az első interaktív funkciókat is méri, de ez a legtöbb alkalmazás esetében szinte azonos volt, és bétaverzióban van.

Valószínűleg nem fog sok különbséget látni a teljesítmény terén.

Metrika # 2: Méret

Az átviteli méret a Chrome hálózati lapról származik. A kiszolgáló által szállított GZIP-kapcsolattal ellátott fejlécek és válasz-törzs.

Minél kisebb a fájl, annál gyorsabb a letöltés (és kevesebbet kell elemezni).

Ez függ a keretrendszer méretétől, valamint a hozzáadott extra függőségektől, valamint attól, hogy az építőeszköz mennyire képes kis köteget készíteni.

Láthatja, hogy a Svelte, a Dojo 2 és az AppRun nagyon jó munkát végez. Elmről nem tudok eleget mondani - főleg, ha a következő táblázatot nézzük. Szeretném látni, hogy a Hyperapp összehasonlítja ... talán legközelebb, Jorge Bucaran?

Metrika # 3: Kódsorok

A cloc használatával megszámoljuk az egyes repo src mappáinak kódsorait. Az üres és a megjegyzés sorok nem részei ennek a számításnak. Miért értelmes ez?

Ha a hibakeresés a szoftverhibák eltávolításának folyamata, akkor a programozásnak a beillesztés folyamatának kell lennie - Edsger Dijkstra

Minél kevesebb kódsor van, akkor kisebb a valószínűsége annak, hogy hibát talál. Kisebb kódbázissal is rendelkezik, amelyet fenntartani kell.

Összefoglalva

Nagy köszönetet szeretnék mondani Eric Simonsnak a RealWorld Example Apps repo létrehozásáért, és számos közreműködőnek, akik különböző megvalósításokat írtak.

Frissítés: Köszönet Jonathan Faircloth-nak az Angular produkciós verziójának biztosításáért.

És ha érdekesnek találta ezt a cikket, kövessen engem a Twitteren és a Mediumon.