Hva er frontend-utvikling?

Tilbake til kompetanseguidens hovedside

Frontend-utvikling handler om den delen av programvaren som brukeren ser og samhandler med – det vil si utseende, knapper, menyer og andre funksjoner som brukeren har kontakt med. I frontend-utvikling er det først og fremst tre essensielle språk: HTML, CSS og Javascript.

Espen Sande Larsen er seniorteknolog i DNB, og har fått i oppgave av oss å fortelle litt mer om frontend-utvikling.

Kort oppsummert; hva er frontend-utvikling?En utviklingsdisiplin som tar for seg all utvikling på klientsiden av en applikasjon. Ansvaret ligger i å presentere informasjon og interaksjonspunkter til brukerne, og koordinere brukerens operasjoner med systemene som håndterer funksjonaliteten til applikasjonen. I nyere tid innebærer dette ofte også design og layout av grensesnittet.

I korte trekk er oppgaven å binde det du ser og trykker på, med det som kalkulerer, lagrer og behandler informasjon.

Hva brukes frontend-utvikling til i 2020? Når er det viktig å kunne dette?I 2020 bruker vi frontend-utvikling til å lage websider, webapplikasjoner, hybridapplikasjoner, smarttelefonapplikasjoner, grensesnitt på dingser som smartklokker, dashbord i transportmidler, spill, spillmaskiner og til og med fysiske installasjoner for å styre lyd, lys og videoavspilling.

Tradisjonelt sett har dette vært fagfelt med veldig mange forskjellige plattformer, hver med sine egne verktøy og teknikker. I de senere årene har dette samlet seg rundt færre og mer standardiserte metoder og rammeverk.

Frontend-utvikling i 2020 handler stort sett om disse plattformene: Web, mobilapplikasjoner, desktop og spillutvikling. Web er desidert den største, og vi ser at plattformen kan brukes til å utvikle applikasjoner på de andre plattformene også. Webapplikasjoner blir pakket inn og kjører både på mobil og desktop som selvstendige applikasjoner.

Tidligere jobbet ofte grafiske designere sammen med frontend-utviklere, men vi ser at flere og flere frontend-utviklere tar over designansvaret. Det er også viktig å kunne forme funksjonelle grensesnitt, tidligere benyttet man folk med kompetanse innenfor antropologi og/eller psykologi. Dette blir skiftet ut med telemetri og hyppig eksperimentering hos de flinkeste i klassen. Derfor er det viktig å koble det kreative med det analytiske.

Har du noen eksempler på typiske situasjoner eller utfordringer som frontend-utvikling blir brukt til å løse?En webside som for eksempel travelocity.com formidler reisetjenester til forbrukere. De er avhengig av mye trafikk til sidene sine, at kundene finner det de vil ha og legger inn en reservering raskt. En slik webside organiserer ofte mange små team, som får ansvar for en liten del av siden.

For eksempel kan et team jobbe med rutene som anbefaler andre søk, mens et annet kan jobbe med ruten som presenterer hva søket fant. Innenfor denne ruten vil teamet utføre eksperimenter med forskjellige design- og interaksjonsvalg kontinuerlig, ofte flere tusen i løpet av en uke.

Disse eksperimentene blir kjørt live, på den ekte siden, på et utvalg av kundene. Så måler de hvilken påvirkning endringen hadde på hvor raskt brukerne gjorde en booking. Dersom det hadde en positiv effekt, vil de spisse eksperimentene for å identifisere hva som utgjorde forskjellen.

I en mobilapp som Uber, er det viktig å kunne hele tiden sørge for at alt virker og er oppe, samtidig som de er avhengig av å kunne publisere ny funksjonalitet ofte. Her har de valgt å lage en webapplikasjon, som er pakket inn som en mobilapplikasjon. På denne måten trenger de kun å vedlikeholde en applikasjon, og det er enklere å dytte ut endringer i fart. De kan også spre applikasjonen sin ut over weben, slik at den alltid er tilgjengelig uansett hvor du befinner deg.

Mens i et spill som Fortnite, så lever de av å selge visuelle elementer til brukerne. Hver dag presenterer de nye figurer, danser, og rekvisita til figurene i spillet. Her er det viktig å gi spillet et estetisk uttrykk som tiltaler spillerne og trigger dem til å kjøpe mer «bling».

