Är du någorlunda intresserad av webbutveckling och arkitekturen bakom en webbsida så har du med största sannolikhet hört uttrycken frontend och backend. Man skulle kunna säga att dessa två begrepp står för två sidor av samma mynt, där myntet då är den moderna hemsidan eller applikationen. Arkitekturen i och samspelet mellan frontend och backend är avgörande för hur väl en hemsida fungerar i många avseenden, som användarvänlighet, funktionalitet och även SEO.
”Den tydligaste distinktionen mellan frontend och backend är att frontend är det som användaren ser och interagerar med i sin webbläsare, och backend är det som aldrig når användarens dator utan stannar på servern”
Skillnaden mellan frontend och backend kan beskrivas tydligt, eller mer komplext, beroende på var man drar gränsen. Just nu sker det en hel del på många olika områden samtidigt inom webbutveckling, och det traditionella sättet att bygga hemsidor på kan vara historia inom bara några år. Men än så länge kan vi ganska enkelt definiera den tydligaste skillnaden mellan frontend och backend, och det är att frontend är det som användaren ser och interagerar med i sin webbläsare och backend är det som aldrig når användarens dator utan stannar på servern. Här nedan går vi igenom vad detta egentligen innebär.
Frontend – det som visas i webbläsaren
Man kan alltså definiera frontend som det som den som öppnar en webbsida på sin dator kan se och interagera med. Texter, bilder, knappar, formulär, allt det den genomsnittlige internetanvändaren förknippar med en hemsida, ryms inom frontend. Den som skapar frontend på en webbsida brukar kallas för webbdesigner och det är denne person, eller personer, som har till uppgift att se till att sidan är snygg, funktionell. Samt att den fungerar på många olika plattformar som olika webbläsare för både datorer, mobiler och läsplattor. Frontend kallas på engelska även för client-side, och ”klienten” i det här fallet är din webbläsare.
De tre hörnpelarna i frontend
För att skapa en modern frontend använder man sig av tre språk: HTML, CSS och Javascript. Här tar vi en närmare titt på dessa:
- HTML, hyper-text markup language, är det klassiska märkspråket för att skapa hemsidor. Alla beståndsdelar på en webbsida märks upp i HTML-koden. I den här texten till exempel, så har varje paragraf och rubrik en så kallad tag som beskriver hur innehållet ska visas. Detsamma gäller bilder, menyer och allt annat du ser på sidan. Webbläsaren läser av HTML-koden när du laddar upp sidan, för att kunna veta hur innehållet ska se ut.
- CSS står för cascading style sheets, och skapades för att ge webbutvecklare ett mer nyanserat verktyg för hur innehållet på en sida ska presenteras. Utan CSS skulle den här hemsidan se ut ungefär som den gjorde i internets barndom, det vill säga mest bestå av en massa tätt packad text i ett långt flöde. Med hjälp av CSS kan man i stället bestämma färg, storlek och form på alla element på en hemsida, och exakt var på skärmen de ska visas. CSS är till exempel avgörande för att kunna skapa webbsidor som kan visas på många olika plattformar. Språket kan integreras i HTML-koden, men vanligare är att webbläsaren får en eller flera separata CSS-filer när sidan laddas upp.
- Javascript är den tredje pelaren i modern webbutveckling. Det är ett så kallat skriptspråk, det vill säga det är skapat för att utföra automatiserade handlingar i en speciell körmiljö, i detta fall webbläsaren. Med hjälp av Javascript kan en hemsida göras dynamisk. Vilket innebär att den går att förändra utifrån hur användaren interagerar med den. Javascript använder man bland annat för att skapa inloggningsfunktioner, skapa logiken i kontaktformulär och se till att informationen som fylls i skickas till servern, och så vidare. Kontakten mellan frontend och backend hanterar utvecklare med hjälp av Javascript.
Backend – webbsidans hjärna
När en användare knappar in en adress i sin webbläsare så ligger den inte och väntar någonstans i datorn. Den finns någon annanstans. Denna plats heter backend, och den består av en (kan vara flera) servrar, som webbläsaren kontaktar och ber om att få sidan skickad till sig. Backendkod går därför ofta under namnet server-side code. Det är här den mesta logiken i en webbapplikation finns och backendsidan kan göra i stort sett vad som helst på begäran av sidans frontend.
Men till att börja med så skickar den HTML, CSS och Javascript till webbläsaren så att det går att visa hemsidan. Därefter kan den ta hand om att validera användaruppgifter, spara, hämta eller uppdatera data till och från en databas, skicka ut mail, göra komplicerade beräkningar utifrån användardata och så vidare.
Många språk att välja bland på serversidan
Den som vill skriva kod för backend har en rad språk att välja mellan, till skillnad från Frontend där man måste hålla sig till de tre huvudspråken. Några exempel på vanliga språk för backend är Java, .NET, Python och PHP.
Sedan några år kan man även använda Javascript för backendprogrammering. Detta tack vare körmiljön Node.js, som tillåtit det en gång begränsade skriptspråket att flytta ut ur webbläsaren och bli till ett mer ”riktigt” objektorienterat programmeringsspråk. Att använda Javascript på backend gör det också lättare för en programmerare att kunna skriva kod både för front- och backend till en applikation, så kallad fullstackutveckling.
Var kommer SEO in i allt detta?
SEO är i sig varken frontend eller backend, utan är egentligen en marknadsföringsteknik. Med det sagt så bör en SEO-tekniker skaffa sig en så bra uppfattning som möjligt om vad arkitekturen både för frontend och backend betyder för en hemsida.
När man gör en så kallad onpage-optimering är det framför allt sidans frontend som man skräddarsyr. Gällande utseende, användarvänlighet, metataggar och content. Men även en sidas backend har stor betydelse för SEO:n med avseende på till exempel kanonisering av länkar, uppladdningshastighet, leverans av tjänster och så vidare. SEO bör ju i grunden vara ett samarbete mellan experter på sökmotoroptimering, webbutvecklare och backendutvecklare för att bli så lyckad som möjligt.
