Efterfrågan på frontend-utvecklare har drastiskt ökat på senare år, helt enkelt för att det är så många människor som vill ha en hemsida, men inte tillräckligt många som kan göra en hel hemsida själv.

Men vad exakt är det en frontend-utvecklare gör och varför bör vi ska vi ha fokus på det?

Vad är frontend utveckling?

När någon säger "frontend-utvecklare" så menar de vanligtvis frontend webbutveckling eller apputveckling, vilka huvudsakligen fokuserar på den del av hemsidan/applikationen som användare ser från deras håll (även känt som klient-sidan)

En frontend webbutvecklare transformerar helt enkelt backend koden till ett grafiskt gränssnitt som användaren kan se, använda och påverka utan att förstöra backend arkitekturen av applikationen.

För en mer detaljerad beskrivning, kolla in vår ultimata guide på frontend utvecklingsspråk och hur de skiljer sig åt från varandra.

Hur populärt är frontend utveckling?

Som jag nämnde så ökar populariteten i frontend utveckling på senare år, på hela planeten.

För att verkligen förstå dess inverkan och importansen så måste vi dock ta en titt på de mest populära individuella språk och ramverk och behandla dem som element som finns i det stora arsenal som är frontend mjukvaruutveckling.

JavaScript cruisar vidare

Trots att det är ett relativt gammalt skriptspråk så blir JavaScript konstant uppdaterat (och från nya användningsområden), med nyare, snabbare och mer pålitliga ramverk som "forsar" your JavaScript-paradigmen i en fart som knappt någon kan hålla koll på.

Otroligt nog är JavaScript det mest allmänt använda programmeringsspråk i nio år i rad. Lägg dock märke till att för de flesta utvecklare så är programmering ansett som webbprogrammering, och vice versa.

Angular, React.js, och Vue.js är på topp 3

JavaScript har även en hel del ramverk att välja från. Kraftfulla ramverk som Angular, Vue.js och React.js är bland några av de mest efterfrågade ramverk av utvecklare världen över.

Av den ultimata JavaScript trifekta så verkar det som att React.js tar täten genom att vinna över hjärnor och hjärtan av utvecklingsteam på WhatsApp, BBC, Pinterest och många fler multimiljardsföretag.

"D'Artagnan av JavaScript", Vue 3 bjuder också upp till kamp och har försökt slå sig in på topp 3 listan, men huruvida det kommer lyckas återstår att se.

TypeScript är framtiden

Självklart kan vi inte nämna JavaScript utan TypeScript: Det har blivit som grädden på potatismoset för närvarande. Sedan dess lansering 2012 är TypeScript nu språk nummer ett som utvecklare vill jobba allra helst med, om de inte redan gör det.

Enligt samma undersökning så är TypeScript även det sjunde mest populära språk bland alla svar och det femte mest populära språk bland professionella utvecklare. I sken av detta så har det fått sin förtjänta del av populariteten med 30.19% samt 36.42% av 83.052 respektive 58.031 svarande.

Svelte börjar få popularitet

Slutligen har vi ett komponentbaserat JS-ramverk som heter Svelte och som börjar få momentum och gör sig självt ett namn.

Kod genererad i Svelte kan manipulera DOM:en, och på så sätt förbättra prestandan på alla fronter och bumpar JavaScript än högre när det kommer till popularitet bland professionella frontend-ingenjörer.

Håll utkik efter Svelte-utvecklare om du inte bevakar dessa up and coming frontend-trender redan.

Var man hittar frontend-utvecklare av kvalité

Här är några av de mest pålitliga ställena du kan hitta och anställa freelansande frontend-utvecklare:

• Hired: En pålitlig sida för att hitta frontend-, backend- och fullstack-utvecklare
• Upwork: Freelance talanger kommer från en rad olika bakgrunder och erfarenheter t
• Dice: En dedikerad tech-tavla med över 3 miljoner yrkespersoner på dess plattform
• Gun.io: En väldigt unik tillgång för att hitta utvecklare till dina projekt
• Proxify: Detta är vi! Vi erbjuder utmärkta, undersökta och pre-screened professionella utvecklare som är tillgängliga på bara några dagar
• X-team: Erbjuder on-demand utvecklare för att färdigställa en stor mix av olika projekt