Samtidig må spillopplevelsen og måten de ser det de har kjøpt på gi en positiv opplevelse. Her er det ikke nødvendigvis raskest konvertering som er viktig, men riktig konvertering.

Dessuten ønsker den første siden å få brukerne raskt gjennom og ut av siden, mens den siste ønsker å holde brukerne så lenge de kan inne i spillet.

Er det noen vanlige språk, rammeverk eller verktøy som er særlig knyttet til frontend-utvikling?Felles for de fleste frontend-plattformer er at de har et språk for logikk, et språk for layout og et språk for utseende. Logikk krever et programmeringsspråk, layout er oftest et XML-basert språk, mens utseende bruker ofte en liste med nøkler og verdier.

Det er mange språk og rammeverk som brukes til frontend-utvikling. Web er desidert den største plattformen, og her er det Javascript som er kongen på haugen blant programmeringsspråk. HTML står for layout og CSS står for utseende.

Skal du kun lære deg ett språk i livet, men har ambisjoner om å tjene penger på ferdighetene dine, så anbefaler jeg at du lærer deg Javascript med tilhørende HTML og CSS. På andre plattformer er det andre språk som gjelder, på Windows er det enten .NET og språket C# eller C++ som gjelder. På Mac er det Swift eller Objective C.

Java ble ofte brukt før på tvers av plattformer, men vi ser at PWA (Progressive Web Apps) tar over dette segmentet.

Av rammeverk så er det innenfor web React, Vue og Angular som er de største, men utfordrere som Svelte blir spennende å følge i fremtiden. Felles for disse er at de ofte bruker Typescript eller andre supersett av Javascript som blir pre-prosessert og kompilert ned til Javascript.

Disse supersettene er i bunn og grunn forsøk på å gi Javascript en programmeringsstruktur mer i tråd med tradisjonelle språk som C++ eller Java, og for å gi verktøyene litt drahjelp for brukeren, de er altså ikke nødvendige. Hvis du først kan litt Javascript, er veien kort til Typescript.

Disse rammeverkene har mange likheter, og følger ofte et satt designmønster. Hvis du lærer deg hvordan disse designmønstrene fungerer og hvorfor de er strukturert slik de er, blir det enklere å flytte seg fra rammeverk til rammeverk. Det skader ikke å lære seg både React og Vue. Det skader heller ikke å kunne flere språk.

Av verktøy er det Visual Studio Code som er gratis og har åpen kildekode som er mest populær. Faktisk fire ganger så populær i forhold til neste på lista som er Sublime. Etter det følger klassikeren Vim, JetBrains Webstorm og Atom. Hvorav kun én koster penger, WebStorm.

Verktøy-stacken innenfor web er ikke like viktig som for de andre plattformene. Visual Studio dominerer .NET- og Windows-verdenen, mens XCode er det som brukes mest på Mac. Mens innenfor spill brukes stort sett Unity3d eller Unreal Engine når det gjelder standardverktøy.

Hvordan er vanskelighetsgraden og læringskurven? Hvilke forkunnskaper er det eventuelt en fordel å ha hvis man ønsker å sette seg inn i det?Læringskurven er litt forskjellig avhengig av hvilket utgangspunkt man har. Dersom man er helt blank, så er første hinder å få alt opp og gå og komme i gang.

Så fort man følger et opplegg, enten et kurs, tutorial eller bok, er det kun begrenset av din egen evne til å tilegne deg kunnskap, og tempoet i materialet du følger.

Mens dersom du kommer med en forkunnskap innenfor programmering, så er første hinder å adoptere en ny tilnærming til problemløsing. Dette kan være vanskelig for noen, og kan resultere i dårlige inntrykk av frontend-utvikling. Faktisk kan det i mange tilfeller være enklere å komme inn i denne type utvikling som helt nybegynner, enn som garva veteran. Ofte er det enklere å lære seg noe nytt, enn å omskolere seg til en ny måte å tenke på.

