Dimiter Geelen

Developer @ OneShoe

Talk

  • Atomic Design

    Building maintainable Drupal themes using Atomic Design elements in a well-documented living style guide.

    Tijdens mijn werkzaamheden als developer ben ik regelmatig in aanraking gekomen met het ontwikkelen van Drupal thema’s. Naarmate er meer onderdelen in een thema zitten en er meer ontwikkelaars aan hebben gewerkt, kan het al snel erg chaotisch en onoverzichtelijk worden. Daarnaast kan het aanpassen van het ene component onbedoeld zorgen voor veranderingen in een ander component, met allerlei bugs tot gevolg.

    Mijn manier om dat tegen te gaan omvat een aantal verschillende onderdelen. Aan de ene kant zijn er natuurlijk best-practices en andere gewoonten die hierin kunnen helpen. In mijn sessie zal ik een aantal daarvan gaandeweg toelichten. Daarnaast is er een deel dat met behulp van tooling kan worden afgevangen, zoals het handhaven van een en dezelfde code-style of een duidelijke en overzichtelijke mappen-structuur. Maar het belangrijkste onderdeel van de sessie zal gaan over het indelen van een ontwerp in afzonderlijke componenten, en hoe die overzichtelijk kunnen worden gedocumenteerd in een living style guide volgens de principes van Atomic Design.

    In mijn sessie zal ik laten zien wat een living style guide precies is en hoe deze kan worden opgebouwd. Dat doe ik met behulp van KSS in een NodeJS setup. Ik zal uitleg geven over hoe deze tool werkt en hoe de KSS syntax kan worden gebruikt om een style guide mee te genereren. Daarnaast laat ik zien hoe ik alle verschillende onderdelen van één component overzichtelijk in één map groepeer: Een SCSS-bestand voor de styling (volgens de BEM naamgeving die Drupal zelf ook hanteert) en voorzien van KSS commentaar t.b.v. de style guide, een Twig-bestand met de HTML-structuur van het component, een json-bestand met dummy-data voor het tonen in de style guide en indien nodig een javascript-bestand voor logica in dat component. Daarnaast bespreek ik ook hoe dit het beste kan worden gekoppeld aan de Twig-bestanden in de Templates map van het thema (waar Drupal zelf naar zal zoeken), door de Component Libraries module te installeren en configureren. De ambitie is om door middel van live coding het publiek zeer concreet te laten zien hoe elk besproken onderdeel in de praktijk kan worden toegepast. Het resultaat daarvan zal een Drupal-thema zijn met onderdelen die ook in de style guide beschikbaar zijn en zijn gedocumenteerd.

    Deze sessie kan erg leerzaam en interessant zijn voor een breed publiek (o.a. designers die ook een style guide gebruiken, maar bijvoorbeeld ook back-end developers die ‘noodgedwongen’ aan een thema moeten sleutelen). Hij zal echter met name gericht zijn op front-end ontwikkelaars die Drupal-thema’s bouwen en/of implementeren. Het niveau van deze sessie is niet te hoog, waardoor het voor iedereen toegankelijk is. De gebruikte technieken zijn in de basis bij de meeste (Drupal/front-end) ontwikkelaars immers in de basis wel bekend.

     

    14:00-15:00 in Loods 5 - Community Day