Andra online-tillgångar där du kan hitta utvecklare av kvalité inkluderar StackOverflow, GitHub, Reddit (med ihärdighet), och även andra verktyg som Ahrefs och SEMrush (om man genomför nyckelordssökningar såsom t.ex "find frontend developers near me") om man är tillräckligt duktig i SEO.

Hur man intervjuar frontend-utvecklare

För länge sedan så var plikterna och ansvarsområdena för frontend-utvecklare något som detta: kunna översätta statisk design till funktionella webbsidor eller appar användandes av HTML/CSS, JavaScript samt andra verktyg och ramverk

Idag har dock denna definition blivit bredare till missnöjet för några. De moderna plikterna, ansvarsområdena samt förväntningar från en samtida skicklig frontend webbingenjör är följande:

• Bygga, underhålal och felsöka webbplatser och webbapplikationer samtidigt som de följer bästa praxis för webbdesign
• Omvandla design och applikationsritningar till frontend-kod med HTML5, CSS3, JavaScript och dess många ramverk och bibliotek (React.js, Angular, Vue.js)
• Arbeta tillsammans med backend-utvecklare för att integrera användargränssnittselement med databaser och API:er
• Vara bekant med sökmotoroptimering på plats (SEO), inklusive möjligheten att optimera en webbplat/app för prestanda och hastighet
• Skriva kvalitetskod, dokumentera därefter och utföra rutinkontroller och test för att säkerställa ett smidigt flöde av operationer på webbplatsen/applikationen
• Att ha drivkraften att ständigt förbättra sina befintliga färdigheter (inklusive soft skills) samt lära sig nya relevanta färdigheter

Intervjufrågor + deras förväntade svar

För juniorer

1. Vilka färdigheter behöver en frontend-utvecklare?

Förväntat svar: En frontend-utvecklare måste känna till HTML, CSS och JavaScript. De måste också vara bekanta med responsiv design och bästa praxis för webbutveckling.

2. Definiera HTML-metataggar.

Förväntat svar: Metataggar är HTML-element som innehåller information om sidan, inklusive sidans namn, beskrivning, nyckelord, författare med mera. De används ofta av sökmotorer för att hjälpa dem att avgöra hur de ska kategorisera din webbplats.

3. Beskriv fördelarna med REST webb-tjänster?

Förväntat svar: REST står för Representational State Transfer. Det är en arkitektonisk stil för att bygga webbtjänster via HTTP. REST-webbtjänster gör det enklare för klienter att komma åt data på flera plattformar och enheter (till exempel mobiltelefoner).

4. Vad är ett rutnätssystem i CSS?

Förväntat svar: Ett rutnätssystem är en uppsättning verktyg för att skapa layouter med CSS. Det används ofta för att skapa en konsekvent layout som kan återanvändas på flera sidor, men det kan också användas för att få en single-sida att se bättre ut.

5. Förklara användarcentrerad design?

Förväntat svar: En användarcentrerad design fokuserar på användarnas behov och önskemål, snarare än att bara försöka få din produkt att se snygg ut. Användarcentrerad design hjälper dig att förstå vad dina användare behöver och vill ha så att de kan använda din produkt mer effektivt och njutbart.

6. Berätta när och varför jag ska använda Webpack?

Förväntat svar: Webpack är en modulbuntare med öppen källkod för JavaScript-applikationer. Den buntar ihop alla dina filer till en fil som kallas ett "paket". Det betyder att istället för att behöva ladda varje enskild fil separat (som CSS, HTML och JavaScript), buntar WebPack ihop dem till en fil som laddas snabbt och effektivt - så att din webbplats laddas snabbare!

Du bör använda Webpack när du vill bunta ihop flera JavaScript-filer till en fil och ladda dem alla på en gång i webbläsaren.

