#Frontend

5 tips till dig som är frontendutvecklare

1. Det fundamentala först: HTML och CSS 

Det kan vara frestande att hoppa på det nya hetaste JavaScript-ramverket direkt. Gör inte det. Innan vi börjar använda bibliotek, ramverk och annan magi vill vi förstå det mest grundläggande av webben: HTML och CSS. HTML är innehållet och CSS bestämmer hur innehållet presenteras. Detta är allt som behövs för att skapa en webbsida. Det finns ingen mening med att lära sig exempelvis React om du inte förstår HTML och CSS (eller JavaScript för den delen). Innan man lär sig springa måste man lära sig gå, eller något… Jag har inget emot ramverk men om man är ny och vill lära sig så finns det en risk att dessa ramverk bara blir "HTML och CSS med extrasteg".

Lär dig vad HTML-elementen betyder och när dom ska användas. Lär dig varför det är viktigt. Läs på om "accessibility" (tillgänglighet, även förkortat "A11Y" på internet) och WCAG. Allt detta är saker du kan lära dig utan att kolla på JavaScript. Webben är till för alla! Se till att alla kan använda den.

2. JavaScript efter HTML och CSS 

Först pratar han om HTML och CSS, och nu JavaScript? Det är ju detta webben är byggd på, det är självklart att man ska kunna dessa tre teknologier. Riktigt dålig clickbait Pontus…😉… Men häng med här nu... I "modern" frontend-utveckling finns det en förkärlek till bibliotek och ramverk. Visst, det är okej, men jag tycker att man bör förstå varför dessa ramverk används. Behöver verkligen er glorifierade CRUD-app byggas med React, Redux, Reselect, Axios, Tailwind, AngularJS, Emotion, Styled-Components, Pineco, jQuery, lodash, underscore, rambda, Zod, Zapdos, Zustand och MooTools? left-pad 😎! Förmodligen inte. Men ibland är det verkligheten vi lever (eller jobbar) i och det finns en sak gemensamt: HTML, CSS och JavaScript. Kan du detta så kan du lära dig alla "flavor of the month"-ramverk och hänga med i utvecklingen.

Två av dessa paket i listan är egentligen Pokémon och inte alls frontendrelaterade, vilka då?

Det spelar heller ingen roll hur många .NET-utvecklare som säger till dig att "med WebAssembly slipper vi snart JavaScript och kan skriva C# överallt!" - jag har hört det i flera år och folk skriver fortfarande JavaScript. Men det försvinner nog vilken sekund som helst nu! Säg vad du vill om JavaScript men om du vill jobba med dedikerad frontend-utveckling så är det svårt att undvika. Se till att bli bra på det! Frameworks kommer och går, JavaScript består 🥁.

”You Don't Know JS" av Kyle Simpson är en bra, gratis och djupdykande bok. Kanske för djupdykande för vissa, men fortfarande bra.

Om/När WebAssembly blir stort: Personligen skulle jag välja programmeringsspråk med Algebraiska Datatyper! Att lära sig ett språk med det och ordentlig Pattern Matching förändrar en. Man blir trött på språk som inte har dessa features. Det är svårt att gå tillbaka… Men något säger mig att både C# och Java kommer introducera algebraiska datatyper och pattern matching förr eller senare. Själv har jag ögonen öppna på Rust som stödjer båda dessa features och mera. Även alternativ som kompileras direkt till JavaScript som ReScript, Fable och Elm.

3. Webbrowsern och dess utvecklingsverktyg

Slutligen, det mest självklara och underskattade av allt: Webbrowsern. Det är här vår kod körs och det är ett utmärkt redskap för att lära sig mer om vår kod och hur den kommer att påverka slutanvändaren. Jag skulle säga att vi frontendare är lite bortskämda med utvecklingsverktyg i webbrowsern. Bekanta dig med alla flikarna i Inspectorn och bli bra på det. Det finns otroliga redskap för att hålla kolla på prestanda och även externa redskap som till ditt favoritramverk och tillgänglighet. Lär dig att använda dessa redskap: för att göra din kod bättre och få bättre förståelse för hur webbrowsern fungerar. Webbrowsern är vår plattform! Ett av dessa redskap som i min värld är ett måste att lära sig är Lighthouse.

4. Bli bekväm med att läsa andras kod

Jag får ganska ofta uppfattningen att många utvecklare hanterar npm-paket och liknande som en svart låda. Det är något man npm install:ar, kollar lite exempel i dokumentationen och hoppas att det täcker ens användningsområde. Att titta lite på källkoden i dessa bibliotek är ett grymt sätt att lära sig! Att läsa källkod i npm-paket är inte svårare än att läsa källkod från din kollegas Pull Request, och det går ju, eller hur?

5. Fördjupa dig

Jag brukar skämtsamt säga att man inom frontend kan välja att vara "frontend frontend" eller "backend frontend". Men jag tycker det till viss del är sant. Det går att bygga applikationer med CMS-lösningar som WordPress, Single Page Applikationer med React, fullstacklösningar som Remix eller handskriven HTML med en magnetiserad nål och en stadig hand. Oavsett om det är CSS eller Remix så finns det saker att fördjupa sig i. Hitta ditt favoritsätt att bygga webbsidor och bli bra på det!

Ett annat område som är relaterat till allt detta är TypeScript. Majoriteten av uppdrag jag tagit har förr eller senare involverat TypeScript. Det har nästan blivit en hygienfaktor att använda ett typsystem i större projekt. Jag tror inte det kommer att försvinna och att bli bra på TypeScript, eller att tänka kring hur ens data är formad, kommer aldrig skada.

Avslutningsvis

Det jag tror jag vill komma fram till med detta är - lär er det fundamentala först. Webben idag består av HTML, CSS och JavaScript, men det är lätt att få tunnelseende på JavaScript. JavaScript är hjälpmedel för att rendera HTML och CSS. Hur många kb JavaScript bör vi skicka ut till användaren för att åstadkomma detta? Ibland känns det som att vi prioriterar DX (Developer Experience) framför UX (User Experience): Hur lång tid tar er sida att ladda på en halvdassig 3G-uppkoppling? Alieneras användare med sämre devices och uppkoppling? Vi har redskapen för att lösa dessa problem.

Kom ihåg att "WWW" står för "World Wide Web" - inte "Wealthy Western Web".

Helana och mats tittar i mobilen tillsammans

 

Publicerad: 2023-04-04