DrupalCon 2015 Barcelona: Fundamentals of Front-End Ops

Thomas DB
Drupalcon
front-end
Bower
Yeoman
Gulp
tools
workflow

Tijdens DrupalCon Barcelona in september volgde ik een hele interessante sessie van Preston So, Development Manager van Acquia Labs. Preston So had het onder andere over hoe het tegenwoordig belangrijk is om een goede front-end workflow te hebben en hoe je tijd kan besparen door het gebruiken van de juiste tools. In deze post wil ik graag uitweiden over de tools die we bij Dropsolid gebruiken voor een vlotte front-end workflow.

Een goede front-end workflow is belangrijk om werk dat zich vaak herhaalt, te kunnen automatiseren. Hierdoor creëer je meer tijd en vermijd je makkelijker fouten. Om een vlotte front-end workflow te hebben, gebruiken we bij Dropsolid Bower, Yeoman en Gulp. Deze tools zal ik later uitgebreider bespreken.
Voor ik het over onze favoriete tools kan hebben, moeten we eerst een kijkje nemen naar het framework:


NodeJS

Node.js en Npm

Node.js en npm hebben we nodig om onze favoriete tools te kunnen gebruiken. Deze kan je makkelijk installeren via https://nodejs.org. Eens deze zijn geïnstalleerd, kan je de rest van de tools installeren met een eenvoudige command.
Node.js een softare platform waarop men applicaties kan ontwikkelen en draaien. Npm is een package manager en zal de nodige packages controleren en bijhouden in een package.json file. Hierdoor kunnen andere developers met een eenvoudige "npm install" de nodige dependencies ophalen.

 

 

Bower

Bower

Bower is een package manager voor front-end. Dit is een tool waarmee je je libraries, frameworks en andere kan beheren. Hiermee kan je bijvoorbeeld jQuery of SASS libraries laten managen waardoor je er niet zelf naar moet zoeken en downloaden. Bower geeft je dus een groot voordeel: sneller aan het werk met minder kans op fouten! En daarnaast zijn het ook steeds de juiste versies. Bower geeft hiervoor een bower.json file waarin de packages en hun versienummers zitten. Meer info over Bower vind je hier.

 

Gulp

Gulp

Bij Dropslid kiezen we voor Gulp. We hadden ook voor Grunt kunnen kiezen, de verschillen tussen beide maken niet echt uit voor de front-end developer en het is eerder persoonlijke voorkeur die bepaalt welk je gebruikt. Ook qua snelheid zijn deze tegenwoordig bijna even snel, als je voor de juiste plug-ins kiest. Gulp is een task automator, hiermee kan je tasks schrijven waardoor je je code gemakkelijk in een production state kan krijgen. Bijvoorbeeld je SASS compilen naar 1 gecomprimeerde CSS file of je Javascript files naar een onleesbare gecomprimeerde javascript file. Plug-ins voor gulp zijn hier te vinden.

Dit is momenteel de workflow die we gebruiken bij Dropsolid en dit is ook meer dan voldoende, maar we kunnen nog meer doen. Deze tools onderhouden we zelf en plaatsen we ook zelf in onze Drupal theme, maar er bestaat ook een tool die ons daarbij kan helpen.

 

Yeoman

Yeoman

Yeoman is een scaffolding tool. Maar wat houdt scaffolding precies in? Scaffolding is -gemakkelijk gezegd- je applicatie klaarzetten, de nodige files en folders klaarzetten voor je nieuwe project. We doen dit met een scaffolding tool omdat dit ervoor zorgt dat het niet enkel sneller gaat, maar ook omdat we geen fouten zouden maken, en dus mogelijk meer tijd besparen.
Voor Drupal betekent dit in het kort je theme klaarzetten met de nodige files voor de front-end workflow.
Yeoman raadt een workflow aan waarin Bower en Gulp (of Grunt) gebruikt worden. Je kan je eigen generators schrijven, of bestaande generators gebruiken. Een voorbeeld voor een drupal theme vind je hier: https://www.npmjs.com/package/generator-drupal-theme

Regression en testing

Tijdens de presentatie werden ook regression en testing aangehaald. CSS is meer gevoelig voor fouten dan andere talen, daarom kan het handig zijn om ook hierop tests te hebben. Wraith kan hierbij helpen (github.com/BBC-News/wraith). Wraith is hiervoor niet de enige tool, maar geeft een goed voorbeeld van hoe deze tests werken. Wraith maakt bijvoorbeeld screenshots en laat zien dat er visuele veranderingen zijn gebeurd. Dit kan goed van pas komen als er bijvoorbeeld kleine veranderingen gebeurd zijn die niet de bedoeling waren, maar toch kunnen voorkomen zonder dat je het onmiddellijk merkt.

Hier zijn nog andere tools die je hiervoor kan gebruiken :
Huxley -> github.com/facebookarchive/huxley
PhantomCSS -> github.com/Huddle/PhantomCSS

Ghostlab

Een andere coole testing tool om op verschillende devices te testen is Ghostlab (vanamco.com/ghostlab). Ghostlab zorgt ervoor dat je elke website op verschillende browsers en mobile devices tegelijk kan testen. Youtube: https://youtu.be/TGx4pKdRRgY.

Ghostlab

Thomas De Beuckelaer
Drupal Developer

Populaire blogposts
Drupal Mythes
Wat betekent Drupal 8 voor uw business?
Schrijven voor het web met de juiste keywords, gebruik Google Keyword Planner
Fairtrade Belgium bouwt eigen subsites
Is branding enkel het logo van mijn bedrijf?