Bij HYPER werkt onze development afdeling met een eigen basis Magento 2 thema genaamd Vitals. Met input van zowel onze marketing als onze development teams hebben we best practices geïmplementeerd om een solide en goed functionerende basis te bieden aan onze klanten. Boven op het Vitals thema wordt vaak maatwerk naar wens doorgevoerd voor onze klanten. Door te werken met coding standards, hebben we een strak, efficiënt en herbruikbaar thema gecreëerd.
Wat zijn Coding Standards en waarom bestaan ze?
Coding standards zijn regels die worden gebruikt tijdens het ontwikkelen van software om consistentie, leesbaarheid en kwaliteit in de code te waarborgen. Ze zorgen ervoor dat ontwikkelaars op dezelfde manier code schrijven. Hierdoor wordt het gemakkelijker om wijzigingen aan te brengen, de code te onderhouden en samen te werken. Door het volgen van coding standards wordt het ontwikkelproces efficiënter, zijn er minder onderhoudskosten en wordt de code (en webshop!) van hogere kwaliteit.
Het belang van Coding Standards
Wij vinden het zeer belangrijk dat er gebruik wordt gemaakt van strakke Magento coding standards. Dit helpt om nog beter presterende webshops te creëren op alle aspecten; snelheid, gebruikerservaring en vindbaarheid. Daarnaast vinden wij het belangrijk dat de structuur onder de motorkap van een webshop netjes en gestroomlijnd is. Dit zorgt er ook voor dat wij in ons team minder vragen hebben naar elkaar over wat bepaalde code doet, dat we stukken code kunnen hergebruiken en dat we alles makkelijk kunnen lezen. Hoe logisch dat ook klinkt, is het niet overal gebruikelijk.
Met onze coding standards willen wij ook zo duurzaam mogelijk een webshop ontwikkelen en laten functioneren. Zoals ik net ook aangaf vinden we het belangrijk dat de structuur goed gestroomlijnd en netjes is. Door minimalistisch te coderen te komen, kost het minder energie om de webshop te laten draaien. Dit gaat niet ten koste van de prestaties van de webshop. Stapje voor stapje een beetje groener.
Hoe zet HYPER Magento 2 coding standards in?
Het mag duidelijk zijn dat coding standards een belangrijke rol spelen binnen ons development team. Wanneer een nieuwe developer zich bij ons team aansluit, leren wij deze persoon aan hoe onze werkwijze werkt zodat hij of zij zich dit helemaal eigen kan maken. Voor front-end maken we gebruik van drie principes, deze leg ik hieronder kort uit.
BEM, een HTML/CSS principe voor een nette, consistente front-end
Voor de front-end van het Vitals thema volgen en gebruiken wij het BEM-principe. Dit staat voor Block-Element-Modifier. Het principe maakt het mogelijk om compacte, herbruikbare elementen te programmeren die op een nette manier ingezet kunnen worden op meerdere pagina’s en plekken binnen een webshop. Deze HTML/CSS coding standards geven consistentie in de uitwerking van een ontwerp binnen een webshop. Bij HYPER maken we ook gebruik van herbruikbare elementen tijdens het ontwerpproces, waardoor het BEM-principe dan ook weer perfect bij onze werkwijze past.
De ‘B’ staat voor block
Een block is een component/omhulsel dat meerdere elementen kan bevatten, neem bijvoorbeeld een knop in een webshop, in dit element bevinden zich een tekst en icoontje.
De ‘E’ staat voor element
In de knop bevinden zich meerdere losse elementen zoals een tekst en een icoontje die moeten worden gezien als losse elementen. Deze kunnen allemaal een losse styling krijgen via CSS.
De ‘M’ staat voor modifier
Als de knop anders getoond moet worden ten opzichte van de standaard button, dan kan ervoor worden gekozen om een modifier toe te passen op de button, hiermee kan bijvoorbeeld een andere kleur tekst of een ander icoontje worden ingeladen.
Hieronder geef ik je een voorbeeld met BEM code, hiermee kan er naast de standaard knop met een witte tekst, ook een rode tekst tonen.
// Block
.button {
align-items: center;
display: flex;
background-color: black;
padding: 1rem 1.5rem;
// Element
&__text {
color: white;
font-weight: bold;
// Modifier
&--red {
color: red;
}
}
}
<!-- Standaard block -->
<div class="button">
<div class="button__text">Toevoegen aan winkelwagen</div>
</div>
<!-- Aangepast block -->
<div class="button button--red">
<div class="button__text">Toevoegen aan winkelwagen</div>
</div>
Het 5-1 principe voor overzichtelijke styling binnen een project
Voor het organiseren van styling gebruiken wij binnen HYPER het 5-1 principe. Dit houdt in dat wij werken met 5 folders en 1 hoofd bestand die alles samenvoegt. Deze structuur zorgt ervoor dat we kunnen werken aan kleine elementen binnen de webshop en deze daarmee gemakkelijk kunnen hergebruiken. Dit in combinatie met het BEM-principe zorgt voor een heldere en nette structuur.
Er is 1 bestand dat boven alle bestanden ligt, deze noemen wij ‘_main.less’ en voegt alle bestanden van de onderliggende benoemde folders samen.
Base
In de ‘Base’ folder staan de algemene bestanden. Deze bestanden zijn de basis voor de LESS structuur die gebruikt wordt. Denk hierbij aan een bestand waar LESS variabelen worden gedefinieerd en een bestand waar de fonts worden ingeladen.
Elements
De ‘elements’ map bevat alle CSS-bestanden voor kleine herbruikbare elementen binnen de webshop. Het doel van deze elementen is dat ze gemakkelijk kunnen worden toegepast in verschillende delen van de website, zonder dat er problemen ontstaan. Een belangrijke eigenschap van deze elementen is dat ze altijd 100% breedte moeten kunnen tonen, ongeacht waar ze worden gebruikt. Denk bij elementen aan bijvoorbeeld de zoekbalk in de header, een product kaartje of een nieuwsbrief inschrijfveld in de footer van de pagina.
Layout
De bestanden onder ‘layout’ leggen de basis voor de gehele website qua vormgeving. Denk hierbij aan een header, footer of een navigatie. Deze elementen komen overal terug op de webshop.
Pages
In de ‘pages’ folder staan bestanden die specifiek gebruikt worden om bepaalde pagina’s te stylen. Voor bijvoorbeeld een productpagina kan er styling worden toegevoegd om de breedte van een gedeelte van de pagina te bepalen.
Vendor
De ‘vendor’ folder is een folder waarin externe, toegevoegde modules worden beheerd qua styling.
Code standards ook voor Javascript!
Naast HTML en LESS/CSS standaarden zijn natuurlijk Javascript coding standards in Magento 2 ook heel belangrijk voor nette, overzichtelijke code. Om te begrijpen hoe wij dit doen, laat ik een voorbeeld zien hoe wij een knop-click script maken die een melding geeft en bijhoudt hoeveel keer er op de knop is geklikt.
Bovenin benoemen we de widget zoals deze in Magento 2 wordt geregistreerd. In de ‘options’ worden variabelen en selectors aangegeven. Variabelen zijn de waarden die aangepast kunnen worden of juist vast gegeven zijn. De selectors zijn HTML elementen die door Javascript worden gebruikt om een selectie van een element te bepalen. In de _init function splitsen we de functies netjes op, zodat het overzichtelijk blijft. Daarbij moeten de functienamen vanzelfsprekend zijn en een goed beeld geven van wat het doet.
define([
'jquery',
], function ($) {
'use strict';
$.widget('mage.buttonAlert', {
options: {
variables: {
message: "Dit is een button click!",
timesClicked: 0
},
selectors: {
button: '.js--button-alert',
counter: '.js--counter'
},
},
_init: function () {
this._bindObservers();
},
_bindObservers: function () {
var self = this;
$(document).on('click', self.options.selectors.button, function (e) {
self.options.variables.timesClicked++;
alert(self.options.variables.message);
$(self.options.selectors.counter).html(self.options.variables.timesClicked);
});
}
});
return $.mage.buttonAlert;
});Een nette code voor een mooie frond-end
Hopelijk heb ik je iets meer inzicht kunnen geven in hoe wij dit hanteren en hoe belangrijk het is. Wanneer je nu een nieuwe of bestaande klant bent bij HYPER, gebruikmaakt van Vitals of Kickstart. Bij iedereen gebruiken wij dezelfde Magento 2 coding standards, alles voor de beste resultaten op elk vlak!
Wil je lezen hoe wij deze standaarden toepassen voor klanten? Bekijk onze cases. Of neem contact op met Egbert, wij vertellen graag hoe wij jouw Magento 2 webshop bouwen.