7. Nämn tre sätt att minska sidinläsningstiden.

Förväntat svar:

• Håll antalet HTTP-begäranden till ett minimum genom att kombinera flera filer till en.

• Minska storleken på varje tillgång genom att komprimera bilder och förminska HTML-, CSS- och JavaScript-filer.

• Minimera avståndet mellan servern och slutanvändaren med hjälp av ett CDN (Content Delivery Network).

För erfarna utvecklare

8. Vad är stringify?

Förväntat svar: Stringify är ett onlineverktyg som hjälper dig att konvertera vanlig text till rika utdrag i HTML- och JSON-format. Det fungerar på vanliga textdokument, extraherar metadata från dem och konverterar dem till JSON- eller HTML-kod med formatering och stilinformation. Det finns många utvecklare som använder Stringify för att skapa rika utdrag för sina webbsidor samt webbplatser så att Google bättre kan förstå vad deras webbplats handlar om och rangordna den högre på sökresultatsidor.

9. Ange alla element i CSS Box Model.

Förväntat svar: Boxmodellen består av fyra element: marginal, utfyllnad, kantlinje och innehållsbredd. Dessa arbetar tillsammans för att skapa en ruta runt ditt innehåll på skärmen.

10. Vad är fördelen med attributet srcset i en bildtagg?

Förväntat svar: Med attributet srcset kan du ange flera bilder som ska läsas in beroende på enhet och skärmstorlek. Detta gör det möjligt att ge användarna en bättre upplevelse när de surfar på din webbplats på mobila enheter.

11. Förklara skillnaden mellan Git Pull och Git Fetch

Förväntat svar: Git Pull och Git Fetch är två olika kommandon som båda hämtar ny kod från en fjärrlagringsplats och sammanfogar den till din lokala arbetskopia. Git Fetch liknar Git Pull, förutom att det inte slutar efter sammanslagning; i stället fortsätter det med alla ytterligare kommandon du har gett (som git-check-out).

12. Vad är semantisk HTML? Hur fungerar det?

Förväntat svar: Semantisk HTML är när du använder HTML-taggar som är relevanta för innehållet på din webbplats, till exempel stycken för text och listor för listor. Semantisk HTML hjälper sökmotorer att förstå vad din webbplats handlar om så att de kan ge bättre resultat för användare som surfar på webben med dessa sökmotorer.

13. Definiera funktionen Anonym i JS?

Förväntat svar: Den anonyma funktionen i JavaScript används när du inte uttryckligen vill definiera ett funktionsnamn, utan snarare vill köra lite kod i stället.

De bästa tekniska färdigheterna som frontend-utvecklare borde ha

Som ett litet sidospår, vissa företag kräver en kandidatexamen i datavetenskap eller ett relaterat område för att ansöka för ett jobb som utvecklare (i vilken egenskap som helst). Vissa företag kräver inget annat än rå kodningsförmåga och problemlösningsförmåga, men att ha någon form av utvecklarrelaterad certifiering är alltid ett plus.

Här är några av de viktigaste kvalifikationerna som förväntas av en kunnig frontend-utvecklare:

• Flera års erfarenhet (2+) av att utveckla moderna, snabba och ansvarsfulla webbplatser med HTML, CSS och JavaScript
• Fördjupad kunskap i de mest populära JavaScript-ramverken som React.js, Angular och Vue.js
• Stor förståelse och mycket erfarenhet av att arbeta med JavaScript-bibliotek som Bootstrap och jQuery
• God förståelse för SEO-principer och praxis
• Stor skicklighet med semantiska HTML5-element, WAI-ARIA och mikroformat
• Stor skicklighet med CSS-förprocessorer (Sass, Less eller Stylus)
• Gott om erfarenhet av testning och kompatibilitet mellan webbläsare

Naturligtvis ville jag rensa upp några missuppfattningar om frontend-utvecklingstjänsten (och frontend-utveckling i allmänhet), så jag kontaktade Proxify-nätverket av utvecklare med ett par frågor som de gärna svarade på.

