Mijn front-end setup

Mijn huidige front-end setup is simpel, doch doeltreffend. Het is een samenraapsel van zelf uitgewerkte onderdelen en (open-source) code van anderen, waarbij Webpack zorgt voor een supersnelle afhandeling van rauwe code naar mooi gepolijste, minified code dat klaar is voor productie.

De basis

De basis van mijn front-end setup, en die van veel andere front-enders, is uiteraard HTML5 en CSS3. Deze is vaak nét te nieuw om geen problemen te hebben met de echt oudere browsers, maar prima voor het grote meerendeel. Zo ben ik enorme voorstander van Flexbox (en uiteindelijk CSS Grid-Layouts) – in combinatie met browser prefixes en zo min mogelijk polyfills – en gebruik ik graag CSS animaties. De bestanden zijn gestructureerd volgens de ITCSS methode, en dus in de volgende mappen:

  • Settings – variabelen, etc.
  • Tools – mixins, functies, etc.
  • Generic – resets, etc.
  • Elements – standaard HTML elementen met per file een element-type, dus bijv. lists.scss, tables.scss, etc.
  • Objects – het grid, media, etc.
  • Components – samenvoegingen van (custom) elementen, bijv. headers, footers, contentblocks, etc.
  • Trumps – handige utilities, zoals classes voor alignment en floats

Hierbij schrijf ik alles in SCSS, wat erg lekker werkt door de aanwezigheid van CSS-variabelen, de extra gestructureerdheid en de herbruikbaarheid van code in bijvoorbeeld Mixins. Uiteindelijk worden alle SCSS bestanden samengevoegd in één main.scss bestand, dat puur en alleen bestaat uit @import statements, die vervolgens weer gecompileerd wordt naar één hoofd CSS bestand. Dit is dan het bestand dat uiteindelijk in de <head> van een site gaat staan.

Het grid

Ik geloof hierbij in de kracht van collectieve intelligentie, en in het niet opnieuw uitvinden van het wiel. Als het al gedaan is, op een manier waar je je perfect in kan vinden, waarom zou je dan moeilijk doen? Precies! Voor mij is dat het Bootstrap-grid, in dit geval het grid van Bootstrap 4. In de loop der jaren heb ik veel voor- en tegenstanders ontmoet, met allemaal prima redenen om het wel of niet te gebruiken, maar ík gebruik het. Met liefde. Misschien qua semantiek niet het mooiste, en qua uitdaging niet het meest uitdagende, maar perfect om snel mooie dingen mee te kunnen maken.

Javascript

Voor alle javascript-toepassingen gebruik ik jQuery. Dit omdat ik te weinig goede kaas heb gegeten van Vanilla JS, en omdat jQuery DOM-manipulatie gewoon erg makkelijk maakt. Kort maar krachtig. Qua mappen-structuur gebruik ik één hoofd JS-bestand, en een aparte vendor-folder voor alle extra libraries.

De build-tool

Webpack is een tool die voor elke front-ender het leven een stuk simpeler kan maken. In mijn standaard setup doet Webpack het volgende:

  • SCSS/SASS compilen en minify-en in 1 CSS-bestand
  • JS/ES6 compilen en minify-en in 1 JS-bestand
  • Hot Reloading, zodat ik niet steeds na elke change m’n browser moet verversen
  • Code-linter, die in de gaten houdt of ik fouten heb in m’n CSS en JS

Uiteindelijk is er veel meer mee mogelijk, zoals bijvoorbeeld het automatisch optimaliseren van afbeeldingen en het samenvoegen van SVG’s in een SVG-sprite, maar dat is voor latere zorg. Deze setup zorgt ervoor dat de basis automatisch en efficient geregeld wordt en alles op de juiste plekken terecht komt, terwijl er maar één watcher in Terminal aan staat. Deze watcher blijft luisteren, en pas als er een verandering is geweest begint hij te draaien. Er zijn veel voorbeelden waarin Task Runners als Grunt en Gulp worden samengevoegd met Webpack, maar Webpack kan alles zelf en ik houd het graag zo clean mogelijk. Het enige counter-intuïtieve aan de tool is dat het hoofd CSS bestand (main.scss in dit geval) ge-include moet worden in de main.js. Het gave is dan wel weer dat je de variabelen uit je SCSS bestanden naadloos kunt gebruiken in je JS.