Ansæt senior og gennemprøvede Frontend-udviklere

Efterspørgslen efter frontend-udviklere er steget drastisk i de seneste år, simpelthen fordi der er rigtig mange mennesker, der ønsker et website, men ikke mange der er dygtige nok til at skabe et website på egen hånd.

Men hvad er frontend-udvikling egentlig, og hvorfor skal vi være opmærksomme på det?

Hvad er frontend-udvikling?

Når nogen siger ”frontend dev”, mener de normalt frontend webudvikling eller app-udvikling, som primært fokuserer på den del af websitet/applikationen, som brugerne kan se (også kendt som klientsiden).

Grundlæggende omdanner en frontend-udvikler backend-koden til en grafisk grænseflade, som brugerne kan se, bruge og interagere med uden at ødelægge applikationens backend-arkitektur.

Du kan få en mere detaljeret beskrivelse i vores ultimative guide om frontend-udviklingssprog, og hvordan de adskiller sig fra hinanden.

Hvor populær er frontend-udvikling?

Som sagt er frontend-udvikling blevet mere og mere populær i de seneste år over hele verden.

Men for virkelig at forstå dens indvirkning og betydning er vi nødt til at se på de mest populære individuelle sprog og frameworks, og behandle dem som elementer i den store pakke som frontend-softwareudvikling er.

JavaScript er på vej frem

Selv om JavaScript er et relativt gammelt scriptingsprog, bliver det konstant opgraderet (og genanvendt), og nye, hurtigere og mere pålidelige frameworks er i den seneste tid udsprunget fra JavaScript-paradigmet i et tempo, som næsten ingen kan følge med i.

Det er forbløffende, at JavaScript har været det mest anvendte programmeringssprog i ni år i træk. Vær dog opmærksom på, at for de fleste udviklere betragtes programmering som webprogrammering og omvendt.

Angular, React.js og Vue.js er de 3 bedste

JavaScript har også sin del af frameworks at vælge imellem. Kæmper såsom Angular, Vue.js og React.js er nogle af de mest efterspurgte frameworks blandt udviklere verden over.

Ud af de tre, ser det ud til, at React.js er ved at indtage førstepladsen, ved at charmere udviklingsteams hos WhatsApp, BBC, Pinterest og flere andre milliardvirksomheder.

JavaScripts ”D’Artagnan”, Vue3 er også i gang og har forsøgt at kæmpe om de tre øverste pladser. Om det vil lykkes er endnu uvist.

TypeScript er fremtiden

Selvfølgelig kan man ikke nævne JavaScript uden TypeScript: de to går nu hånd i hånd. Siden lanceringen tilbage i 2012 er TypeScript nu blevet det programmeringssprog som udviklerne helst vil arbejde med, hvis de ikke allerede gør det.

Ifølge den samme undersøgelse er TypeScript også det syvende mest populære sprog blandt alle respondenter og det femte mest populære sprog blandt professionelle udviklere. I det lys har det opnået en betydelig del af populariteten på henholdsvis 30,19% og 36,42% ud af 83.0522 og 58.031 besvarelser.

Svelte begynder at vinde popularitet

Endelig er et komponentbaseret JS framework kaldet Svelte også begyndt at vinde indpas og begynder at gøre sig bemærket på markedet.

Kode genereret i Svelte kan manipulere DOM, hvilket forbedrer ydeevnen på alle fronter og gør JavaScript endnu mere populært blandt professionelle frontend-ingeniører.

Hold udkig efter Svelte-udviklere, hvis du ikke allerede følger med i disse nye frontend-trends.

Hvor finder man frontend-udviklere af høj kvalitet

Her er nogle af de mest pålidelige stedet, hvor du kan finde og ansætte en freelance frontend-udvikler:

• Hired: en pålidelig hjemmeside hvor man kan finde frontend-, backend- og fullstack-udviklere
• Upwork: Freelance-talenter med forskellige baggrunde og erfaringer
• Dice: Et dedikeret teknisk forum med over 3 mio. fagfolk på platformen
• Gun.io: En meget unik og finurlig ressource til at finde udviklere til dine projekter
• Proxify: Det er os! Vi tilbyder professionelle udviklere, der er de bedste af de bedste, gennemtestede og forhåndsscreenede, og som er tilgængelige inden for få dage
• X-team: tilbyder on-demand udviklere til at gennemføre en række forskellige projekter

