6 front-end ontwikkelingen in Drupal

Van 28 t/m 31 oktober vond DrupalCon Amsterdam 2019 plaats in de RAI. 1500 ontwikkelaars, project managers en gebruikers kwamen naar deze Drupal conferentie om te netwerken, kennis te delen en samen te werken aan Drupal. LimoenGroen was erbij en heeft veel waargenomen, bijgedragen en geleerd. Deze post van Marloes over front-end ontwikkelingen in Drupal is onderdeel van de blogpost serie over DrupalCon Amsterdam 2019.

SVG in Drupal

SVG’s (Scalable Vector Graphics), worden steeds populairder. Ze zijn goed schaalbaar, onafhankelijk van de resolutie. Dit betekent dat SVG’s altijd scherp zijn, in tegenstelling tot bitmap afbeeldingen. Bovendien is de browser support inmiddels erg goed.

SVG’s zijn opgebouwd met XML markup. Een groot voordeel van SVG’s is dat je ze styling mee kunt geven. Dit kan door middel van inline styles in de XML. Ook is het mogelijk om de SVG classes te geven, zodat je ze in CSS kunt manipuleren. Een ander voordeel van SVG’s is dat je ze kunt laten animeren en je kunt er tekst effecten aan toevoegen. Zulke animaties kun je met CSS toevoegen. Een andere manier is om in de SVG markup zelf specifieke SVG animatie elementen toe te voegen. Voorbeelden daarvan zijn: <animate> en <animateMotion>.

SVG’s hebben ook een nadeel. Ze bevatten (vaak) onnodig en ongewenste metadata, vooral na een export van een SVG uit editors (Sketch, Adobe Illustrator). Daarom is het belangrijk om de markup te bekijken en onnodige data te verwijderen.

Melinda Kovacs en Francisco Jose Seva Mora presenteerden de voors en tegens op DrupalCon Amsterdam 2019. 

Layout Builder Ecosystem

Met de Drupal Layout Builder kunnen redacties snel en gemakkelijk visuele layouts maken en beheren. Zowel templates als landing pages kunnen met drag-and-drop snel in elkaar worden gezet en worden aangepast. De open source ontwikkelgemeenschap heeft een reeks aanvullende modules gemaakt die de functionaliteit van Layout Builders fors uitbreiden. Dit zijn ze: 

• Layout Builder Asymmetric Translations: Vertalen van layouts

• Layout Builder Symmetric Translations: Vertalen van blokken in een layouts.

• Layout Builder Modal: Off-canvas dialog (Configuratie) in een modal

• Layout Builder Restriction en Block Blacklist: Beperkt het aantal layouts (bijv. per inhoudstype) en blokken waar een gebruiker uit kan kiezen.

• Layout Builder Styles: Hiermee kunnen gebruikers eenvoudig (voorgedefinieerde) CSS-classes aan een layout toevoegen.

• Layout Builder Library: Hiermee kunnen voorgedefinieerde sets van layouts worden samengesteld, een Library, waar de redactie uit kan kiezen.

• Menu Item Extras: In combinatie met Layout Builder kunnen layouts in Extra Menu’s worden toegepast.

• Mini layouts: Maakt geneste layouts mogelijk, vergelijkbaar met Mini Panels-module.

• Paragraphs Blocks: Individuele Paragraphs, die in de content gebruikt worden, kunnen hiermee in een layout worden geplaatst.

Dank aan de Layout builder ecosystem presentatie van Boyan Borisov op DrupalCon Amsterdam 2019. 

CSS Houdini

CSS Houdini is al enige tijd in ontwikkeling. Houdini maakt het mogelijk om custom CSS  properties en property values te schrijven die nog niet bestaan. Een zelfgeschreven property werkt, mits goed geschreven, in alle browsers. Dat maakt het ook bijzonder, omdat ontwikkelaars nu moeten wachten tot alle browsers een nieuwe officiële properties hebben geïmplementeerd. Met Houdini is dit niet meer het geval, omdat alle browsers hun API's openstellen en ontwikkelaars dus direct gebruik kunnen maken van de tools die een browser onder de motorkap heeft. Het is net zoiets als naar Ikea gaan en hen vertellen dat je een nieuw product wilt, samengesteld van materialen die ze al hebben en gemaakt wordt met hun eigen machines.

In theorie had hiermee display: flex; al gebruikt kunnen worden, lang voordat het een officiële property value werd. Houdini breidt CSS uit d.m.v. javascript. Het werkt beter dan polyfills, omdat Houdini op het juiste moment in het render process ingrijpt. Polyfills doen dit minder efficiënt.

Nog niet alle API’s zijn beschikbaar, maar met een aantal kan al getest worden: ishoudinireadyyet.com . Enkele voorbeelden van wat er mogelijk is zie je op css-houdini.rocks. Bekijk de track hierover op DrupalCon Amsterdam 2019: Houdini - New Era of CSS van Vidit Anjaria en Saket Kumar.

Progressive decoupling

