Teknik

Vad är React?

React är ett javascriptramverk som skapades 2011 av Facebookutvecklaren Jordan Walke. Det användes första gången i Facebooks nyhetsflöde samma år. 2012 hoppade Instagram på tåget och implementerade React i sin lösning. Det växte inom Facebookkoncernen och i maj 2013 beslutade sig Facebook för att släppa ramverket som öppen källkod - fritt för alla att använda.

Idag hittar du React.js hos företag som Apple, PayPal, Netflix och såklart Facebook. Det är ett av de tre stora javascriptramverken just nu tillsammans med Angular och Vue. På Limetta är React vårt förstahandsval bland javascriptramverken och nedan förklarar vi varför.

React är strukturerat kring komponenter

Att strukturera kod i komponenter är förvisso inget som är unikt för React, men det sätt som det är implementerat på i React har visat sig fungera väldigt bra i både stora och små projekt.

Som utvecklingsprincip är komponentisering generellt ett väldigt bra sätt att:

Dela upp stora projekt i mindre hanterbara delar
Återanvända funktionalitet

I en typisk reactapplikation har du en komponenthierarki (komponenter som i sin tur använder andra komponenter) och data som flödar genom denna hierarki. Högt uppe i hierarkin har du ofta stora komponenter som innehåller mycket datahantering och affärslogik och långt ner hittar man ofta små enkla komponenter vars huvudsyfte är att rita ut något på skärmen, t.ex. en checkbox eller en ikon. Så det är inte bara komponentiseringen utan även den hierarkiska strukturen som den bidrar till som hjälper oss att strukturera stora och komplexa lösningar.

Vad är javascriptramverket React? - Limetta Digitalbyrå

Vill du veta mer om React?

Kontakta oss

React är snabbt

Alla webblösningar kommer att behöva arbeta med DOM - dokumentobjektmodellen. Lite slarvigt uttryckt kan man säga att dokumentobjektmodellen är en hierarkisk datamodell för en sida som visas i en webbläsare. Så for man ändrar något på skärmen så är man inne och pillar på dataobjektmodellen. Och när man ändrar på dataobjektmodellen så måste webbläsaren rita om sidan eller delar av sidan - och det tar tid. När vi säger tid så handlar det förvisso om millisekunder, men med tanke på att moderna webbsidor innehåller mycket interaktivitet och mycket data som ändras ofta så riskerar dessa millisekunder att sammantaget bli till sekunder. Då blir det blir märkbart för användaren i form av en seg användarupplevelse.

I React har man löst detta genom att hitta på något som kallas virtuell DOM. En virtuell DOM är i princip en kopia av den riktiga dokumentobjektmodellen, fast den ritas inte ut på sidan så fort något ändras. Det innebär dels att man kan göra flera förändringar i ett svep utan att sidan behöver ritas om vid varje enskild förändring, dels att man på förhand kan räkna ut vilka konsekvenserna av dessa förändringar blir och se till att man bara ritar om det absolut behöver ritas om.

Det är detta som är hemligheten bakom varför React är så snabbt.

Data flödar bara åt ett håll i React

I en reactapplikation kan data bara flöda åt ett håll: uppifrån och ner. Denna arktitektur har till och med ett namn: Flux.

Vi tänker oss att de vägar som data kan flöda genom applikationen är rör och vattnet i rören är data. En typisk reactapplikation skulle då ha ett tjockt rör högst upp. Det skulle sedan förgrena sig i smalare rör som i sin tur skulle förgrena sig i ännu smalare rör, och så vidare. Vid varje förgrening skulle det sitta en tratt i vilken man kan hälla vatten (fylla på med data) och en ventil (hidra data). Om man häller data i röret högst upp kan det alltså flöda ut i alla andra rör förutsatt att ventilerna är öppna. Men om man fyller på vatten i en tratt långt ner i vår rörkonstruktion så kan vattnet bara rinna ned i de underliggande rören. Precis som vatten aldrig skulle få för sig att börja rinna uppåt i rören så kan data i en reactapplikation inte röra sig nerifrån och upp.