Min första fråga var mer av en isbrytare än något annat, men jag tror att det hjälpte till att sätta tonen i samtalet fint:

1. Vad är den största skillnaden mellan en frontend- och en backend-utvecklare?

Armen Nersisyan, en HTML-, CSS- och JavaScript-expert, svarade snabbt:

"Frontend-utvecklare är människor som arbetar med användarinriktade detaljer, eller med andra ord, allt vi ser (klientsidan) som applikationsfärger, animationer och mycket mer. Allt detta görs av frontend-utvecklare. Å andra sidan arbetar backend-ingenjörer med saker som inte är synliga för användarna som autentisering, arbete med databaser och fler sådana saker.”

Armen Nersisyan

En annan utvecklare, en del av Proxify-teamets elitutvecklare, erbjöd också sin uppfattning. Ardit Maloku har stor erfarenhet av en mängd olika frontend- och backend-projekt, med störst fokus på PHP, Laravel och JavaScript som hans föredragna språk:

”Frontend-utveckling är programmering som fokuserar på de visuella elementen på en webbplats eller app som en användare kommer att interagera med. Under tiden fokuserar backend-utveckling på sidan av en webbplats som användare inte kan se.”

Ardit Maloku

Min andra fråga riktades mer mot chefer, kunder och andra medarbetare som inte nödvändigtvis kommer från en teknisk bakgrund.

2. Vad är det enda som icke-tekniska människor ofta blir förvirrade över vad gäller frontend-utvecklare?

Armen var rak i sitt svar:

"Frontend-utveckling förväxlas ofta med UI-utveckling, och ibland tror folk att frontend-utvecklare bara gör en målning. Men nuförtiden, förutom UI och målning, finns det också många logiska delar som måste slutföras specifikt av frontend-utvecklare.”

Armen Nersisyan

Ardit kom in med en fin analogi:

"Alla gillar bilar, eller åtminstone några av oss gör det, haha. Om vi tittar på webbplatsen när vi tittar på bilarna kan vi se alla saker de har gemensamt. Så frontend är insidan och utsidan av en bil medan backend är motorn i den. Användaren på webbplatsen är föraren av bilen, så föraren måste fortfarande trycka på pedalerna för att köra bilen. Det är vad frontend gör för webbplatsen, det gör att motorn (backend) körs och fungerar ur slutanvändarens perspektiv.”

Ardit Maloku

Han fortsatte: "Med allt detta sagt får frontend data att interagera med användaren; det skapar automatiserade åtgärder som gör det lättare för den person som använder webbplatsen. Så vi glömmer inte heller att frontend-utveckling tar hand om hur webbplatsen (eller webbsidan) kommer att se ut.”

Min tredje och sista fråga var följande:

3. Vad är frontend-utvecklare främst ansvariga för i utvecklingsprocessen för en (webb) applikation?

Armens sista svar var kort och tillämpbart:

"De två viktigaste sakerna som frontend-utvecklare ansvarar för är UI/UX och sidhastighetsprestanda."

Armen Nersisyan

Ardit avslutade på ett kortfattat sätt:

"Frontend-utvecklare bör ansvara för att bygga pixel-perfekta webbplatser, hålla användarna uppdaterade med allt som händer på webbplatsen och ge åsikter om hur man kan förbättra användarupplevelsen."

Ardit Maloku

Hur man testar en frontend-utvecklares tekniska färdigheter och öga för design

Det finns ett antal tekniska frågor som du kan ställa till frontend-utvecklare för att se till att de är skickliga och pålitliga utvecklare. Här är ett flertal.

(1) Hur ser du till att din webbplats eller applikation är tillgänglig, användarvänlig och upp till alla de senaste webbutvecklingsstandarderna och bästa praxis?