Dette er ikke en disiplin som krever umenneskelig intelligens eller superkrefter. Det er en veldig givende disiplin og kan være en flott inngangsport til å lære seg mer om teknologi og det digitale landskapet. Alle kan programmere dersom de har lyst, og frontend-utvikling gir deg en mulighet til å vise det du har produsert til andre mennesker og la de bruke verket ditt til å berike livene sine.

Hvilke ulemper eller utfordringer ser du med frontend-utvikling?Ulempen med frontend-utvikling er at vi er midt i en mellomfase. Vi vet nemlig ikke om det er webplattformen som kommer til å bli den siste frontend-plattformen, og vi vet ikke om Javascript kommer til å bli det siste språket. Vi vet heller ikke om React kommer til å bli det siste rammeverket.

Økosystemet er alltid i endring, og det kommer nye rammeverk, biblioteker og verktøy hele tiden. Dette fører til at det er vanskelig å få oversikt. Verktøy som NPM (Node Package Manager) hjelper litt, men ikke nok.

En annen utfordring er at siden det er så stort mangfold, kan ofte utviklere få en viss frykt for at de bruker feil sett med verktøy. Så i stedet for å fokusere på å utvikle produktet sitt, fokuserer de på å finne rett verktøykasse. Derfor er det viktig å forstå at de ikke er krise om du har bygget noe med et utdatert rammeverk, eller brukt et lite populært bibliotek. Så lenge du selv har kontroll over prosjektet ditt og du klarer å være produktiv og fortsatt lærer nye ting, er det viktigere enn om du bruker det samme som de hippeste.

Hva er forhistorien til frontend-utvikling, og hvordan har utviklingen vært?For en reise dette har vært. Da jeg startet med utvikling som barn, så handlet frontend om å putte bits inn i spesielle minneområder for å få ting opp på skjermen. Man lærte seg algoritmer og effektivisering på lavt nivå, og programmerte direkte mot hardwaren på plattformen man var på.

Etter hvert kom standardiserte verktøy for programmeringen. C, C++ og Pascal dominerte. På den tiden var frontend-utvikling langt mer likt backend-utvikling enn det er nå.

På 90-tallet kom det en revolusjon. Java, HTML, Javascript og CSS ble introdusert for verden. Java kunne produsere applikasjoner med grafiske grensesnitt på nesten alle plattformer, og ble derfor veldig populært. Det var et klart skille mellom web og desktop.

Etter hvert begynte datamaskinene å bli kraftigere og kraftigere. Webleserne ble mer og mer avanserte, og taklet mer og mer komplekse oppgaver. Dette gjorde at Java sank i popularitet, og man begynte langt mer å bygge ting i Javascript og HTML, og støttet seg til Java, PHP, Ruby og Perl på serversiden.

Folk begynte å lage flere og flere rammeverk. Team bestod ofte av en designer som laget skisser, og en frontend-utvikler som måtte finne ut hvordan tegningene kunne bli til komponenter på skjermen. Så kom smarttelefoner og da begynte virkelig ballen å rulle for frontend-utvikling.

Apper ble det nye, og apputviklere ble særdeles ettertraktet. Etter noen år ble det klart at en av de største utfordringene nå var at man måtte ha forskjellige kodebaser i forskjellige språk for hver plattform. En versjon for Android, en for iPhone, en for desktop, en for web. Dette krevde flere utviklingsteam og utfordringer med å koordinere utgivelser på tvers.

På grunn av dette så vi at web gikk ut som dominerende plattform, fordi det ble utviklet verktøy som gjorde det mulig å bruke webapps som om de var native-plattform-applikasjoner. Dette gjorde at de plattformspesifikke kodebasene ble mindre komplekse, og ikke lenger trengte egne team til å vedlikeholde dem.

Dette kombinert med DevOps-kulturen. DevOps er en kultur hvor utviklerne selv tok ansvar for hele verdikjeden fra utvikling til testing og utgivelse, og førte til at dagens landskap er langt annerledes enn tidligere. Frontend-utvikling handlet mye mer om å orkestrere samarbeid mellom designere, forretningssiden, backendutviklere og IT-teknikere enn det gjør i dag.

Faktisk ser vi i dag at flere og flere team ender opp med utviklere som tar for seg alle sider, både backend, frontend og utgivelse, og omtales da som fullstack-utviklere. NodeJS har dratt frontend-språket Javascript over til serversiden, og er blitt ganske så populært blant utviklere.

