-
Notifications
You must be signed in to change notification settings - Fork 3
👷 Build Tools
Once up on a time... In een ver, donker verleden. Was er een heldhaftige library die het web domineerde. Herkenbaar aan haar simpele, maar doeltreffende $("#myId") selector. jQuery inderdaad. *DJ Rewind Scratch Sound*. Of toch niet zo'n ver verleden. Want jQuery wordt nog steeds door ~80% van de 10 miljoen populairste websites gebruikt. Een shockerend aantal in het licht van het huidige front-end klimaat. Waar Build Tools, door de opkomst van Node, een enorme rol spelen. Hoe je eerst, zoals bij jQuery, simpel een javascript bestandje inlaadde: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> is een project met honderden packages van NPM die gebundeld worden door een Bundler als Webpack de normaalste zaak van de wereld. En om de nieuwste Javascript functies te gebruiken, efficiënter CSS te schrijven en dynamisch HTML te bouwen zijn PreProcessors als Babel, Sass en Pug vaste gasten in het arsenaal van de moderne front-ender.
In dit artikel ga ik die zogenoemde "Build tools" onderzoeken. In m'n onderzoek naar Templating Engines stuitte ik op een voor mij onbekende bundler: Vite. Die zou ik graag verder willen onderzoeken. Maar eerst:
Om die vraag goed te kunnen beantwoorden moeten we toch wel even naar de Webpack website aangezien dat een echte bundler is. En het plaatje op die website zegt eigenlijk al genoeg: Een bundler pakt al jouw Javascript en verpakt dat in een compact bestandje dat je zo kunt sturen naar je gebruikers. Maar ook kan het bijvoorbeeld jouw Sass naar gewone CSS compilen, minified het je gebruikte plaatjes, verwijderd het ongebruikte code en zelfs je templating engine als Pug of Handlebars. Dus: Het bundelt al jouw code.
En die Sass of Pug, dat zijn weer PreProcessors.
PreProcessors zijn dan weer een stap voor die Bundler. "Pre" betekent Voor en Processor staat voor Verwerken. Het doet iets met je code voordat het andere code wordt.
BabelJS bijvoorbeeld is een populaire PreProcessor gebruikt om de allernieuwste javascript te schrijven. Je kunt in je project gewoon Javascript schrijven zoals je dat altijd doet. En Babel verwerkt die Javascript vervolgens om het compatibel te maken voor alle browsers. Arrow functions, const squarerootOf() = (num) => num * num;, zijn bijvoorbeeld niet ondersteunt in hele oude browsers. Maar Babel zorgt ervoor dat je die wel kunt schrijven. En vervolgens maakt Babel ervan: function squarerootOf(num) { return num * num }. Super handig voor jou als top of the game frontender.
Sass is ook zo'n PreProcessor die jou een ander soort CSS laat schrijven. Variabelen, herbruikbare stukjes CSS en CSS modules. En vervolgens compiled Sass dit weer naar gewone CSS.
En dan nog die Templating Engine, eigenlijk zijn dat ook PreProcessors. Ze zitten voor de HTML en worden uiteindelijk gewoon HTML.
Maar om elke keer al die build tools handmatig uit te voeren wordt vervelend. En die PreProcessors kunnen ook niet alles zelf. Daarvoor is dus weer zo'n Bundler of Task Manager geschikt. En dat maakt het arsenaal van de Front-end developer compleet.
Na lang uitproberen ben ik tot de conclusie gekomen dat ik geen Bundler of extra preprocessors nodig heb in m'n project. Dit is wat ik tot nu toe gebruik:
- Node door middel van de scripts in package.json
- Een templating engine genaamd Mustache
- Far stretched maar Nodemon beschouw ik ook als tool.
- Prettier en ESLint
Wellicht dat ik later wel een bundler nodig ga hebben. Bijvoorbeeld bij het verbinden met een Database.