Nieuwe frontend technieken in Magento 2, wat zijn de voordelen?

In deze zesde blogpost over Magento 2 gaan we in op de nieuwste frontend-technieken in Magento 2 en leggen we uit wat de voordelen van deze technieken zijn.

Frontend?

Met frontend wordt de “voorkant” van je webshop bedoeld: datgene wat zichtbaar is voor de bezoeker. Denk bijvoorbeeld aan het webdesign, afbeeldingen, lettertypen etc. maar ook de toegankelijkheid (denk aan de toegankelijkheid van je webshop op verschillende webbrowsers en/of devices) en de gebruiksvriendelijkheid van je webshop. Met behulp van webtechnieken zoals HTML, CSS en Javascript wordt de frontend gerealiseerd.

In de voorgaande blogartikelen hebben we al een aantal verbeteringen in de frontend besproken, zoals het vernieuwde en gebruiksvriendelijke beheerpaneel, het responsive design van Magento 2 en de zoekmachine optimalisaties. Daarnaast hebben we gekeken naar de technische verbeteringen en hoe het migreren van Magento 1 naar Magento 2 in zijn werk gaat.

Nieuwe frontend technieken in Magento 2

Developers Pim en Ezra behandelen in dit blogartikel verschillende frontend-technieken én wat je er als ontwikkelaar en webwinkeleigenaar aan hebt:

• Browser ondersteuning
• jQuery / HTML5 / CSS3
• RequireJS
• LESS
• UI Library
• Grunt
• Knockout JS
• frontend-development

Browser ondersteuning

Magento 2 ondersteunt de internet browser Internet Explorer 9+ en de laatste versies van Firefox, Chrome, Safari 5 en iOS6 Safari. Dat betekent dus dat Internet Explorer 7 en 8 niet meer ondersteund worden. Hierdoor heeft een frontend-ontwikkelaar meer mogelijkheden die hij kan toepassen in de code omdat hij geen rekening meer hoeft te houden met verouderde browserversies. Een volledige lijst met de ondersteunde browsers kun je hier vinden.

jQuery / HTML5 / CSS3

Een grote verbetering aan Magento 2 is dat ze de javascript bibliotheek Prototype weg hebben gelaten en volledig over zijn gestapt op jQuery. In Magento 1 leverde Prototype problemen op zodra je jQuery wilde inladen. Doordat Magento 2 volledig op jQuery draait, zijn deze problemen nu weggenomen. jQuery is een javascript bibliotheek voor het vereenvoudigen van complexe frontend functionaliteiten zoals het toevoegen van interactie op je webshop. Voor ontwikkelaars zijn functionaliteiten die gemaakt zijn in jQuery makkelijker te onderhouden en te testen.

HTML5, de opvolger van HTML4 is de nieuwste standaard versie van HTML. Met de komst van HTML5 is het mogelijk om interactieve websites te maken zonder afhankelijk te zijn van andere technologiën zoals Flash, Silverlight etc. Daarnaast biedt HTML5 veel nieuwe technieken, zoals CSS3 waardoor het bijvoorbeeld mogelijk is om je webshop responsive te maken. Het gebruik van CSS3 is positief voor de laadtijd van de pagina en ondersteunt veel visuele functionaliteiten zoals animaties, schaduwen, effecten etc. Veel functionaliteiten waarvoor een ontwikkelaar vroeger bijna noodgedwongen zijn toevlucht zocht bij commerciële plugins zoals Flash, kunnen nu zonder al te veel problemen voor elke browser geïmplementeerd worden.

RequireJS

Webshops worden steeds complexer. Daardoor wordt de complexiteit van de code ook steeds groter en wordt er meer javascript toegepast. Met RequireJS bepaal je welke javascript een pagina nodig heeft en dus ingeladen moet worden. Hierdoor ontstaan er minder conflicten, doordat niet alle javascript op de pagina wordt ingeladen. Zo heb je op de productpagina bijvoorbeeld een javascript om de productafbeeldingen in te zoomen. Deze is afhankelijk van jQuery. Met RequireJS kun je aangeven dat deze pagina jQuery nodig heeft, zodat developers zich daar geen zorgen over hoeven te maken. De javascript wordt op de achtergrond asynchroon ingeladen. Dit betekent dat de bezoeker het gevoel heeft dat de pagina al geladen; hij ervaart een snellere laadtijd. En dat komt de gebruikerservaring ten goede.

LESS

In Magento 2 is het schrijven van opmaak makkelijker en efficiënter. Er wordt gebruik gemaakt van de CSS pre-processor genaamd ‘LESS’. Dit is een techniek om variabelen en berekeningen te gebruiken die normaal gesproken alleen in programmeertalen beschikbaar zijn en deze te vertalen naar CSS. Het grote voordeel van LESS is dat je een pagina efficiënter kunt opmaken, met minder code, en dat het makkelijker te onderhouden is.

less-csss

