Front-end development omvat veel verschillende technologieën en de ontwikkelingen op dit gebied gaan razendsnel. Front-end development is in principe client-side software development. Omdat steeds meer software applicaties (exclusief) beschikbaar zijn in de browser is het een discipline die steeds meer groeit en stijgt in populariteit. In deze blog zal ik een introductie geven in de technieken en vaardigheden waar een front-end developer mee te maken heeft.
De basis van front-end development is webtechnologie, de werking van de browser, en de interactie tussen client en server. How Browsers Work: Behind the scenes of modern web browsers is een uitgebreid technisch artikel dat ingaat op de werking van moderne webbrowsers. Een front-end developer moet alles weten over het Document Object Model (DOM), het HTTP protocol, JSON, de netwerklaag en performance.
Naast deze kennis dient een front-end developer ook kennis te hebben van:
- HTML: de opmaaktaal waar webpagina’s in gespecificeerd worden. Versie 5 is de laatste standaard.
- CSS: een style-sheet taal om de opmaak van HTML documenten te definiëren. Versie 3 is de laatste standaard.
- Tools en Frameworks: JavaScript implementaties die veelal open-source beschikbaar zijn op GitHub en gebruikt kunnen worden door de front-end developer
Wat doet een front-end developer?
De front-end developer is degene die het ontwerp van een webdesigner, of UX specialist, implementeert in code. De scheiding tussen deze twee rollen begint echter te vervagen omdat een UX specialist die kennis heeft van code bijvoorbeeld beter kan inschatten wat er technisch mogelijk is. Omgekeerd geldt dit ook voor de front-end developer die bij de implementatie rekening dient te houden met Usability patterns en practices om zo gebruiksvriendelijke en onderhoudbare applicaties te realiseren. Een full stack developer zal ook steeds meer te maken krijgen met client-side technologie en zowel web applicaties als de middleware en enterprise(bus) systemen ontwikkelen.
.NET of Java zijn bekende programmeertalen, maar welke libraries gebruikt een front-end developer nu eigenlijk? Hieronder vind je een visueel overzicht:
HTML5, CSS3, AngularJS, Bootstrap, Express, NPM, NodeJS, Foundation, Backbone, Grunt, Sass, Less, Ember, Bower, Knockout, Yeoman, Meteor, React?! Wauw dat is nogal wat. Er zijn inderdaad heel wat libraries beschikbaar en veel hiervan doen zelfs hetzelfde. Laten we het iets overzichtelijker maken en een aantal populaire tools categoriseren:
CSS Frameworks: Bootstrap, Foundation
CSS Preprocessors: Sass, Less
Task Runners: Grunt, Gulp
Bundlers: Webpack, Browserify
Libraries: Underscore, Lodash, ReactJS, JQuery, Modernizr, KnockoutJS
Frameworks: AngularJS, EmberJS, BackboneJS
Test Frameworks / API’s: Mocha, Chai, Jasmine, Karma, PhantomJS, Protractor
Runtime: NodeJS
Full-stack platforms: Meteor
Wat doen deze type tools en libraries?
- CSS Frameworks: bieden een groot aantal CSS classes die je direct een basis bieden om een website of webapplicatie mee te stijlen. Ze bieden bijvoorbeeld een responsive grid om de kolommen te bepalen, verschillende soorten buttons, tabs, formulieren, elementen, typografie, etc. Grote en bekende frameworks zoals Bootstrap en Foundation bieden ook interactieve elementen met JavaScript.
- CSS Preprocessors: Sass en Less zijn stylesheet talen waarmee je meer kunt dan standaard CSS. Sass en Less bestanden maken het bijvoorbeeld mogelijk om variablen te gebruiken (handig voor o.a. kleurcodes) en functies, mixins genoemd. Sass en Less bestanden worden omgezet naar CSS zodat deze gerendered kunnen worden door de browser. Ze doen allebei hetzelfde dus de keuze tussen Sass en Less is puur gebaseerd op voorkeur.
- Task Runners: Grunt en Gulp zijn die de workflow van een front-end developer eenvoudiger maken door veel taken te automatiseren. Met taken worden dan over het algemeen NPM commando’s bedoeld, zoals het aanroepen van tools om JavaScript code te minifyen (witruimte weghalen, variabelenamen inkorten, etc.).
- Bundlers: Webpack en Browserify maken gebruik van het concept van NodeJS om JavaScript code te organiseren in (herbruikbare) modules. Bundlers worden gebruikt om, zoals de naam al doet vermoeden, de opgedeelde JavaScript code weer samen te voegen in een bestand dat geoptimaliseerd is voor publicatie van de applicatie.
- Libraries: Allerlei herbruikbare functionaliteiten zijn beschikbaar voor de front-end developer. De Node Package Manager (NPM) wordt gebruikt om deze te downloaden, installeren en te gebruiken.
- Test Frameworks: Dit zijn JavaScript libraries die het schrijven van tests in JavaScript makkelijker maken. Ze implementeren een API gericht op testen om bijvoorbeeld asserts en vergelijkingen uit te voeren. Ook zijn er test frameworks die goed samenwerken met andere frameworks, zoals Protractor voor AngularJS.
Server-side JavaScript
NodeJS is een server-side, cross-platform JavaScript runtime environment op basis van Google’s V8 JavaScript engine. In tegenstelling tot andere libraries maakte NodeJS het mogelijk om JavaScript modules te bouwen die server-side uitgevoerd worden. Ideaal dus voor het implementeren van middleware functionaliteiten en API’s en te gebruiken door front-end developers voor complexere, server-side functionaliteiten. NodeJS werkt event-driven en biedt asynchrone/non-blocking functionaliteiten.
Automatiseren met build tools
JavaScript is een geïnterpreteerde taal en hoeft dus niet gecompileerd te worden. Echter merk je als front-end developer dat het aantal commando’s dat je regelmatig uitvoert snel op kan lopen, mede omdat er ontzettend veel kleine JavaScript libraries beschikbaar zijn.
Als je in C of C++ hebt geprogrammeerd op Unix/Linux ken je misschien wel de Makefile, die het met een enkel commando makkelijk maakt om meerdere files te compileren en linken. Voor JavaScript development zijn hier soortgelijke tools voor beschikbaar. De meest populaire zijn Grunt en Gulp. De keuze tussen die twee tools is puur persoonlijk omdat je er hetzelfde mee kunt bereiken. Wel dien je te weten dat Gulp ontwikkeld is omdat developers de configuratie syntax van Grunt onoverzichtelijk vonden.
Met Grunt en Gulp kun je dit soort taken automatiseren:
- Het samenvoegen van script files (bundling / concatenation)
- Uitvoeren van jslint / statische code analyse
- Minification (automatisch weghalen van witruimte en variabele namen inkorten)
- Het starten van een lokale webserver
- Het starten van test runners met bepaalde test specificaties
Etc.
Voor elke losse (NodeJS) commandline taak is wel een Grunt en Gulp extensie te vinden. Hoewel deze tools het makkelijk maken om taken uit te voeren is het wel een extra abstractielaag. Er zijn daarom front-end developers die ze liever niet gebruiken en vervangen met de “scripts” functionaliteit van NPM.
Vervolg
In het tweede deel van deze serie zal ik ingaan op nieuwe ontwikkelingen, zoals ES6 (de nieuwe javascript versie), Angular 2, en ReactJS + Flux.
Heb jij nog geen ervaring met front-end development maar lijkt je dit interessant om naar door te groeien? Of ben je een full stack developer op zoek naar uitdagende projecten waarbij je werkt met een moderne technologie stack? Bij Cavero krijg je de mogelijkheid om je te ontwikkelen op afwisselende opdrachten. Neem contact op voor meer informatie of een kennismaking.
