React är ett frontend-ramverk som används allt mer ofta för att bygga e-handels-siter idag. De senaste åren har trenden varit att bygga e-handels-siter som Single Page Applications, och React är ett av alternativen när det kommer till ramverk för att uppnå det.

När det kommer till arkitektur är det enkla valet ofta att titta på vad konkurrenter och vänner väljer och gå samma väg. Om valet man ska göra inte är affärskritiskt eller om man inte har tid att sätta sig in i alternativen kan det vara ett ganska bra sätt, men risken är att man väljer en lösning som andra valt med helt andra förutsättningar än vad man själv har.

Det är också enkelt att tänka att det finns silver bullets, alternativ utan nersidor som löser alla ens problem. Men när det kommer till teknik och arkitektur finns det ingen rätt väg, det finns bara olika typer av kompromisser. Varje vägväl kommer med sin egen uppsättning av för- och nackdelar. En konkurrent kan ha gjort ett visst teknikval baserat på historik eller befintlig personal, saker som antagligen inte gäller för dig. Inte sällan görs teknikval baserat på "Google och Netflix gjorde så här, då ska vi också göra det". Men Google och Netflix har tusentals utvecklare och helt andra förutsättningar och utmaningar än vad du har.

Reacts fördelar

Den absolut största fördelen med React idag är att det är så populärt, och att hitta kompetens är ingen större utmaning. Om du har egna utvecklare är det är ganska sannolikt att de har erfarenhet av React redan.

En annan stor fördel är React Native vilket är ett ramverk för att skapa mobil-appar med React. Det gör att du kan låta samma utvecklare som jobbar med siten även jobba med appar utan att behöva lära sig alla detaljer om iOS och Android.

Ekosystemet runt React har vuxit sig enormt, och det finns tredjeparts-komponenter för de flesta problem man kan ha. Behöver man t.ex. ett bild-galleri eller flikar för att visa/dölja innehåll finns det väldigt många alternativ att välja på.

Den kanske största positiva effekten av att React byggs av Facebook är att de tar bakåt-kompatibilitet på väldigt stort allvar. Eftersom det hade kostat dem själva så mycket att göra stora förändringar har de genom åren varit väldigt duktiga på att se till att kod som använder React kommer fortsätta fungera efter en uppgradering. Detta betyder en lägre kostnad för dig i att följa med i nya React-versioner.

Även fast ekosystemet är stort och vildvuxet så finns det vissa saker som sticker ut som väldigt positiva, och en av dem är Next.js. Next.js är ett ramverk ovanpå React man kan använda för att bygga siter, inte minst e-handels-siter. Next.js är inte unikt för React - det finns t.ex. Nuxt.js som är ett liknande ramverk för Vue.js. Det som sticker ut lite med Next.js är att det har ett starkt momentum och är inte bara ett open source-verktyg. Teamet bakom Next.js har också samarbetat mycket med Google Chrome-teamet för att säkerställa att bas-prestandan i Next.js är så bra som bara möjligt.

Reacts nackdelar

React har blivit så pass populärt att dess stora ekosystem inte bara är något positivt. Det finns många alternativ och det är svårt att avgöra ifall de alternativen är riktigt bra.

Innan man väljer React behöver man förstå vad det är som driver utvecklingen av det, och vilka problem det fokuserar på att lösa. React är byggt av Facebook och drivs helt av utvecklare anställda av Facebook. Det är open source så det är fritt fram för vem som helst att bidra, men verkligheten är att framtiden för React styrs helt av de utmaningar som Facebook själva har. Det är inget negativt i sig, men det är inte självklart att du har samma utmaningar som Facebook har. Det är t.o.m. ganska osannolikt att du har det. Facebook.com skiljer sig väldigt mycket mot en genomsnittlig e-handels-site. De senaste åren har React-teamet spenderat mycket tid och energi för att lösa komplexa gränssnitts-problem när många saker uppdateras samtidigt på skärmen och hur dessa uppdateringar ska synkroniseras. Vilket definitivt är ett problem som Facebook har, men det är väldigt få e-handels-siter som har så komplexa gränssnitt att det spelar roll.