Andre online ressourcer, hvor du kan finde kvalitetsudviklere, er StackOverflow, GitHun, Reddit (med lidt vedholdenhed) og endda værktøjer som Ahrefs og SEMrusk (ved at udføre keyword-søgninger, såsom ”find frontend-udviklere tæt på mig”), hvis du er dygtig nok inden for SEO.

Sådan interviewer du frontend-udviklere

For længe siden ville frontend-udviklerens opgaver og ansvarsområder have set nogenlunde sådan ud: at kunne omsætte det statiske design til funktionelle websites eller apps ved hjælp af HTML/CSS, Java-Script og andre værktøjer og frameworks.

I dag er denne definition imidlertid blevet udvidet til stor forfærdelse for nogle få men til glæde for mange. De moderne opgaver, ansvarsområder og forventninger til en nutidig, dygtig frontend-webingeniør er som følger:

• Bygge, vedligeholde og fejlfinde på websites/i applikationer, samtidig med at du følger best practices indenfor webdesign
• Omdanne design og applikations-blueprints til frontend-kode ved hjælp af HTML5, CSS3, JavaScript og de mange frameworks og biblioteker (React.js, Angular, Vue.js)
• Samarbejde med backend-udviklere for at hjælpe med at integrere brugerfladeelementer med databaser og API’er
• Være fortrolig med søgemaskineoptimering (SEO) på stedet, herunder evnen til at optimere et website/en app med hensyn til ydeevne og hastighed
• Skrive kvalitetskode, dokumentere tilsvarende, og udføre rutinemæssige kontroller og tests for at sikre et smidigt flow af handlinger inden for hjemmesiden/applikationen
• At have en vilje til konstant at forbedre sine eksisterende færdigheder (herunder bløde færdigheder) og lære nye færdigheder i overensstemmelse hermed

Interviewspørgsmål + deres forventede svar

For juniorer

1. Hvilke færdigheder har en front-end udvikler brug for?

Forventet svar: En frontend-udvikler skal kunne HTML, CSS og JavaScript. De skal også være bekendt med responsivt design og best practices inden for webudvikling.

2. Definer HTML-metatags.

Forventet svar: Metatags er HTML-elementer, der indeholder oplysninger om siden, herunder sidens navn, beskrivelse, nøgleord, forfatter og meget mere. De bruges ofte af søgemaskiner til at hjælpe dem med at bestemme, hvordan de skal kategorisere dit websted.

3. Beskriv fordelene ved REST-webservices?

Forventet svar: REST står for Representational State Transfer. Det er en arkitektonisk stil til opbygning af webtjenester over HTTP. REST-webtjenester gør det lettere for klienter at få adgang til data på tværs af flere platforme og enheder (f.eks. mobiltelefoner).

4. Hvad er et Grid-system i CSS?

Forventet svar: Et grid-system er et sæt værktøjer til at skabe layouts ved hjælp af CSS. Det bruges ofte til at skabe et ensartet layout, der kan genbruges på tværs af flere sider, men det kan også bruges til at få en enkelt side til at se bedre ud.

5. Forklar brugercentreret design?

Forventet svar: Et brugercentreret design fokuserer på dine brugeres behov og ønsker i stedet for blot at forsøge at få dit produkt til at se godt ud. Brugercentreret design hjælper dig med at forstå, hvad dine brugere ønsker og har brug for, så de kan bruge dit produkt mere effektivt og behageligt.

6. Fortæl mig hvornår og hvorfor skal jeg gøre brug af Webpack?

Forventet svar: Webpack er en open source modulbundler til JavaScript-applikationer. Den samler alle dine filer i én fil, der kaldes en "bundle". Det betyder, at WebPack i stedet for at skulle indlæse hver enkelt fil separat (som CSS, HTML og JavaScript) bundter dem i én fil, der indlæses hurtigt og effektivt - så dit website indlæses hurtigere!

