Front-end developers: van ‘codeklopper’ naar spin in het development-web

Vroeger kreeg de ‘front-ender’ een Photoshop-bestand (psd) aangeleverd met de vraag deze te vertalen naar een html- en css-template. Maar die tijd is voorbij. Met de komst van responsive webdesign en nieuwe front-end-technieken (waaronder animaties) neemt de invloed van de front-ender steeds verder toe. En worden er dus hele andere eisen gesteld aan de rol van de front-end developer. Simpelweg code tikken is niet meer voldoende: je moet kunnen samenwerken, code altijd zo modulair mogelijk opzetten en altijd overdraagbaar maken met goede documentatie.

Wat is de toekomst van web development en css in het bijzonder? Midden november werd de allereerste dotCSS conferentie georganiseerd in Parijs en ik was er bij. Op deze conferentie wordt door de meest vooraanstaande sprekers uit de wereld van front-end gesproken over de toekomst van web development. Uit de bijdrages van onder meer Bert Bos, Daniel Glazman, Nicolas Gallagher & Harry Roberts werd één centraal thema duidelijk: de functie van de front-end developer transformeert van ‘codeklopper’ naar een ‘spin in het web’ binnen development-teams.

10 principes voor front-end developers

De minst technische maar misschien wel meest interessante presentatie op dotCSS is ‘Ten principles of effective Front End development‘ door Harry Roberts, auteur van de cssguidelin.es. en Inuit.css, een object georiënteerd ccs framework. De principes waar een front-end developer zich aan moet houden zijn volgens Roberts als volgt:

1. De makkelijke optie is meestal de beste. Overcompliceer je code dus niet. Dit zorgt voor eter onderhoud en maakt de code overdraagbaar en daarop aansluitend.
2. Limiteer het aantal complexe onderdelen zoals het aantal variabelen binnen een project. Hoe meer onderdelen hoe groter de kans op problemen.
3. Begrijp de kosten en waarde van het werk. De code is niet belangrijk, het werk dat je oplevert wel. Een front-ender die precies begrijpt welke rol iedereen binnen een project heeft is waardevoller dan iemand die alleen kan code kloppen.
4. Wees zorgzaam om de belangrijke aspecten, blijf objectief en probeer altijd naar het grotere geheel kijken. Een goede front-end developer weet de balans te vinden tussen wat het project en wat hij zelf nodig heeft.
5. Pragmatisme troeft perfectionisme af. Het is beter nu iets op te leveren dat goed werkt dan te wachten op iets dat perfect werkt.
6. Denk op productniveau. Wederom, maak de juiste keuzes voor het product in plaats voor jezelf en wees betrokken bij andermans problemen om zo het product beter te maken.
7. Maak systemen op basis van normale scenario’s, bouw niet op basis van uitzonderingsgevallen.
8. Maak geen keuzes op basis van anekdotes. Deze zijn niet representatief, ga uit van data in plaats van verhalen.
9. Bouw niets wat je niet gevraagd wordt. Je creëert extra werk en extra werk kost geld. Plus, je moet nu iets onderhouden waar helemaal niet om gevraagd is.
10. Ga uit van veranderingen. In de huidige ontwikkelmethodes van software moet er ruimte zijn voor verandering. Stel je dus aanpasbaar en flexibel op, want niets staat vast.

Spin in het web

Een front-end developer die zijn code simpel en compact houdt, weet wat zijn rol en die van anderen binnen het project zijn en wat het beste voor het product is. Verder kan hij zich aan de planning houden, ondanks eventuele veranderingen. Op deze manier is de front-end developer de spin in het web om de gebruiker, het team en het product samen te brengen tot het beste resultaat.

Verder dan schaalbare css

Dat de rol van de front-end developer drastisch verandert, wordt ook bevestigd door Nicolas Gallagher. Hij is bekend van onder meer Normalize.css, een stylesheet die ervoor zorgt dat browsers alle elementen gelijk renderen. Nicolas legt uit hoe Twitter veel web-apps op een modulaire manier bouwt, zodat deze modules te gebruiken zijn in verschillende projecten door zowel de designers als de developers.

En juist door deze modules, of webcomponenten, zo slim mogelijk op te zetten, krijgen de designer en developer de vrijheid om alleen over de input en output na te denken. Ze zijn dan niet zo met de technische achtergrond bezig. Hier zie je dat er goed nagedacht is over de waarde van het werk, het product en zo min mogelijke complexiteit. Dit gecombineerd met een stricte hierarchie in projectbestanden, zorgt ervoor dat alle neuzen dezelfde kant op staan.

Met Sass brug tussen design & development slaan

Bij The Guardian wordt Sass gebruikt om de communicatie tussen designers en developers te verbeteren. Sass is een krachtige uitbreiding op css waarmee je variabelen, geneste regels en mixins kun hergebruiken. Dit houdt je CSS goed georganiseerd en beheersbaar. Kaelig Deloumeau-Prigent (lead front-end developer voor de responsive site van The Guardian) besteedt in zijn presentatie veel aandacht aan het belang van een nauwe samenwerking tussen designers en developers.

‘Zakelijk grijs’ of #767676

Voordat het ontwikkeltraject begint zijn er door de designers & developers front-end stijlgidsen opgesteld waar de variabelen, die beide disciplines nodig hebben, zijn uitgewerkt. Met deze gidsen kan een designer het over ‘zakelijk grijs’ ($neutral-2) hebben en is er weinig ruimte voor interpretatie door de developer (#767676).

Dit is ook toe te passen op de breekpunten van een responsive design. In plaats van het te hebben over breedtematen als pixels of em, kan de designer aangeven dat de achtergrondkleur op $tablet en $mobiel hetzelfde ‘zakelijk grijs’ moet zijn. Ook het ontwerpen op een css grid helpt enorm om verschillen in interpretatie weg te nemen. Een designer geeft aan dat het menu drie kolommen breed moet zijn, behalve op $desktop waar het menu uit zeven kolommen bestaat. In plaats van harde pixelwaarden uit te rekenen, kan het grid in de Sass-variabelen meegenomen worden, zodat ze netjes voor je worden uitgerekend.

Sass zorgt er dus voor dat de code zich makkelijker aanpast aan de designer, in plaats van dat de designer de code moet leren om te begrijpen wat de mogelijkheden zijn.

Koester de nieuwe generatie front-enders

Je kunt jezelf snel verliezen in css en de huidige ontwikkelingen, waaronder Sass. Daarom zijn de inzichten van bedrijven als Twitter en The Guardian over hoe zij hun code beheersbaar houden zo interessant. Ook Hugo Giraudel benadrukt hoe belangrijk het is om je code eenvoudig en leesbaar te houden, maar ook het belang van het documenteren van je code, wat op de lange termijn voor minder complicaties zorgt.

Kortom: front-end developers hebben enorme invloed op de samenwerking en eindkwaliteit van creatieve teams. Koester de nieuwe generatie front-end developers dus, want zij brengen het product, de gebruiker en het team samen!

Illustratie intro met dank aan Fotolia.