Det myldrer i underskogen

Det myldrer i underskogen

React og Angular er fortsatt de dominerende front-end-rammeverkene, men dersom du tror det nå har stabilisert seg må du nok ta en ny runde i tenkeboksen. I front-end-verdenen vokser det frem en underskog av rammeverk, og det er gode sjanser for at en eller flere av dem vil vokse raskt i popularitet. Det et er slett ikke sikkert at ditt neste prosjekt faller inn under en av de to store rammeverkene. Les videre og få en oversikt over de mest fremtredende av de kommende rammeverkene, og et komplett kode-eksempel for et av de.

Angular 1 ble lansert i 2012 og oppnådde raskt stor popularitet, men det ble åpenbart allerede mot slutten av 2014 at rammeverket var på vei ut, og det er nå etterfulgt av Angular 2 som kom ut av beta-fasen nå nylig. Tidlig i 2014 kom React og må vel nå anses som det dominerende front-end-rammeverket. Likevel, det går veldig fort, og det er slett ikke sikkert at det verken er Angular eller React som vil dominere de kommende årene.

Det skal selvfølgelig mye til før momentet skifter såpass for React og Angular 2 at noen av de andre rammeverkene kan ta over den dominerende posisjonen. Historien har dog vist at det lett kan skje, og vi trenger ikke gå langt tilbake i tid før listen så helt annerledes ut og en gang så populære rammeverk som YUI, Knockout og Ember nyter relativt lite popularitet i dag.

Blant nykommerne og utfordrerne er navn som Aurelia, CycleJS, Inferno, Mithril og Vue. De fleste har hentet inspirasjon fra Angular og React (spesielt nevnte Inferno, samt Plastiq, Preact, Riot), men felles for alle er de bruker virtual DOM for lynkjapp rendering i nettleseren. 

En oversikt laget av github-brukeren krausest viser at det er store forskjeller i både ytelse og minnebruk hos de forskjellige rammeverkene. Det interessante er at både Angular 2 og React er blant de rammeverkene som kommer dårligst ut. Det er en kjent sak at virtual DOM-implementasjonen til React er temmelig treg, og selv om den er blitt noe bedre over tid er den fortsatt vesentlig tregere enn konkurrentene på listen. Også i minnebruk dominerer React og Angular 2, samt en del av mindre kjente rammeverkene listen over de som bruker mest minne over tid. Inferno befinner seg på den andre enden av skalaen. 

Følgende Twitter-melding fra en av vedlikeholderne i React er også verdt å merke seg:

Sebastian Markbåge om Inferno

Inferno skilter med et React-lignende API (faktisk kan du med et enkelt grep bytte ut React med Inferno uten å gjøre noen som helst kodeendringer, gitt at kodebasen din ikke er for komplisert), og ettersom det er den desidert raskeste virtual DOM-implementasjonen på markedet skal vi ta en titt på hvordan en app skrevet i Inferno ser ut. 

Appen vi skal se på gjør følgende: Den viser en side med ett toppelement, en tekstboks og en knapp, og 60 rader med 5 kolonner som kontinuerlig oppdateres med data og bakgrunnsfarge. Dette trigger en kontinuerlig nytegning av hele DOM-et, og stiller således svært store krav til ytelse.

Her er koden:

 

Som du ser er det ikke store endringene som skal til for å skrive om React-kode til Inferno-kode. Du slipper å tenke på å legge til keys i alle maps og andre steder React krever at du gjør det.

Et poeng er at Inferno-koden blir langt mindre, og derfor raskere å laste ned. Kompilert og uglified blir React-koden 859Kb, mens Inferno-koden klokker inn på 246Kb. React inneholder selvsagt endel mer funksjonalitet, som blant annet den syntetiske eventhandleren som normaliserer events tvers nettlesere. Dette er imidlertid et stadig mindre problem ettersom bruken av gamle nettlesere avtar, så det er trolig verdt å miste bred støtte for gamle nettlesere og heller teste events grundig for de nettleserne du skal støtte. Det er også mulig dette blir tilgjengelig som en plugin på et senere tidspunkt. 

Her er et skjermbilde av appen vi har sett på. Demo-appen er tilgjengelig på følgende adresse: infernodemo.herokuapp.com.

Her er applikasjonen vi lager. Hvert mikrosekund oppdateres tall og bakgrunnsfarge, hvilket tvinger en kontinuerlig repaint. Det er ganske heftig for nettleseren. Det er spesielt ved skrolling at utfordringer med oppdatering blir synlig.

 

Om bloggeren:
Frontendutvikler med sans for JavaScript. Glad i å snakke om programmering, og har utgitt boken ReactJS Blueprints på Packt forlag.

comments powered by Disqus