Denna princip gör att man i en reactapplikation kan isolera datadrivna händelser enbart till de delar av applikationen som ska påverkas av händelserna. Det ger utvecklaren både överblick och kontroll över hur data flödar i applikationen. Det är också en del av den tekniska arkitektur som gör att React är så snabbt - man ser till att så få delar som möjligt i applikationen påverkas när det sker en förändring. Få saker som behöver ritas om betyder snabbare omritning av sidan.

React javascript-ramverk kodexempel - Limetta Digitalbyrå

Det är många som använder React

Framgång föder framgång brukar man säga och det gäller i allra högsta grad öppen källkod. Man vill använda ett ramverk som används av många andra helt enkelt för att det brukar föra med sig mycket gott i form av:

Snabba buggfixar
Bra dokumentation
Aktiv vidareutveckling
En stor verktygslåda
En llivlig diskussion kring plattformen på nätet

Allt detta finns på plats i React eftersom det är ett så stort javascriptramverk.

Fokus på gränssnittet

React må vara ett av världens största javascriptramverk, men som alla andra ramverk täcker det inte upp alla användarscenarion till hundra procent. Man behöver ofta lyfta in andra kodbibliotek för att hantera uppgifter som React inte hanterar fullt ut.

React är framtaget för är att bygga javascriptapplikationer med fokus på snabba användargränssnitt. Det innebär samtidigt att man har tonat ner eller utelämnat annan funktionalitet som kan behövas. Ett sådant exempel är datahantering. Det går alldeles utmärkt att bygga enklare datahantering i liten skala med bara React, men för lite större applikationer behöver man plocka in kodbibliotek som är specialutvecklade för just detta. Två av de populäraste biblioteken heter Redux och MobX. De förser båda React med kraftfulla verktyg för datahantering men med lite olika inriktning.

Man kan tycka att det är en nackdel att React ensamt inte täcker upp allt, men det är snarare en fördel tycker vi. Javascriptramverk som försöker täcka upp alla möjliga scenarion blir väldigt stora och tunga att arbeta i. Dels handlar det om mängden kod som behöver laddas ner av besökarnas webbläsare, dels handlar det om processen att utveckla i dem. Att React inte täcker upp all tänkbar funktionalitet ger oss valmöjligheter att komplettera React med olika typer av teknik med utgångspunkt i projektet snarare än att alltid behöva använda samma teknik.

Hur ska jag tänka som kund kring JavaScript?

Våra kunder frågar ofta vilket ramverk det är "som gäller". Det är en högst relevant fråga eftersom ingen kund vill satsa tid och pengar i något som riskerar att bli en teknisk återvändsgränd. Men det är sällan så extremt att det bara finns ett enda ramverk som gäller. I denna artikel har vi nämt de tre stora: React, Angular och Vue. Alla dessa tre uppfyller de krav man bör ställa på ett modernt javascriptramverk. Med det undanstökat kan man istället fokusera på vilket ramverk som lämpar sig bäst för den aktuella uppgiften, hur lång erfarenhet utvecklarteamet har av ramverket och om det finns kompatibilitetskrav som gör att det blir lättare/svårare att få det aktuella ramverket att funka ihop med andra delar i applikationen.

Att fatta detta beslut är något som vi hjälper våra kunder med. Är man helt ointresserad av den tekniska aspekten av lösningen utan bara vill att det ska vara snabbt, snyggt och funka så väljer vi ramverk utifrån det aktuella projektet för att kunna uppfylla dessa funktionella krav. Ofta landar vi i React, men inte alltid.

Sedan finns det alltid en trygghet i att allt - oavsett ramverk - i grund och botten är vanlig JavaScript. Det ramverket tillför är således inte ett helt nytt programmeringsspråk utan bara en verktygslåda som snabbar upp utvecklingstakten och ökar lösningens kvalitet.