Reaaliaikainen vertailu käyttöliittymäkehyksistä vertailuarvojen kanssa

Kuva Delfi de la Rua Unsplash-kuvassa
PÄIVITYS: Tästä artikkelista on uudempi versio

Muutaman viime vuoden aikana olemme nähneet räjähtävän etuosakehysten. Jokainen heistä on enemmän kuin kykenevä rakentamaan hienoja verkkosovelluksia. Joten miten voit verrata ja päättää, kumpaa käyttää seuraavaan projektiisi?

Ensinnäkin, jotta voimme tehdä merkityksellisen vertailun, tarvitsemme muutamia asioita:

  1. Oikean maailman sovellus - jotain muuta kuin ”tehtävä”. Yleensä ”todos” eivät välitä tietoa ja näkökulmaa todellisten sovellusten rakentamiseksi.
  2. Standardoitu - tiettyjen sääntöjen mukainen projekti. Samassa paikassa isännöity, tarjoaa tausta-sovellusliittymän, staattisen merkinnän, tyylit ja tekniset tiedot.
  3. Asiantuntijan kirjoittama - Johdonmukainen, reaalimaailman projekti, jonka mieluiten kyseisen tekniikan asiantuntija olisi rakentanut. Tämä on totta, ainakin suurimman osan ajasta (katso alla).

Joten miten saamme sellaisen projektin? Hyvä uutinen on, että Eric Simons on jo luonut RealWorld-projektin. Se on Medium-blogialustan klooni. Jokainen tämän projektin toteutus käyttää samaa HTML-rakennetta, CSS: tä ja API-eritelmiä, mutta erilaista kirjastoa / kehystä. Asiantuntijatiedon perusteella se on totta suurimman osan ajasta. Kirjoitin toteutuksen ClojureScript-ohjelmaan ja kehystin uudelleen, enkä pidä itseäni asiantuntijana. Puolustuksessani asiantuntija tarkasteli koodini - kiitos Daniel Compton.

Nyt meillä on lähtötasotiedot. Tarvitsemme vakiosarjan testit / muuttujat niiden vertailemiseksi.

  1. Esitys. Kuinka kauan tämän sovelluksen sisältö näytetään ja siitä voi tulla käyttökelpoista?
  2. Koko. Kuinka suuri sovellus on? Vertaamme vain kootun JavaScriptin kokoa. CSS on yhteinen kaikille muunnelmille, ja se ladataan CDN: stä (Content Delivery Network). HTML on yhteinen kaikille muunnelmille. Kaikki tekniikat kääntävät tai siirrävät JavaScriptiin, joten kokoamme vain tämän tiedoston.
  3. Koodilinjat. Kuinka monta koodiriviä kirjoittaja tarvitsi luodaksesi RealWorld-sovelluksen, joka perustuu spesifikaatioihin? Oikeudenmukaisuuden vuoksi joissain sovelluksissa on vähän enemmän kelloja ja pilliä, mutta sillä ei pitäisi olla merkittävää vaikutusta. Ainoa määrittämämme kansio on src / jokaisessa sovelluksessa.

Kirjoittamishetkellä (joulukuu 2017) RealWorld-projekti on saatavana seuraavissa puitteissa:

  • Reagoi / Redux
  • Jalava
  • Kulma 4+
  • Kulma 1,5+
  • Reagoi / MobX
  • Crizmas MVC
  • CLSJ Keechma
  • AppRun
  • CLJS uudelleenkehys (Tämän tein. Sitä ei vielä ole lueteltu RealWorld Projectissa).

Muuttuja # 1: Suorituskyky

Ensimmäinen mielekäs maalitesti Lighthouse Auditilla, joka toimitetaan Chromen kanssa.

Mitä nopeammin maalaat, sitä parempi kokemus sovellusta käyttävälle henkilölle. Majakka mittaa myös Ensimmäistä interaktiivista, mutta tämä oli melkein identtinen useimmissa sovelluksissa.

Ensimmäinen merkityksellinen maali (ms) - alempi on parempi

Muuttuja # 2: Koko

Siirtokoko on Chrome-verkkovälilehdellä. GZIPed-vastausotsikot sekä vastausrunko palvelimen toimittamana.

