Realus pasaulio gairių ir gairių palyginimas

Delfi de la Rua nuotrauka „Unsplash“
ATNAUJINIMAS: Yra naujesnė šio straipsnio versija

Per pastaruosius kelerius metus matėme priekinių rėmų sprogimą. Kiekvienas iš jų yra daugiau nei pajėgus kurti puikias žiniatinklio programas. Taigi kaip palyginti ir nuspręsti, kurį iš jų naudoti kitame projekte?

Pirmiausia, norint atlikti prasmingą palyginimą, reikia kelių dalykų:

  1. „Real World App“ - kažkas daugiau nei „todo“. Paprastai „todos“ neperduoda žinių ir perspektyvos, kad iš tikrųjų sukurtų tikras programas.
  2. Standartizuotas - tam tikras taisykles atitinkantis projektas. Patalpintas toje pačioje vietoje, teikia foninę API, statinį žymėjimą, stilius ir specifikacijas.
  3. Parašė ekspertas - nuoseklus realaus pasaulio projektas, kurį idealiu atveju būtų sukūręs tos technologijos žinovas. Tai tiesa, bent jau didžiąją laiko dalį (žr. Žemiau).

Taigi kaip gauti tokį projektą? Geros žinios yra tai, kad Erikas Simonsas jau sukūrė „RealWorld“ projektą. Tai „Medium“ tinklaraščių platformos klonas. Kiekvienam šio projekto įgyvendinimui naudojama ta pati HTML struktūra, CSS ir API specifikacijos, bet skirtinga biblioteka / sistema. Kai reikia ekspertų žinių, tai dažniausiai būna tiesa. Aš parašiau diegimą ClojureScript ir perrėminau ir nelaikau savęs ekspertu. Gindamasis ekspertas peržiūrėjo mano kodą - ačiū Danieliui Comptonui.

Dabar mes turime pradinę specifikaciją, norint juos palyginti, reikia standartinio testų / metrikos rinkinio.

  1. Spektaklis. Kiek laiko trunka ši programa, kad būtų rodomas turinys ir taptų tinkama naudoti?
  2. Dydis. Kiek yra programa? Mes palyginsime tik sukompiliuoto „JavaScript“ dydį. CSS yra bendra visiems variantams ir yra atsisiųsta iš CDN (turinio pristatymo tinklo). HTML yra bendras visiems variantams. Visas technologijas kaupia arba perkelia į „JavaScript“, todėl mes tik didiname šį failą.
  3. Kodo eilutės. Kiek kodo eilučių prireikė autoriui, norint sukurti „RealWorld“ programą, pagrįstą specifikacijomis? Jei norite būti teisingi, kai kurios programos turi šiek tiek daugiau varpelių ir švilpukų, tačiau tai neturėtų daryti didelės įtakos. Vienintelis aplankas, kurį mes įvertiname, yra „src“ / kiekvienoje programoje.

Rašymo metu (2017 m. Gruodis) „RealWorld“ projektas galimas šiose sistemose:

  • Reaguoti / Redux
  • Guoba
  • Kampas 4+
  • 1,5+ kampas
  • Reaguoti / „MobX“
  • „Crizmas“ MVC
  • CLSJ Keechma
  • „AppRun“
  • CLJS pakartotinis kadras (tai aš padariau. Jis dar neįtrauktas į „RealWorld“ projekto sąrašą).

1 metrika: našumas

Pirmasis prasmingas dažų testas su „Lighthouse Audit“, kuris pristatomas kartu su „Chrome“.

Kuo anksčiau dažysite, tuo geresnę patirtį turės asmuo, kuris naudojasi programa. Švyturys taip pat matuoja „First interactive“, tačiau daugumoje programų jis buvo beveik identiškas.

Pirmieji prasmingi dažai (ms) - geriau yra apatiniai

Metrika # 2: dydis

Perkėlimo dydis pateiktas „Chrome“ tinklo skirtuke. „GZIPed“ atsakymų antraštės ir atsakymo tekstas, pateikiami serverio.

Mažesnis failas = greitesnis atsisiuntimas ir mažiau analizuoti.