Du bør bruge Webpack, når du vil samle flere JavaScript-filer i én fil og indlæse dem alle på én gang i browseren.

7. Nævn tre måder at reducere sidens indlæsningstid på

Forventet svar:

• Hold antallet af HTTP-forespørgsler på et minimum ved at kombinere flere filer til én.

• Reducer størrelsen af hvert enkelt aktiv ved at komprimere billeder og ved at minificere HTML-, CSS- og JavaScript-filer.

• Minimer afstanden mellem serveren og slutbrugeren ved at bruge et CDN (Content Delivery Network).

For erfarne udviklere

8. Hvad er stringify?

Forventet svar: Stringify er et onlineværktøj, der hjælper dig med at konvertere almindelig tekst til rich snippets i HTML- og JSON-formater. Det virker på almindelige tekstdokumenter, udtrækker metadata fra dem og konverterer dem til JSON- eller HTML-kode med formaterings- og stiloplysninger. Der er mange udviklere, der bruger Stringify til at oprette rich snippets til deres websites, så Google bedre kan forstå, hvad deres website handler om, og placere det højere på søgeresultatsiderne.

9. Angiv alle elementerne i CSS Box Model.

Forventet svar: Box-modellen består af fire elementer: margin, padding, border og content width. Disse kommer alle sammen til at skabe en kasse omkring dit indhold på skærmen.

10. Hvad er fordelen ved srcset-attributten i et billedtag?

Forventet svar: Med srcset-attributten kan du angive flere billeder, der kan indlæses afhængigt af enhedens og skærmens størrelse. Det gør det muligt at give brugerne en bedre oplevelse, når de surfer på dit website på mobile enheder.

11. Forklar forskellen mellem Git Pull og Git Fetch

Forventet svar: Git Pull og Git Fetch er to forskellige kommandoer, der begge henter ny kode fra et fjernrepositorium og sammenføjer den til din lokale arbejdskopi. Git Pull henter ny kode fra et fjernrepositorium, sammenføjer den til din lokale arbejdskopi og stopper derefter. Git Fetch svarer til Git Pull, bortset fra at den ikke stopper efter sammenlægning; i stedet fortsætter den med eventuelle yderligere kommandoer, du har givet (som git checkout).

12. Hvad er semantisk HTML? Hvordan virker det?

Forventet svar: Semantisk HTML er, når du bruger HTML-tags, der er relevante for indholdet på dit websted, f.eks. ”paragraphs” for tekst og ”lists” for lister. Semantisk HTML hjælper søgemaskinerne med at forstå, hvad dit website handler om, så de kan give bedre resultater til brugere, der surfer på nettet med disse søgemaskiner.

13. Definer Anonymous-funktionen i JS?

Forventet svar: Den anonyme funktion i JavaScript bruges, når du ikke ønsker at definere et funktionsnavn eksplicit, men ønsker at udføre noget kode i stedet.

De vigtigste tekniske færdigheder, som frontend-udviklere bør have

Som en hurtig sidebemærkning vil nogle virksomheder kræve en bachelorgrad i datalogi eller et beslægtet område for at kunne søge et job som udvikler (uanset hvilken funktion). Nogle virksomheder kræver ikke andet en rå kodningsevner og problemløsningsevner, men det er altid et plus at have en eller anden form for udviklerrelateret certificering.

Her er nogle af de vigtigste kvalifikationer der forventes af en dygtig frontend-udvikler:

• Flere års erfaring (2+) med udvikling af moderne, hurtige og ansvarlige websites med HTML, CSS og JavaScript
• Indgående kendskab til de mest populære JavaScript-frameworks såsom React.js, Angular og Vue.js
• Stor forståelse for og stor erfaring med at arbejde med JavaScript-biblioteker som Bootstrap og jQuery
• God forståelse af SEO-principper og onsite-praksis
• Stor viden om semantiske HTML5-elementer, WAI-ARIA og mikroformater
• Stor erfaring med CSS-præprocessorer (Sass, Less eller Stylus)
• Rigelig erfaring med test og kompatibilitet på tværs af browsere