Förväntat svar: "Jag ser alltid till att testa mina webbplatser och appar på alla större webbläsare, enheter och konfigurationer för att säkerställa att användarupplevelsen är i nivå med dem alla. Jag använder hjälp av skärmläsare och andra lösningar för att se till att mina applikationer är tillgängliga för alla användare. Jag håller mig uppdaterad med alla bästa metoder för webbutveckling och använder de senaste språkversionerna för att minska och så småningom eliminera eventuellt utrymme för fel i min kod. Jag använder testdriven utveckling regelbundet och ofta."

(2) Vilka är dina favoritfunktioner i (och/eller mest använda) HTML, och hur har du använt dem i dina projekt?

Förväntat svar: "Jag uppskattar verkligen hur HTML5 hanterar multimediastöd i motsats till dess tidigare iterationer. Jag använder ofta den här funktionen för att skapa en intressant, visuellt tilltalande och lyhörd design som använder ljud- och videoelement som en viktig del av den övergripande webbplatsupplevelsen. Det gör att jag kan bygga fritt utan att behöva oroa mig för buggar under laddningstiden eller stöta på konflikter med andra element på webbsidan.

(3) Hur anpassar du din CSS så att andra utvecklare enkelt kan arbeta med din kod?

Förväntat svar: "Jag ordnar mina formatmallar i sektioner och parar ihop varje avsnitt med en motsvarande komponent på webbplatsen. Dessutom har varje avsnitt kommentarer, så när andra utvecklare arbetar med koden kan de enkelt ändra den, lägga till i den eller skala den.

(4) Vilka är dina favoritresurser för att anpassa dig till de senaste trenderna inom frontend-utveckling och design?

Förväntat svar: Jag deltar regelbundet i diskussioner på StackOverflow-forumen. Dessa resurser hjälper mig oerhört att lära mig och anpassa mig till de senaste trenderna inom frontend-utveckling och design.

(5) Vad är en CSS-flottör? Kan du dela med dig av några exempel på hur det används?

Förväntat svar: CSS float-egenskapen placerar ett element på höger eller vänster sida av behållaren, vilket gör att infogade element (och text) kan lindas runt det utan att orsaka konflikter med andra element på sidan. Jag använder ofta floats när jag arbetar på en sida som dynamiskt ändrar storlek baserat på upplösningen på användarens enhet."

Varför ska du anställa en frontend-utvecklare?

Det finns så mycket mer i frontend-utveckling än bara HTML-, CSS- eller JavaScript-kod. Frontend-tekniker kan hjälpa till att tillhandahålla effektiva lösningar på följande utmaningar:

Webbplatstillgänglighet: Tillgänglighetsutmaningar är något som frontend-utvecklare är utbildade i och vet hur man löser. Det är relativt enkelt att skapa en webbplats som kan nås av de flesta användare. Men vad sägs om att skapa en som kan nås av alla användare oavsett deras omständigheter? Frontend-utvecklare är de bästa personerna för jobbet, eftersom de är direkt ansvariga för att skriva de delar av webbplatsen som användare kommer åt och interagerar med i alla tänkbara kapaciteter.

Webbplatsens prestanda: Enligt webbplatsens prestandaexpert Steve Souders tilldelas mellan 80% och 90% av användarens svarstid till frontend. Detta innebär att endast 10-20% av webbplatsens prestanda är beroende av backend (serversidan). Om webbprestandan är långsam och opålitlig kommer användarna snabbt att överge webbplatsen och prova andra alternativ. Det är därför det är viktigt att ha bra webbprestanda, i kombination med ett fantastiskt användargränssnitt (användarupplevelse), vilket oundvikligen leder till mer trafik och i slutändan förbättrade intäkter på lång sikt.

Webbdesign: En frontend-utvecklare av hög kvalitet är en "hybrid" mellan en mjukvaruingenjör och en gränssnittsdesigner. De kan ta ett rått grafiskt designmönster och översätta det till en visuellt glänsande HTML-upplevelse som erbjuder: tillgänglighet, pålitlig webbprestanda, enkelt underhåll, kompatibilitet över flera enheter och responsiv webbdesign.