Tai priklauso nuo jūsų rėmelio dydžio, bet kokių papildomų priklausomybių, kurias įtraukėte, ir nuo to, kaip gerai jūsų kūrimo įrankis gali sudaryti mažą pluoštą.

Perkėlimo dydis (KB) - mažesnis yra geresnis

3 metrika: kodo eilutės

Naudodami cloc, mes skaičiuojame kodo eilutes kiekviename atpirkimo įrašo src aplanke. Tuščios ir komentarų eilutės nėra šio skaičiavimo dalis. Kodėl tai reikšminga?

Jei derinimas yra programinės įrangos klaidų pašalinimo procesas, tada programavimas turi būti jų įdėjimo procesas - Edsger Dijkstra

Kuo mažiau kodo eilučių, tuo mažesnė klaidos tikimybė ir mažesnė kodo bazė.

# Kodo eilutės - kuo mažiau, tuo geriau

Išvada

Spektaklis

Tai yra „RealWorld“ palyginimas, o ne etalonas vakuume. Testai buvo atlikti iš Europos (Šveicarijos). Visos programos buvo talpinamos „Github“. Vertės gali skirtis, o tai puiku. Kiekvienai programai testai buvo atliekami keletą kartų, po to vidurkis ir apvalinimas. Rezultatai buvo gana tiesiški lyginant visą dieną. Daugelis bibliotekų / rėmelių yra puikių ir gerų. Nematysite daug skirtumų, kalbant apie našumą.

Dydis

Kiekvienos programos paketo dydis visada yra vienodas. Mes lyginame panašius diegimus ir žiūrime, kaip skiriasi paketų dydžiai. „AppRun“ yra neprotinga! Pažiūrėjau porą kartų, nes negalėjau patikėti. Guoba daro nuostabų darbą, kai kalbama apie pluošto dydį ir ypač kai žiūrima į kodo eilutes.

„AppRun“ pluošto dydis 18,7 KB

Kodo eilutės

Tai daro didžiausią poveikį jums, kaip programinės įrangos kūrėjui. Kuo daugiau kodo eilučių, tuo daugiau reikia įvesti ir daugiau išlaikyti. Čia yra keletas kompromisų. Ypač kalbant apie įvestas ar dinamines kalbas. Tipai suteikia daugiau saugumo ir yra brangesni - reikia surinkti daugiau dalykų.

Įvesta palyginti su dinamika

Įrašyta: Guobos, kampinis 4+ ir „AppRun“.

Dinaminis: reaguoti | „Redux“, 1.5 kampas, reaguoti | „MobX“, „Crizmas MVC“, „CLJS Keechma“ ir „CLJS“ perrėmina.

Taigi, kuris yra geresnis? Tai nėra nei geriau, nei blogiau, jis yra skirtingas. Kaip ir TDD (Test Driven Development), kai kurie žmonės tai myli, kiti nekenčia. Galite sukurti puikią programinę įrangą su ja arba be jos - išsirinkite sau tinkamiausią.

Kur yra „Vue“, „Preact“, „Ember“, „Svelte“, „Aurelia“ ir kiti?

Atrodo, kad jie vėluoja į vakarėlius, bet nesijaudinkite. Aš padarysiu dar vieną turą, kai juos turėsime. Jau yra neišspręstų klausimų - apsvarstykite galimybę prisidėti! Arba pradėkite nuo nulio ir atidarykite naują numerį.

Galutinis žodis

Šis palyginimas yra būtent tai, ką sako. Palyginami skirtingi panašių realiojo pasaulio žiniatinklio programų įgyvendinimai realiame pasaulyje. Aš žinau, jis nėra tobulas. Tai skiriasi priklausomai nuo serverio apkrovos, tinklo srauto ir daugelio kitų dalykų, kurie nutinka realiame pasaulyje.

Ačiū Danieliui Comptonui už korektūrą.

Jei jums patiko šis straipsnis ir norėtumėte būti informuotas, kai išleisiu panašų straipsnį, apsvarstykite galimybę sekti mane terpėje ir „Twitter“.