Jeg ønskede naturligvis at opklare nogle misforståelser om frontend-udviklingstjenesten (og frontend-udvikling generelt), så jeg kontaktede Proxify-netværket af udviklere med et par spørgsmål, som de med glæde besvarede.

Mit første spørgsmål var mere en isbryder end noget andet, men jeg synes at det var med til at sætte samtalen godt i gang:

1. Hvad er den største forskel mellem en frontend- og en backend-udvikler?

Armen Nersisyan, der er ekspert i HTML, CSS og JavaScript, fandt hurtigt et svar:

”Frontend-udviklere er folk, der arbejder med brugervendte detaljer, eller med andre ord alt det vi ser (på klientsiden), såsom applikationsfarver, animationer og meget andet. Alt dette laves af frontend-udviklere. På den anden side arbejder backend-ingeniører med ting som ikke er synlige for brugerne, såsom autentificering, arbejde med databaser og flere af den slags ting”.

Armen Nersisyan

En anden udvikler, der er en del af eliteholdet Proxify, gav også sin mening til kende. Ardit Maloku har stor erfaring med en lang række frontend- og backend-projekter, med hovedvægten på PHP, Laravel og JavaScript som sine foretrukne sprog:

“Frontend-udvikling er programmering, der fokuserer på de visuelle elementer på et website eller an app, som en bruger vil interagere med. I mellemtiden fokuserer backend-udvikling på den side af et website, som brugerne ikke kan se.”

Ardit Maloku

Mit andet spørgsmål var mere rettet mod ledere, kunder og andre medarbejdere, der ikke nødvendigvis kommer fra en teknisk baggrund.

2. Hvad er den ting, som ikke-tekniske folk ofte bliver mest forvirret over ved frontend-udviklere?

Armen var tydelig i sit svar:

”Frontend-udvikling bliver ofte forvekslet med UI-udvikling, og nogle gange tror folk at frontend-udviklere bare maler et maleri. Men i dag er der, ud over UI og maling, også en masse logiske dele, der skal udføres specifikt af frontend-udviklere.”

Armen Nersisyan

Ardit bød ind med en fin analogi:

”Alle kan lide biler, eller det kan i hvert fald nogle af os, haha. Hvis vi kigger på hjemmesiden, som vi kigger på bilerne, kan vi se alle de ting, de har til fælles. Så frontend er altså bilens interiør og eksteriør, mens backend er bilens motor. Brugeren på hjemmesiden er bilens fører, så føreren skal stadig trykke på pedalerne for at køre bilen. Det er det, frontend gør for websitet, den får motoren (Backend) til at køre og fungerer ud fra slutbrugerens perspektiv.”

Ardit Maloku

Han fortsatte: ”Det skaber automatiserede handlinger, der gør det lettere for den person der bruger websitet. Desuden, så vi ikke glemmer det, så tager frontend-udvikling sig af, hvordan hjemmesiden kommer til at se ud.”

Mit tredje og sidste spørgsmål var som følger:

3. Hvad er frontend-udviklere primært ansvarlige for i udviklingsprocessen af en (web)applikation?

Armens sidste svar var kort og præcist:

”De to vigtigste ting, som frontend-udviklere er ansvarlige for, er UI/UX og page speed performance.”

Armen Nersisyan

Ardit konkluderede på samme måde:

”Frontend-udviklere bør være ansvarlige for at bygge pixel-perfekte websites, holde brugerne opdateret med alt hvad der sker på websitet, og give deres mening om, hvordan man kan forbedre brugeroplevelsen.”

Ardit Maloku

Sådan tester du en frontend-udviklers tekniske færdigheder og sans for design

Der er en række tekniske spørgsmål, som du kan stille frontend-udviklere for at sikre dig, at de er dygtige, kompetente og pålidelige udviklere.

Her er flere af dem:

(1) Hvordan sikrer du dig at dit website eller din applikation er tilgængelig, brugervenlig og lever op til alle de nyeste standarder og best practices inden for webudvikling?

