iStone

Snabbare rendering, bättre sökoptimering och renare kod. Vår front-end utvecklare Johan Kleine Bjällskog om varför du ska programmera semantiskt.

Semantik inom webbutveckling innebär att man använder rätt element för rätt innehåll så sidan tolkas rätt. Till exempel använda elementen header, article, footer mm istället för divar.

Jag började som front-end lead på iStone för ungefär två år sedan och har hunnit med att intervjua ett antal front-end utvecklare under den tiden. Det jag märkt av som en trend i mina intervjuer är att fler och fler inte skriver eller är intresserade av semantisk kod. Vad beror detta på?

Det senaste och nyaste inom front-end är helt klart de nya stora js-ramverken som kommit (Angular, React mm). Och vem vill inte vara med och lära sig det senaste? Detta har helt klart tagit uppmärksamheten från semantisk kod, alla som var på intervju berättade stolt att de hållit på med ett eller båda av dessa js-ramverk.

Det jag märkt som en trend i mina intervjuer är att fler och fler inte skriver eller är intresserade av semantisk kod. Vad beror detta på?

En annan bov är ramverk som Bootstrap och Zurb Foundation som hjälper utvecklare att enkelt kunna få upp en sida snabbt, men koden som produceras genererar mycket extra divar och en massa klasser. Mitt tips är att använda enbart media querrys och width i % istället för ramverken och slippa de extra elementen och klasserna. ”Clean code makes a happy developer”.

Detta tycker jag är synd. Att koda semantiskt innebär en mängd fördelar. Här följer sju punkter om varför jag tycker man ska koda semantiskt. Använd dem gärna om du behöver förklara för en chef, kund, projektledare eller kollega.

Semantisk kod gör sidan tillgänglig för alla

Om man bygger sidan semantiskt kan folk med nedsatta förmågor ta del av sidan. Program som läser upp text och visar hur man ska navigera på sidan hittar rätt element och kan ge feedback till alla.

Semantisk kod gör sidan sökoptimerad

Sökmotorer hittar rätt fakta och element eftersom du har skrivit semantisk kod, detta gör att du kommer bli högre rankad och hamna längre upp i sökresultat.

Semantisk kod går snabbare att rendera för browsers

En browser vet direkt vad den ska rendera och på så sätt kommer sidan bli snabbare och upplevelsen för kunden blir snabb och bättre.

Semantisk kod skapar renare kod

Du kommer behöva färre element när du skriver din kod och sidan kommer därför både bli renare för utvecklare samt ”väga mindre” och därför renderas snabbare för kund.

Semantisk kod är enklare att förstå

Pga sidan blir renare och att elementen du använder säger vad dom gör så kan utvecklarna snabbare förstå vad dom tittar på. 

Semantisk kod gör det enklare att förvalta och bygga om sidan (maintainable)

Ren kod som punkt 4 pratar om gör att sidan lättare kan byggas om och även tas hand om i förvaltningsfasen.

Semantisk kod sparar pengar

Detta brukar få alla chefer glada, ja om du skriver ren kod som gör att sidan blir lättare att förstå och kan därför både förvaltas och ändras går det snabbare att bygga den och förvalta den. Vilket i slutändan gör att pengar sparas och du kan lägga tiden på annat.

Om du håller med mig eller känner att du vill gräva ner dig djupare i semantisk kod, kommentera gärna eller skicka mig ett mail på johan@magicbyistone.se så kan vi börja en diskussion. Vem vet du kanske till och med blir min kollega? Just nu söker vi fler utvecklare! :)

Klicka för lediga Front-end roller 

Diskutera detta inlägg

Rekommenderad läsning

Årets D-Congress lockade två tusen deltagare och ett hundratal utställare på Svenska Mässan i Göteborg. Här sammanfattar jag och min kollega Maria Joons våra intryck från Nordens mötesplats för digital handel.
Ny teknik som hjälper oss att förstå kund- och användarbeteenden är på stark framfart. Eyetracking är en av metoderna som nått bred framgång.
Säkra handlingsplan och framgång under 2018 genom att ta del av våra mest populära insikter och råd från året som gått.
Vilka ämnen diskuteras när man låter etablerade retailers, globala digitala jättar och disruptiva startups mötas på en arena med mer än tvåtusen besökare? Vår Marketing Manager Katarina sammanfattar diskussionerna från Shoptalk Europe. 
Microservices är en riktig snackis i e-handelsvärlden just nu. Men vilka är fördelarna och nackdelarna? Vår Head of Technology, Andreas Wellén, reder ut det viktigaste.