Pienempi tiedosto = nopeampi lataus ja vähemmän jäsentää.

Tämä riippuu kehysten koosta, lisätyistä ylimääräisistä riippuvuuksista ja siitä, kuinka hyvin rakennustyökalu pystyy muodostamaan pienen kimpun.

Siirtokoko (KB) - alempi on parempi

Metriikka # 3: Koodilinjat

Cloc: tä käyttämällä lasketaan koodirivit kunkin repon src-kansioon. Tyhjät ja kommenttirivit eivät ole osa tätä laskelmaa.Miksi tämä on merkityksellistä?

Jos virheenkorjaus on ohjelmistovirheiden poistamisprosessi, ohjelmoinnin on oltava niiden laittamisen prosessi - Edsger Dijkstra

Mitä vähemmän koodirivejä sinulla on, sitä pienempi virheen todennäköisyys ja pienempi ylläpidettävä koodikanta.

# Koodirivit - vähemmän on parempi

johtopäätös

Esitys

Tämä on RealWorld-vertailu eikä vertailukohta tyhjiössä. Testit suoritettiin Euroopasta (Sveitsi). Kaikki sovellukset isännöitiin Githubissa. Arvot voivat vaihdella sinulle, mikä on hienoa. Testit suoritettiin pari kertaa kullekin sovellukselle, sitten keskiarvo tehtiin ja pyöristettiin. Tulokset olivat melko lineaarisia verrattuna koko päivän ajan. Suurin osa kirjastoista / kehyksistä on erinomaisten ja hyvien joukossa. Et näe paljon eroa suorituskyvyn suhteen.

Koko

Jokaisen sovelluksen nipun koko on aina sama. Vertaamme samanlaisia ​​toteutuksia ja tarkastelemme kuinka pakettikokot eroavat toisistaan. AppRun on hullu! Katsoin pari kertaa, koska en voinut uskoa sitä. Elm tekee uskomattoman työn nipun koon suhteen ja etenkin kun katsot koodirivejä.

AppRun-paketin koko 18,7 kt

Koodilinjat

Tällä on suurin vaikutus sinuun ohjelmistokehittäjänä. Mitä enemmän koodiriviä, sitä enemmän sinun on kirjoitettava ja enemmän ylläpitämistä varten. Täällä on joitain kompromisseja. Varsinkin kun kyse on kirjoitetuista vs. dynaamista kielistä. Tyypit antavat sinulle enemmän turvallisuutta ja ovat kustannuksiltaan - lisää kirjoitettavia asioita.

Tyypitetty vs. dynaaminen

Typed: Elm, Angular 4+ ja AppRun.

Dynaaminen: reagoi | Redux, kulma 1,5, reagoi | MobX, Crizmas MVC, CLJS Keechma ja CLJS uudelleenkehystetään.

Joten mikä on parempi? Se ei ole parempi tai huonompi, se on erilainen. Kuten TDD (Test Driven Development), jotkut ihmiset rakastavat sitä, toiset vihaavat sitä. Voit kehittää loistavia ohjelmistoja joko sen kanssa tai ilman - valitse se, joka sopii sinulle parhaiten.

Missä ovat Vue, Preact, Ember, Svelte, Aurelia ja muut?

Näyttää siltä, ​​että he ovat myöhässä juhliin, mutta älä huoli. Teen uuden kierroksen, kun meillä on heidät. Jo avoimia kysymyksiä on - harkitse osallistumista! Tai aloita tyhjästä ja avaa uusi numero.

Lopullinen sana

Tämä vertailu on tarkalleen mitä se sanoo. Vertaa samanlaisten reaalimaailman web-sovellusten erilaisia ​​toteutuksia todellisessa maailmassa. Tiedän, se ei ole täydellinen. Se eroaa palvelimen kuormituksen, verkkoliikenteen ja monien muiden tosielämässä tapahtuvien asioiden perusteella.

Kiitos Daniel Comptonille oikoluvusta.

Jos pidit tästä artikkelista, ja haluaisit ilmoituksen, kun julkaisen samanlaisen artikkelin, harkitse seuraa minua mediassa ja twitterissä.