In de bovenstaande afbeelding zie je een voorbeeld. Het bovenste stukje code aan de linkerkant is LESS. Je kunt variabelen definiëren zodat je ze op meerdere plekken kunt gebruiken. Zo kun je bijvoorbeeld overal de kleuren al vastzetten. Mochten er kleuren veranderen, dan hoef je die maar op één plek te wijzigen. Bovenstaand hebben we de variabel “@green” gedefiniëerd. Deze hebben wij toegepast op de heading h1. Aan de rechterkant is hoe de code eruit komt te zien zodra de LESS is gecompileerd (samengevoegd) naar CSS.

Magento 2 UI Library

Magento 2 biedt een complete UI (user interface) library aan, ontwikkeld met LESS. De UI library is een set met standaard componenten die gebruikt kunnen worden voor de opmaak van de webshop. Dit zorgt voor consistentie in de code. Bij standaard user interface componenten kun je denken aan knoppen, kolommen en bijvoorbeeld formulier elementen. Een volledig overzicht van deze componenten kun je vinden in de Magento UI library.

Grunt

Grunt is een javascript ‘task runner’ die zorgt voor het automatiseren van herhalende werkzaamheden. Handelingen die je handmatig meerdere keren moet uitvoeren, kun je in de configuratiebestanden van Grunt definiëren. Denk aan het opnieuw genereren en comprimeren van CSS en javascript bestanden: deze stappen worden met Grunt commando’s geautomatiseerd. Daarnaast is het mogelijk om met Grunt realtime je wijzigingen te tonen in een webbrowser tijdens het ontwikkelen. Zo kunnen ontwikkelaars programmeren en de wijzigingen tegelijk in hun browser zien zonder de pagina steeds te moeten refreshen (met behulp van de browser plugin Livereload). Oftewel, het werken met Grunt versimpelt het proces van een developer en bespaart een developer dus enorm veel tijd.

KnockoutJS

KnockoutJS is een javascript bibliotheek waarmee het makkelijker is om dynamische content uit een externe databron (in de meeste gevallen de database) op te halen en aan de voorkant van de webshop bij te werken. Dit is niets nieuws en wordt tegenwoordig op iedere moderne website gebruikt. KnockoutJS zorgt er alleen wel voor dat dit proces heel veel makkelijker wordt. De dynamische content van je webshop is bijvoorbeeld de content die bij je klanten hoort, zoals hun winkelwagentje, accountgegevens etc. Iedere klant ziet zijn eigen, unieke winkelwagen. Een goed voorbeeld waarbij KnockoutJS wordt gebruikt is de ‘top-cart’. Iedere keer als een product aan de winkelwagen wordt toegevoegd dan zal KnockoutJS productprijzen ophalen en bijwerken. Het stelt een ontwikkelaar in staat om de dynamische content asynchroon in te laden. Uiteraard gebeurt er op de achtergrond heel wat meer, maar dat is van zo’n technische aard dat we dit in dit artikel niet zullen behandelen.

KnockoutJS biedt ook voordelen ten opzichte van Full Page Caching. Full Page Caching is een caching-methode waarmee je de statische content van je webshop in je caching kan opslaan. De dynamische content wordt pas ingeladen nadat de volledige pagina geladen is, waardoor statische content volledig in de Full Page Caching kan. Zodra er veranderingen zijn in de gebruikersdata kan de content met behulp van KnockoutJS op de webshop automatisch mee veranderen zonder de pagina daadwerkelijk te verversen of opnieuw op te halen. De checkout pagina is bijvoorbeeld volledig ontwikkeld met KnockoutJS, omdat hier veel dynamische gebruikerscontent aanwezig is. KnockoutJS zorgt er dus voor dat het eenvoudiger wordt om dynamische content bij te werken middels javascript.

De voordelen van KnockoutJS op een rijtje:

• Een snellere paginalaadtijd;
• KnockoutJS maakt het eenvoudiger voor developers;
• Het is puur javascript, geen vervanging van jQuery en zal dus geen conflicten opleveren met andere bibliotheken of javascript functionaliteiten;
• De KnockoutJS bibliotheek is erg klein. Het heeft weinig ruimte nodig en werkt daardoor erg snel;
• KnockoutJS is open source en volledig gedocumenteerd.

Conclusie

Deze nieuwste frontend-technieken in Magento 2 bieden ondersteuning aan ontwikkelaars waardoor er efficiënter ontwikkeld kan worden. Daarnaast dragen veel van deze frontend-technieken bij aan de snelheid van jouw webshop. Dit zal uiteindelijk resulteren in een betere gebruikerservaring en daardoor een hogere conversie.

Hieronder nogmaals alle voordelen op een rijtje:

• Met de komst van HTML5, CSS3 en jQuery zijn er meer visuele functionaliteiten mogelijk;
• RequireJS versimpelt de complexiteit tussen de javascript afhankelijkheden en je bezoekers zullen een snellere laadtijd ervaren;
• LESS zorgt ervoor dat pagina’s efficienter opgemaakt worden en dat het makkelijker te onderhouden is met minder code;
• Het werken met Grunt versimpelt het proces van een developer en bespaart een developer dus veel tijd;
• KnockoutJS is een JavaScript library waarmee het eenvoudiger wordt om dynamische content bij te werken middels JavaScript.

Heb je vragen of opmerkingen over dit artikel of wil je weten wat wij voor jouw webshop kunnen betekenen op het gebied van frontend? Neem dan gerust contact met ons op.