Forventet svar: ”Jeg sørger altid for at teste mine websites og apps på alle større browsere, enheder og konfigurationer for at sikre at brugeroplevelsen er i orden på dem alle. Jeg bruger skærmlæsere og andre løsninger for at sikre at mine applikationer er tilgængelige for alle brugere. Jeg holder mig ajour med alle webudvikleres best practices og bruger de nyeste sprogversioner for reducere og i sidste ende eliminere enhver risiko for fejl i min kode. Jeg bruger testdreven udvikling regelmæssigt eller ofte.”

(2) Hvad er dine foretrukne (og/eller mest anvendte) HTML-funktioner, og hvordan har du brugt dem i dine projekter?

Forventet svar: ”Jeg sætter stor pris på, hvordan HTML5 håndterer multimedieunderstøttelse i modsætning til de tidligere versioner. Jeg bruger ofte denne funktion til at skabe et interessant, visuelt tiltalende og responsivt design, der bruger lyd- og videoelementer som en vigtig del af den overordnede oplevelse på websitet. Det giver mig mulighed for at bygge frit uden at skulle bekymre mig om fejl under indlæsningstiden eller støde på konflikter med andre elementer på websitet.”

(3) Hvordan tilpasser du din CSS, så andre udviklere nemt kan arbejde med din kode?

Forventet svar: ”Jeg inddeler mine stylesheets i sektioner, hvor hver sektion er parret med en tilsvarende komponent på websitet. Desuden har hvert afsnit kommentarer, så når andre udviklere arbejder på koden, kan de nemt ændre den, tilføje noget til den eller skalere den.”

(4) Hvad er dine foretrukne ressourcer til at tilpasse dig de nyeste tendenser inden for frontend-udvikling og -design?

Forventet svar: ”Jeg deltager regelmæssigt i diskussioner på StackOverflow-forummet. Disse ressourcer hjælper mig enormt meget med at lære at tilpasse mig de nyeste tendenser inden for frontend-udvikling og -design.

(5) Hvad er CSS float? Kan du give nogle eksempler på, hvordan den bruges?

Forventet svar: CSS float-egenskaben placerer et element på højre eller venstre side af dens beholder, så online-elementer (og tekst) kan omsluttes uden at forårsage konflikter med andre elementer på siden. Jeg bruger ofte floats, når jeg arbejder på en side, der dynamisk ændrer størrelse på baggrund af opløsningen på brugerens enhed.”

Hvorfor skal du ansætte en frontend-udvikler?

Der er meget mere i frontend-udvikling end blot HTML-, CSS- eller JavaScript-kode. Frontend-ingeniører kan hjælpe med at levere effektive løsninger på følgende udfordringer:

Website accessibility: Accessibility-udfordringer er noget som frontend-udviklere er uddannet i og ved, hvordan de skal løse. Det er relativt nemt at skabe et website, som de fleste brugere kan få adgang til. Men hvad med at skabe et, der kan tilgås af alle brugere uanset deres situation? Frontend udviklere er de bedste personer til jobbet, da de er direkte ansvarlige for at skrive de dele af websitet, som brugerne får adgang til og interagerer med i enhver tænkelig egenskab.

Hjemmesidens ydeevne: Ifølge Steve Sounders, ekspert i websiteydelse, er mellem 80% og 90% af brugernes svartid tilknyttet frontenden. Det betyder, at kun 10-20% af websitets ydeevne er afhængig af backend (server-siden). Hvis webpræstationen er langsom og upålidelig, vil brugerne hurtigt forlade websitet og prøve andre alternativer. Derfor er det afgørende at have en god webydelse kombineret med en fantastisk brugeroplevelse, hvilket uundgåeligt fører til mere trafik og i sidste ende til bedre indtægter på lang sigt.

Webdesign: En god frontend-udvikler er en ”hybrid” mellem en softwareingeniør og en interface-designer. De er i stand til at tage et rå grafisk designmønster og omsætte det til en visuelt flot HTML-oplevelser, der tilbyder: tilgængelighed, pålidelighed, stabil webydelse, nem vedligeholdelse, kompatibilitet på tværs af enheder og responsivt webdesign.