Ebeling Webbyrås hemsida har fått sig ett ansiktslyft! Nyckeln bakom att göra en grym hemsida ännu grymmare? Svaret på det är såklart att React numera används för frontendutveckling till en backend i WordPress. Aldrig hört talas om detta tidigare eller kanske vill du bara fördjupa din kunskap kring ramverket? Då har du hamnat rätt – Mitt namn är Julia Mattson och jag praktiserar här på Ebeling Webbyrå och i detta inlägg kommer att sammanfatta allt värt att veta om detta väldigt populära ramverk.
Jag kommer inte att grotta ner mig för mycket i bakgrundsfakta men för att förstå vad React är och varför en utvecklare kan komma att välja just React i djungeln av olika ramverk, krävs lite förståelse kring ramverket. So here we go.
React är ett alltså ett ramverk baserat på Javascript och det lanserades av Facebook år 2013. Där med sagt att lite förkunskaper inom Javascript kan vara fördelaktigt vid implementering av ramverket. React består av diverse olika delar men är i första hand baserat på komponenter. Det finns både förbyggda komponenter redo att användas men även möjligheten att skapa sina egna. Något annat som är specifikt för just detta ramverk är något som kallas för ”hooks”. Precis som med komponenter finns det ett fåtal förbyggda såsom ”useState”, ”useEffect” med flera. Det går även att skapa egna och dessa kallas för ”custom hooks”. Dessa ”hooks” används för funktionalitet på en hemsida. Fördelarna med att använda ”hooks” är att de gör de möjligt att återanvända funktionalitet mellan olika komponenter. Dessutom krävs det mindre kod och resulterar i en smalare, mer lättläst kod.
Ramverket är byggt speciellt för att skapa användargränssnitt, alltså interaktionen mellan människa och dator. Till exempel vad som ska hända när användaren trycker på en specifik knapp osv. På grund av detta innehåller inte ramverket samtliga funktioner som utvecklare kan finna nödvändiga vid utvecklandet av en komplett hemsida eller applikation. Därav fungerar det allra bäst för frontendutveckling i kombination med en headless-backend, såsom WordPress används i Ebelings fall. Men det går självklart att använda på egen hand också.
Fördelar
Något som är oerhört viktigt för användarupplevelsen är såklart hemsidans prestanda. React har en schysst lösning för ökad prestanda genom en virtuell DOM (står för Document Object Model). Den fungerar som ett lager mellan utvecklarens beskrivning av sidans utseende samt det som krävs för att rendera sidan. Anledningen till att detta förbättrar prestandan är att endast de nödvändiga skillnaderna mellan den virtuella DOM:en och den vanliga DOM:en renderas. I vanliga fall skulle hela DOM:en sökas igenom på nytt för att sen renderas vilket förklarar varför prestandan på så vis blir långsammare.
En annan fördel med React är enkelheten att bygga en separerad frontend från CMS:et man nyttjar, i vårt fall WordPress. WordPress körs headless, d.v.s. utan egen frontend-lösning. Fronten kommunicerar med WordPress via deras api och man kan skapa en mycket snabb frontend som både kan förladda sidor och snabbt hämta nödvändig data för hemsidans olika delar. I relation till hur länge React faktiskt funnits inom branschen så har det vuxit sig både stort och populärt och utsikterna för att det ska fortsätta i den riktningen ser väldigt lovande ut.
Hoppas denna korta lilla inblick i React väcker ert intresse för att fylla på er kunskap kring ramverket ytterligare. Kan varmt rekommendera Reacts egna hemsida för vidare läsning.
Ha det gott!
Med vänliga hälsningar,
Praktikant-Jullan
