Dostupno i u:
Turski - zahvaljujući @erdenizZz,
Portugues - zahvaljujući @felipefialho
Po treći put uspoređujemo Front-End okvire pomoću primjera iz stvarnog svijeta. Primjer aplikacije RealWorld daje nam:
RealWorld App
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, stvarni projekt koji bi, u idealnom slučaju, stručnjak za tu tehnologiju izgradio ili pregledao.
Koje knjižnice / okvire uspoređujemo?
Što se tiče pisanja, postoji 18 implementacija Conduit-a u primjeru aplikacije RealWorld za repo.
Nije važno ima li puno sljedbenika ili ne. Jedina je kvalifikacija to što se pojavljuje na repo stranici RealWorlda.
Koje mjerne podatke promatramo?
Izvođenje
Koliko vremena ovoj aplikaciji treba da prikaže sadržaj i postane upotrebljiv?
Veličina
Kolika je 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 je trebalo autoru da stvori aplikaciju 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
Provjerit ćemo ocjenu izvedbe iz Lighthouse Audita koja se isporučuje s Chromeom. Lighthouse daje ocjenu izvedbe između 0 i 100. 0 je najniža moguća ocjena.
Postavke revizije
Izvedba je kombinirani rezultat iz sljedećih mjernih podataka
- Prva sadržajna boja
- Prva smislena boja
- Indeks brzine
- Prvo mirovanje CPU-a
- Vrijeme je za interaktivnost
- Procijenjena kašnjenje ulaza
Za više detalja pogledajte Vodič za bodovanje svjetionika.
Performanse TL; DR
Što prije slikate i što prije netko može nešto učiniti, to je bolje iskustvo za osobu koja koristi aplikaciju.
Napomena: PureScript je preskočen zbog nedostatka demo aplikacije.
Zaključak
Većina aplikacija ima ocjenu iznad 90. Vjerojatno nećete osjetiti veliku razliku što se tiče performansi.
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 ovisi o veličini vašeg okvira, kao i o dodatnim ovisnostima koje ste dodali, te o tome koliko dobro vaš alat za izgradnju može ukloniti neiskorišteni kod iz vašeg snopa.
Veličina TL; DR
Što je datoteka manja, to je preuzimanje brže i manje za raščlanjivanje.
Zaključak
Na ovom se području događa puno senzacionalnih stvari. Svelte - čarobni okvir korisničkog sučelja koji nestaje - stvarno se drži svoje udarne linije. Stencil je novo dijete u ovom mjerilu i također ima prilično dobre rezultate. Obje su relativno nove i pomiču granice mogućeg u pogledu veličine.
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 DijkstraLinije koda TL; DR
To pokazuje koliko je zadana knjižnica / okvir / jezik jezgrovit. Koliko redaka koda trebate za implementaciju gotovo iste aplikacije (neki od njih imaju malo više pojaseva i zvižduka) u skladu sa specifikacijama.
Napomena Imba: Imba je preskočena zbog toga što cloc nije mogao obraditi .imbadatoteke.
Napomena Elm: Elm programeri kôd pišu malo vertikalnije, stoga je velik broj LoC-a - barem je ovo što su mi rekli.
Napomena Angular + ngrx: Izračun LoC-a izveden /libssamo s mapom uključujući .tsi .htmldatoteke. Ako smatrate da je ovo pogrešno, javite mi koji je točan broj i kako ste ga izračunali.
Napomena Hyperapp: LoC nije bio točan kad je članak objavljen, zahvaljujući Mateuszu Kwasniewskom što je ukazao na ispravan način izračuna LoC.
Zaključak
ClojureScript s preokretom daje vam najviše udaraca? za LoC. Clojure je poznat po tome što je neobično izražajan. Ako vam je stalo do vašeg LoC-a, trebali biste provjeriti ClojureScript, AppRun i Svelte.
Sažetak
Imajte na umu da ovo nije baš usporedba jabuka s jabukama. Neke implementacije koriste razdvajanje koda, a neke ne. Neki od njih hostirani su na GitHubu, neki na Nowu, a neki na Netlifyu. Želite li i dalje znati koji je najbolji? Najbolji je onaj koji odgovara vašim potrebama.
P: Volite li tipove?
O: Pogledajte Elm, PureScript i TypeScript - Angular, AppRun, Dojo.
P: Želite li imati vrlo mali otisak?
O: Pogledajte Svelte, Stencil i AppRun.
P: Želite li imati najmanju bazu koda za održavanje?
O: Pogledajte ClojureScript s re-frameom, AppRun i Svelte.
P: Želite naučiti nešto novo?
O: Odaberite onu koju ne poznajete!
Pitanja
# 1 Zašto okviri X, Y i Z nisu bili uključeni u ovu usporedbu?
Budući da implementacija nije dovršena na RealWorld repo-u. Razmislite o doprinosu! Implementirajte rješenje u svoju omiljenu biblioteku / okvir po vašem izboru, a mi ćemo ga uključiti sljedeći put!
# 2 Zašto to nazivaš stvarnim svijetom?
Jer to je nešto više od aplikacije koja se obvezuje. Pod RealWorldom ne mislimo da ćemo uspoređivati plaće, održavanje, produktivnost, krivulje učenja itd. Postoje i druga istraživanja koja odgovaraju na neka od ovih pitanja. Pod Realworlom podrazumijevamo aplikaciju koja se povezuje s poslužiteljem, provjerava autentičnost i omogućuje korisnicima CRUD - baš kao što bi to radila stvarna aplikacija.
# 3 Zašto niste uključili moj omiljeni okvir?
Molimo pogledajte 1. br. Gore, ali za svaki slučaj, opet dolazi: jer implementacija nije dovršena u RealWorld repo-u. Ne radim sve implementacije - to je napor zajednice. Razmislite o doprinosu ako želite vidjeti svoj okvir u usporedbi.
# 4 Koju ste verziju knjižnice / okvira uključili?
Ona koja je dostupna u vrijeme ožičenja (ožujak 2019). Informacije potječu iz RealWorld repo-a. Siguran sam da to možete saznati iz GitHub repo-a.
# 5 Zašto ste zaboravili uključiti okvir koji je popularniji od onog u usporedbi?
Opet, pogledajte gore. Implementacija nije dovršena na RealWorld repo-u; to je tako jednostavno.
Zahvaljujemo Richu Harrisu i Richardu Feldmanu što su pogledali prije objavljivanja.
Nadopune:
Kada je ovaj članak objavljen, TL; DR LoC imao je sljedeći opis:
Što manje redaka koda imate, tada je vjerojatnost pronalaska pogreške manja. Imate i manju bazu koda za održavanje. Ako vam se sviđa ovaj članak, slijedite me na Twitteru. Pišem / tweetu samo o programiranju i tehnologiji.