Ovaj je članak osvježavanje stvarne usporedbe prednjih okvira s mjerilima iz prosinca 2017.
U ovoj ćemo usporedbi pokazati kako se različite implementacije gotovo identičnih primjera RealWorld aplikacija slažu jedna protiv druge.
Primjer RealWorld aplikacije daje nam:
- Aplikacija iz stvarnog svijeta - nešto više od "zadatka". Obično "zadaci" ne prenose dovoljno znanja i perspektive za stvarno stvaranje stvarnih aplikacija.
- Standardizirano - projekt koji je u skladu s određenim pravilima. Pruža pozadinski API, statičke oznake, stilove i specifikacije.
- Napisao ili recenzirao stručnjak - dosljedan projekt iz stvarnog svijeta koji bi, u idealnom slučaju, stručnjak za tu tehnologiju izgradio ili pregledao.
Kritike iz posljednje verzije (prosinac 2017.)
✅️ Kutni nije bio u proizvodnji. Demo aplikacija navedena na RealWorld repo-u koristila je razvojnu verziju, ali zahvaljujući Jonathanu Fairclothu sada je u produkcijskoj verziji!
✅ Vue nije naveden u repo-u stvarnog svijeta, a samim tim nije ni uključen. Kao što možete zamisliti, u prednjem svijetu ovo je uzrokovalo puno vrućine. Kako to da niste dodali Vuea? Koji ti je kurac? Ovaj put je Vue.js u! Hvala Emmanuel Vilsbol .
Koje knjižnice / okvire uspoređujemo?
Kao i u članku iz prosinca 2017., uključili smo sve implementacije navedene u izvještaju RealWorld. Nije važno ima li puno sljedbenika ili ne. Jedina je kvalifikacija to što se pojavljuje na repo stranici RealWorlda.
Koje mjerne podatke promatramo?
- Izvedba: Koliko je potrebno ovoj aplikaciji da prikaže sadržaj i postane upotrebljiva?
- Veličina: Koliko je velika aplikacija? Usporedit ćemo samo veličinu kompilirane JavaScript datoteke. CSS je zajednički svim inačicama i preuzima se s CDN-a (mreža za isporuku sadržaja). HTML je zajednički i svim inačicama. Sve se tehnologije kompajliraju ili prevode u JavaScript, pa stoga veličinu ove datoteke samo određujemo.
- Linije koda: Koliko redaka koda treba autor za stvaranje aplikacije RealWorld na temelju specifikacija? Da budemo pošteni, neke aplikacije imaju malo više zvukova, ali to ne bi trebalo imati značajan utjecaj. Jedina mapa koju kvantificiramo nalazi se
src/u svakoj aplikaciji.
Mjerna vrijednost 1: Izvedba
Pogledajte prvi smisleni test boje s Lighthouse Audit koji se isporučuje s Chromeom.
Što prije slikate, to je bolje iskustvo za osobu koja koristi aplikaciju. Lighthouse također mjeri First interaktivnost, ali ovo je bilo gotovo identično za većinu aplikacija i u beta je verziji.
Vjerojatno nećete vidjeti puno razlike što se tiče izvedbe.
Metrika # 2: Veličina
Veličina prijenosa je s kartice Chrome mreža. GZIPed zaglavlja odgovora plus tijelo odgovora, kako ih isporučuje poslužitelj.
Što je datoteka manja, to je preuzimanje brže (a za raščlanjivanje je manje).
To ovisi o veličini vašeg okvira, kao i o dodatnim ovisnostima koje ste dodali, te o tome koliko dobro vaš alat za izradu može napraviti mali paket.
Možete vidjeti da Svelte, Dojo 2 i AppRun rade prilično dobar posao. Ne mogu reći dovoljno o brijestu - pogotovo kad pogledate sljedeći grafikon. Volio bih vidjeti kako Hyperapp uspoređuje ... možda sljedeći put, Jorge Bucaran?
Mjerna vrijednost 3: Linije koda
Koristeći cloc brojimo retke koda u src mapi svakog repo-a. Prazni retci i komentari nisu dio ovog izračuna.Zašto je to smisleno?
Ako je otklanjanje pogrešaka postupak uklanjanja programskih pogrešaka, tada programiranje mora biti postupak njihovog stavljanja - Edsger Dijkstra
Što manje redaka koda imate, tada je vjerojatnost pronalaska pogreške manja. Imate i manju bazu koda za održavanje.
U zaključku
Želio bih zahvaliti Ericu Simonsu za stvaranje repo-a RealWorld Example Apps i brojnim suradnicima koji su napisali različite implementacije.
Ažuriranje: Zahvaljujemo Jonathanu Fairclothu na pružanju produkcijske verzije Angular.
A ako vam je ovaj članak zanimljiv, trebali biste me pratiti na Twitteru i Mediumu.