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 ca 2 år sedan och har hunnit med att intervjua ett antal front-end utvecklare under den tiden. 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å?

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 nyaste? Detta har helt klart tagit uppmärksamheten från semantisk kod, alla som var på intervju sa 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 massa klasser. Mitt tips är att använda enbart media querrys och width i % istället för ramverken och slippa då dom 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 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 semantiskt 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

Amazon Web Services bjöd in till kalas, självklart var vår Head of Technology, Andreas Wellén, där för att höra vilka planer och nyheter AWS hade att presentera. 
Förra veckan bjöd ingen mindre än Zalando in till världens största och första plattformskonferens och självklart var vår egen Niklas Olssén där och spanade! Här bjuder han på det mest intressanta från eventet.
Har du missat att vi för andra året i rad genomför ett acceleratorprogram inom digital handel? Läs vad Oscar Tryvall har att säga om programmet och ta testet (längst ner) för att se om du är vår nästa Digital Business Innovator.
Vår Marketing Manager för iStone Commerce, Katarina Nilsson, besökte Shoptalk i Las Vegas och spanade in vad som trendar bland några av världens mest digitala retailbolag. 
Vår Marketing Manager, Katarina Nilsson, sammanfattar höjdpunkterna från årets största e-handelsevent.