RealWorld front-end ietvaru un etalonu salīdzinājums (2019. gada atjauninājums)

Pieejams arī:

Turku valoda - pateicoties @erdenizZz,

Portugāļi - paldies @felipefialho

Trešo reizi mēs salīdzinām Front-End ietvarus, izmantojot reālās pasaules piemēru lietotnes. RealWorld lietotnes piemērs mums sniedz:

RealWorld lietotne

Kaut kas vairāk par “todo”. Parasti “todos” nenodod pietiekami daudz zināšanu un perspektīvas, lai faktiski izveidotu reālas lietojumprogrammas.

Standartizēts

Projekts, kas atbilst noteiktiem noteikumiem. Nodrošina aizmugures API, statisko marķējumu, stilus un specifikācijas.

Uzrakstījis vai pārskatījis eksperts

Konsekvents, reāls projekts, kuru ideālā gadījumā būtu izstrādājis vai pārskatījis šīs tehnoloģijas eksperts.

Kuras bibliotēkas / ietvarus mēs salīdzinām?

Uzrakstīšanas laikā RealWorld lietotnes piemērā repo ir 18 Conduit ieviešanas reizes.

Nav svarīgi, vai tam ir daudz sekotāju vai nav. Vienīgā kvalifikācija ir tā, ka tā parādās RealWorld repo lapā.

Kādus rādītājus mēs skatāmies?

Izrāde

Cik ilgs laiks šai lietotnei ir vajadzīgs, lai parādītu saturu un kļūtu izmantojams?

Izmērs

Cik liela ir lietotne? Mēs salīdzināsim tikai apkopotā (-o) JavaScript faila (-u) lielumu. CSS ir kopīga visiem variantiem un tiek lejupielādēta no CDN (satura piegādes tīkla). HTML ir kopīgs arī visiem variantiem. Visas tehnoloģijas tiek apkopotas vai pārnestas uz JavaScript, tāpēc mēs izmērām tikai šo (-os) failu (-us).

Kodu rindas

Cik koda rindiņu autoram vajadzēja, lai izveidotu lietotni RealWorld, pamatojoties uz spec? Taisnības labad jāsaka, ka dažās lietotnēs ir nedaudz vairāk zvanu un svilpu, taču tai nevajadzētu būt nozīmīgai ietekmei. Vienīgā mape, kuru mēs izsakām skaitļos, ir src/katrā lietotnē.

Metrika Nr. 1: veiktspēja

Mēs pārbaudīsim veiktspējas rādītājus no Lighthouse Audit, kas tiek piegādāts ar Chrome. Bāka atgriež veiktspējas rādītāju no 0 līdz 100. 0 ir zemākais iespējamais rezultāts.

Audita iestatījumi

Veiktspēja ir kopējais rādītājs, izmantojot tālāk norādītos rādītājus

  • Pirmā saturīgā krāsa
  • Pirmā nozīmīgā krāsa
  • Ātruma indekss
  • Pirmais CPU dīkstāvē
  • Laiks mijiedarboties
  • Paredzamā ievades latentums

Lai iegūtu sīkāku informāciju, skatiet Lighthouse Scoring Guide.

Veiktspēja TL; DR

Jo ātrāk jūs krāsojat un jo ātrāk kāds var kaut ko izdarīt, jo labāka pieredze ir personai, kas izmanto lietotni.

Piezīme: PureScript tika izlaista, jo nebija demonstrācijas lietojumprogrammas.

Secinājums

Lielākajai daļai lietotņu rādītājs pārsniedz 90. Visticamāk, nejutīsit lielas atšķirības attiecībā uz veiktspēju.

Metrika # 2: lielums

Pārsūtīšanas lielums ir no cilnes Chrome tīkls. GZIPed atbildes galvenes un atbildes pamatteksts, ko nodrošina serveris.

Tas ir atkarīgs no jūsu ietvara lieluma, kā arī no visām pievienotajām papildu atkarībām un no tā, cik labi jūsu veidošanas rīks var novērst neizmantoto kodu no jūsu paketes.

Izmērs TL; DR

Jo mazāks fails, jo ātrāk lejupielādējama un mazāk analizējama.

Secinājums

Šajā jomā notiek daudz sensacionālu lietu. Svelte - maģiski pazūd lietotāja saskarnes ietvars - patiešām atbilst tā perforatora līnijai. Trafarets ir jauns bērns šajā etalonā, un tas arī darbojas diezgan labi. Abi ir samērā jauni un virzās uz robežas, kas ir iespējams pēc lieluma.

Metrika # 3: Kodu rindas

Izmantojot cloc, mēs skaitām koda rindas katrā repo src mapē. Tukšās un komentāru rindas nav daļa no šī aprēķina. Kāpēc tas ir jēgpilni?

Ja atkļūdošana ir programmatūras kļūdu novēršana, tad programmēšanai ir jābūt to ievietošanas procesam - Edsger Dijkstra