Hvordan ser du for deg at frontend-utvikling kan videreutvikles?Javascript vil dominere i tiden fremover. Dette språket er for vårt moderne samfunn det BASIC var i min barndom. Alt du trenger for å komme i gang er en nettleser og en tekstredigerer.

Jeg ser for meg at dette språket vil utvikle seg, men økosystemet vil se perioder hvor mange rammeverk og bibliotek dør ut, mens de som overlever blir mer avanserte og gir oss mer og mer funksjoner. Omtrent som naturlig utvalg fungerer i naturen.

Produsentene av enheter som telefoner og datamaskiner kommer til å eksponere flere og flere funksjoner via API-er og gjøre disse tilgjengelige for webapplikasjoner, slik at det blir færre og færre native-applikasjoner.

Native-apps vil fortsatt ha livets rett, men kun når de gir mening. Det betyr at med mindre du trenger ekstremt høy ytelse og tilgang til avanserte funksjoner som å kunne snakke med grafikkprosesseringsenheten, så vil progressive webapps (PWA) dominere. Det betyr at vi beveger oss mot en felles standard for frontend, nemlig web.

Hvilke råd kan du gi til en som ønsker å lære seg dette?Dersom du vil begi deg ut i denne fantastiske verdenen, så har jeg noen anbefalinger. Først finn ut hva du vil lære. Er det native-apps? Eller webapps? Eller spill?

Neste mål er å gå ut på internett og finne deg en guide på hvordan du kommer i gang. Hvilke ting må du laste ned? Hvordan installerer man dem? Når du har gjort det ville jeg funnet enten et online-kurs, eller enda bedre, et sett med tutorials. Følg disse akkurat slik de er. Det du lærer da er strukturen til et frontend-prosjekt, hvilke komponenter som hører til, og hvilken rolle hver del spiller.

Etter det ville jeg valgt meg et eget prosjekt, og forsøkt å bygge det. Forsøk å begynne med noe enkelt, du trenger ikke lage en ny Google Maps som første prosjekt. Det viktige er at hver gang du støter på et problem – og det vil du – så går du ut på internett og forsøker å finne svar.

StackOverflow er f.eks. en fantastisk kilde til hjelp. Der finner du et gigantisk samfunn av utviklere verden rundt, som sammen bidrar til å hjelpe folk med å finne løsninger på problemer innenfor programmering. Mange av verdens fremste på feltet bidrar ofte her, og det er utrolig mange snutter i produksjonskode rundt omkring i verden som har sitt opphav fra en StackOverflow-post.

Når dette prosjektet er ferdig, vil det mest sannsynlig ikke være verdens best applikasjon, men du har da lært utrolig mye på kort tid. Så begynn med flere prosjekter. Når du har flere prosjekter som er fullført kan du se på hvordan du kan forbedre dem.

Hvis du allerede har kommet deg i gang og har ambisjoner om å gjøre karriere ut av dette, så ville jeg funnet en skole med linjer innenfor programmering, men gjerne en skole som også tilbyr estetiske fag. Om ikke, bruk tid på å studere dette ved siden av. Du vil få så utrolig mye igjen for dette i fremtiden. Forsøk å ikke sovne i timene om kompilatorteknikk, algoritmer og datastrukturer. Det er noen gullkorn der også som er verdt å få med seg.

Software-utvikling er ikke bare en jobb, men et nytt kulturelt uttrykk. Det krever en kombinasjon av ferdigheter, og selv om det kan være krevende på tålmodigheten til tider, er det helt magisk når alt faller på plass.

En klok mann sa en gang at alle burde lære seg å programmere, fordi det lærer deg å tenke. Noe jeg vil si er helt sant, fordi etter man har lært seg å programmere, så er ikke lenger verden den samme etterpå. Fordi måten du lærer å tenke på rundt å angripe utfordringer som programmerer, overfører seg til alle andre utfordringer i livet.

Frontend-utvikling er i tillegg ganske gøy, både om det handler om å flikke på bits i et adresseområde eller å bygge grensesnitt med Javascript-komponenter. Det kule er at det du gjør er synlig! Så hva venter du på?