Det har i alla fall på ytan hänt ganska lite med React de senaste åren. När andra ramverk annonserar nya viktiga funktioner löpande är det förhållandevis tyst från React. Detta beror till stor del på att React-teamet har valt att prioritera bakåt-kompatibilitet framför att löpande komma med ny funktionalitet. Om man har en mindre kodbas och är beroende av att hela tiden ligga längst fram vad gäller ny funktionalitet kan React vara fel val.

Pagespeed och initial prestanda

För en e-handels-site är prestandan i den initiala sidladdningen kanske den viktigaste tekniska utmaningen du har. De som går in på facebook.com bryr sig ganska lite ifall det tar en extra sekund att ladda startsidan eftersom de kommer spendera lång tid där med att läsa och posta innehåll. Många ehandlare hade önskat att ha lika lång sessions-tid som facebook.com, men så är inte fallet. För en e-handel är den initiala sid-laddningen extremt viktigt. Vi vet alla hur snabbt man överger en e-handels-site ifall man inte får ett riktigt bra första intryck.

Det är långt ifrån omöjligt att skapa en bra första sid-laddning med React, men man behöver förstå att varken React eller ekosystemet runt React har det som en stark drivkraft. React kommer som sagt med ett antal fördelar, och ett antal nackdelar. Detta är en nackdel man själv måste jobba ganska hårt med för att komma runt.

Den största faktorn idag till en snabb första sidladdning och hur bra score man får på Google PageSpeed är mängden JavaScript ens site har. Ju mer JavaScript man har desto längre tid tar det att ladda ner och exekvera vilket ger sämre prestanda och PageSpeed score.

React i sig är betydligt större än vad många av alternativen är, och React-teamet har valt att fokusera mer på andra utmaningar snarare än att minska den storleken. Vilket är helt rätt kompromiss att göra för facebook.com, men kanske inte den kompromiss som är rätt för dig.

När ska jag välja React då?

När du tittar på dina alternativ ska du först och främst inte se ekosystemet runt React som en stor fördel. Verkligheten är att du inte kommer kunna använda särskilt många tredjeparts-komponenter om du ska kunna uppnå den initiala prestanda du behöver. För att uppnå den har du bara en viss budget för hur mycket JavaScript du kan använda, och React i sig kommer att ta en ganska stor del av den. Det lämnar inte särskilt stort utrymme för att ta in tredjeparts-komponenter som ofta inte är skrivna med storlek som mål.

Det finns ett par stora anledningar att välja React. Om du har som ambition att bygga mobil-appar med samma team/kompetens som bygger din site är React Native en stark anledning. Men React Native är inte det enda alternativet, så du ska inte välja React enbart för att du nån gång vill göra mobil-appar.

Har du ett stort team av utvecklare och en stor, komplex e-handels-site kommer du också uppskatta hur seriöst React tar på bakåt-kompatibilitet. Du vill investera i din egen lösning, inte investera i förändringar som krävs för att uppgradera ditt frontend-ramverk.

Men den största anledningen är tillgången till kompetens. Ifall du har ett team som redan kan och vill använda React är det bättre att du låter det teamet fokusera på att hantera utmaningarna, än att välja ett mindre populärt alternativ och spendera tid och pengar på att lära sig det. Ifall du har ett team som föredrar Vue.js eller du tycker att det verkar enklare att hitta kompetens runt Vue.js så är det en mycket viktigare parameter än skillnaden mellan React och Vue eller Next och Nuxt.

Vad du än väljer så slutar inte resan med det beslutet. Prestanda är något du måste jobba med hela tiden, och det är fullt möjligt både att skapa en subersnabb och en superlångsam site med eller utan React. Varje tekniskt beslut du fattar måste inkludera prestanda, annars är det lätt att hamna i death by a thousand papercuts och med en lösning som är svår att rädda.