Vue.js is een Javascript framework waarmee je interfaces en applicaties met een pagina kan bouwen. Een Brits bedrijf uit Manchester heeft Vue.js (uitspraak: “view”) gebruikt om een betere gebruikerservaring te realiseren bij het doorzoeken van alle varianten van opleidingen op een Briste universtiteit, door de site “progressively decoupled” op te zetten. In plaats van per variant een node te gebruiken is er slechts 1 node per opleiding en zijn alle varianten als paragraphs in die node opgenomen. Drupal rendert de node, waarbij in de Twig template vue attributen zijn opgenomen en variantdata via drupalSettings in de output wordt gezet zodat Vue clientside de dynamische onderdelen van de pagina toont of verbergt.

Men heeft ervoor gekozen om de data niet via een webservice aan Vue aan te bieden, maar via drupalSettings, omdat dat voorkomt dat er extra requests nodig zijn tijdens het bekijken van de pagina. De footprint van Vue.js in deze opzet is gelijk aan die van jQuery. Beiden kunnen prima naast elkaar bestaan en gebruikt worden.

Voordelen van Vue.js zijn:

• Het is een goed begin voor nieuwe ontwikkelaars en het is niet zwaar

• De documentatie is duidelijk

• Vue.js heeft een actieve community waar je altijd hulp kan vragen

• Presteert hoog door de tweerichtings gegevensbinding en virtuele DOM, net zoals in Angular en React

De learning curve van Vue.js is lager dan bij andere frameworks en kan vrij gemakkelijk worden toegevoegd aan een bestaande site. Voor het build proces is het ook niet meer nodig om: npm, Grunt, Gulp, Webpack, Parcel etc. te doen. Een script-tag is genoeg om de builden in Vue.

Meer learnings en tips vind je in de opname Progressive decoupling in action: using Vue.js to add rich application-like functionality van Phil Wolstenholme in de DrupalCon Amsterdam 2019 playlist.

Front-end beveiliging

Beveiliging in de front-end bestaat, ondanks dat men dat niet denkt. Enkele manieren waarbij misbruik kan worden gemaakt in de front-end zijn SQL injecties en cross-site scripting. SQL Injecties kunnen op verschillende manieren worden gedaan zoals de input veranderen of iets in de database veranderen. Via cross-site scripting kan iemand inloggen met jouw naam en je wachtwoord veranderen.

Vijf tips om de veiligheid in front-end te vergroten:

1. Profielfoto’s moet private zijn

2. Filter de inputvelden

3. Gebruik Drupal modules voor het beheren van wachtwoorden

4. Gebruik Drupal’s Form API om formulieren te maken

5. Blokkeer cross-site functies

Meer tips zie je in de presentatie van Madalina Cotumbeanu Frontend Security is a Thing in de playlist van DrupalCon Amsterdam 2019. 

Themes en templates in Drupal 9

In Drupal 8 werden de Twig templates geïntroduceerd om de Drupal front-end op te bouwen. Dit veranderde de theme laag van Drupal compleet. Een groot voordeel ervan is dat het als front-end ontwikkelaar veel eenvoudiger is om de HTML output te beïnvloeden. Desondanks blijft de theme-laag lastig in gebruik, zeker voor nieuwkomers. 

Wat het zo lastig maakt, is de 'inheritance' van verschillende thema’s die op elkaar bouwen. Bartik bijvoorbeeld, het default thema van Drupal, gebruikt Classy als basis thema. Classy is weer afhankelijk van het Stable thema. Dit maakt het Bartik thema al drie lagen diep en staan alle bijbehorende bestanden dus in drie verschillende thema’s. Deze diepe gelaagdheid heeft ook als consequentie dat als Twig templates/CSS/JS niet op de juiste manier zijn overschreven in de hoogste laag van het actieve thema, het gemakkelijk is om de front-end ongewenst te beïnvloeden bij een update in één van de onderliggende lagen. Bijvoorbeeld: het field Twig template is overschreven in de hoogste laag, maar de bijbehorende CSS niet. Er vindt een CSS update plaats in een andere (lagere) laag, die door wijzigingen in het overschreven field template in de hoogste laag niet meer goed wordt toegepast. Hierdoor is er een groot risico dat de styling kapot gaat.

Om dit te voorkomen kun je gebruik maken van een starterkit in plaats van een basisthema om de afhankelijke gelaagdheid te verminderen. Dit maakt het mogelijk om Classy te verbeteren, zonder dat het invloed heeft op het actieve thema.

De hele track Next steps on modernizing the Drupal theme system (Drupal 9 and beyond) van Lauri Eskola is een aanrader wat ons betreft. 

Dirk, Martijn, Marloes, Joyce, Erik, Irfaan en Martijn schreven deze blogpost over front-end ontwikkelingen in Drupal 8 en 9. Wil je meer weten over hoe wij omgaan met decoupled en andere front-end ontwikkelingen en hoe dit kan bijdragen aan het behalen van business doelstellingen? Stuur ons een berichtje of kom eens langs. We praten je graag bij. 

Foto Illek Petr (CC BY-SA 2.0)