TL; DR līnijas

Tas parāda, cik kodolīga ir dotā bibliotēka / ietvars / valoda. Cik koda rindiņu jums vajag, lai ieviestu gandrīz to pašu lietotni (dažām no tām ir nedaudz vairāk jostu un svilpu) atbilstoši specifikācijai.

Piezīme Imba: Imba tika izlaista, jo cloc nevarēja apstrādāt .imbafailus.

Piezīme Gobas: Gobu izstrādātāji kodu raksta mazliet vertikālāk, tādējādi lielais LoC skaits - vismaz tas man ir teicis.

Piezīme Angular + ngrx: laukuma aprēķins tiek veikts /libstikai ar mapi, ieskaitot failus .tsun .htmlfailus. Ja uzskatāt, ka tas ir nepareizi, lūdzu, dariet man zināmu pareizo skaitli un kā jūs to aprēķinājāt.

Piezīme Hyperapp: raksta publicēšanas laikā LoC nebija pareizs, paldies Mateuszam Kwasniewski par pareizo LoC aprēķināšanas veidu norādīšanu.

Secinājums

ClojureScript ar atkārtotu kadru dod jums visvairāk sprādziena? par kontroles punktu. Clojure ir pazīstams ar neparastu izteiksmi. Ja jūs rūpējaties par jums, pārbaudiet ClojureScript, AppRun un Svelte.

Kopsavilkums

Paturiet prātā, ka tas nav precīzi salīdzinājums no āboliem līdz āboliem. Dažās realizācijās tiek izmantota koda sadalīšana, bet dažās nav. Daži no tiem tiek mitināti GitHub, citi tagad un citi Netlify. Vai jūs joprojām vēlaties zināt, kurš ir labākais? Labākais ir tas, kas atbilst jūsu vajadzībām.

J: Vai jums patīk veidi?

A: Apskatiet Elm, PureScript un TypeScript - Angular, AppRun, Dojo.

J: Vai vēlaties iegūt ļoti mazu nospiedumu?

A: Pārbaudiet Svelte, Stencil un AppRun.

J: Vai vēlaties uzturēt vismazāko kodu bāzi?

A: Pārbaudiet ClojureScript ar re-frame, AppRun un Svelte.

J: Vai vēlaties uzzināt kaut ko jaunu?

A: Izvēlieties to, kuru nezināt!

FAQ

# 1 Kāpēc X, Y un Z ietvars netika iekļauts šajā salīdzinājumā?

Tā kā RealWorld repo ieviešana nav pabeigta. Apsveriet iespēju piedalīties! Ieviesiet risinājumu savā iecienītākajā bibliotēkā / izvēlētajā ietvarā, un mēs to iekļausim nākamreiz!

# 2 Kāpēc jūs to saucat par reālo pasauli?

Jo tas ir mazliet vairāk nekā lietotne To-Do. Ar RealWorld mēs nedomājam, ka mēs salīdzināsim algas, uzturēšanu, produktivitāti, mācīšanās līknes utt. Ir arī citas aptaujas, kas atbild uz dažiem no šiem jautājumiem. Ko mēs domājam ar RealWorld, ir lietojumprogramma, kas izveido savienojumu ar serveri, autentificē un ļauj lietotājiem veikt CRUD - tāpat kā to darītu reālās pasaules lietotne.

# 3 Kāpēc jūs neiekļāvāt manu iecienīto ietvaru?

Lūdzu, skatiet # 1 iepriekš, bet katram gadījumam šeit tas notiek vēlreiz: jo RealWorld repo ieviešana nav pabeigta. Es nedaru visas realizācijas - tās ir kopienas pūles. Apsveriet iespēju piedalīties, ja vēlaties salīdzinājumā redzēt savu sistēmu.

# 4 Kuru bibliotēkas / ietvara versiju jūs iekļāvāt?

Tas, kas ir pieejams elektroinstalācijas laikā (2019. gada marts). Informācija nāk no RealWorld repo. Esmu pārliecināts, ka to var uzzināt GitHub repo.

# 5 Kāpēc jūs aizmirsāt iekļaut ietvaru, kas ir populārāks par salīdzinājumā esošo?

Atkal skatiet iepriekš. RealWorld repo ieviešana nav pabeigta; tas ir tik vienkārši.

Paldies Ričam Harisam un Ričardam Feldmanam par to, ka viņi pirms publikācijas apskatījās.

Atjauninājumi:

Kad šis raksts ir publicēts, TL; DR LoC bija šāds apraksts:

Jo mazāk jums ir koda rindiņu, tad varbūtība atrast kļūdu ir mazāka. Jums ir arī mazāka koda bāze, kuru uzturēt. Ja jums patīk šis raksts, sekojiet man Twitter. Es rakstu / tvītoju tikai par programmēšanu un tehnoloģijām.