Wat is boilerplate code?
Boilerplate code is code die je vaak herhaalt in verschillende projecten of bestanden. Het is de basisstructuur van code die je nodig hebt om een project of functie te laten werken, maar die op zichzelf meestal niet uniek of bijzonder is. Denk bijvoorbeeld aan de standaard HTML-code die altijd nodig is voor een webpagina (zoals de <html>, <head>, en <p> tags), of de basisconfiguratie voor een nieuw project in een programmeertaal.
Je gebruikt boilerplate code om sneller te beginnen met programmeren, zonder elke keer alles vanaf nul te moeten schrijven.
Waaruit bestaat boilerplate code meestal?
De meeste bedrijven hebben wel een of meerdere boilerplate projecten of templates waar programmeurs gebruik van moeten maken als ze een nieuw project starten.
1. Bestands- en mapstructuur
Een georganiseerde map- en bestandsstructuur maakt het project overzichtelijk. Vaak zie je:
- Een
src
-map voor de broncode. - Een
public
- ofassets
-map voor statische bestanden (zoals afbeeldingen, stylesheets). - Configuratiebestanden zoals
.env
voor omgevingsvariabelen. - Een
README.md
-bestand voor projectbeschrijvingen.
2. Configuratiebestanden
Deze bestanden bevatten instellingen voor tools die het project ondersteunen:
package.json
in Node.js-projecten voor afhankelijkheden en scripts.webpack.config.js
voor bundling (bijvoorbeeld Webpack).- Linter configuraties zoals
.eslintrc
of.prettierrc
voor codekwaliteit. - Testconfiguratie zoals
jest.config.js
voor testtools.
3. Basisafhankelijkheden (Dependencies)
Boilerplate code bevat vaak de noodzakelijke dependencies voor het project:
- Frameworks zoals React, Vue.js of Express.
- Build-tools zoals Webpack, Babel, of Parcel.
- Styling libraries zoals CSS frameworks (Bootstrap, Tailwind CSS).
- Testing frameworks zoals Jest of Mocha.
4. Startercode
Er is vaak wat basisfunctionaliteit aanwezig om snel van start te kunnen gaan:
- Een voorbeeldcomponent in frontend frameworks (bijvoorbeeld een simpele React-component).
- Een basisroute in backend frameworks zoals Express.
- Een kleine test om te laten zien hoe testen werkt in het project.
5. Documentatie
Vaak is er een README.md
die uitleg geeft over hoe je het project start, wat de vereisten zijn, en hoe je bijvoorbeeld test of build scripts uitvoert.
Soms vind je ook voorbeelden van gebruik.
6. Scripts
Typische scripts voor veelvoorkomende taken zoals:
npm start
ofyarn start
voor het opstarten van de ontwikkelomgeving.npm test
ofyarn test
voor het draaien van tests.npm build
voor het bundelen van de applicatie.
7. Version control bestanden
Bestanden zoals:
- Een
.gitignore
-bestand om bestanden zoalsnode_modules
of omgevingsconfiguraties uit versiebeheer te houden. - Vaak zijn er ook
.gitattributes
of andere Git gerelateerde instellingen aanwezig.
8. Omgevingsvariabelen
Een .env
-bestand of een verwijzing ernaar, waarin je bijvoorbeeld API-sleutels of andere configuratiegegevens plaatst die per omgeving (ontwikkeling, productie) kunnen variëren.
9. Build- en testconfiguratie
Afhankelijk van het project kun je ook configuratie vinden voor Continuous Integration (CI)-tools zoals GitHub Actions, Travis CI, of CircleCI om automatische builds en tests uit te voeren.
10. Framework-specifieke bestanden
Voor projecten met specifieke frameworks kan er ook boilerplate zijn:
- In React bijvoorbeeld vaak een basisapplicatie met componenten en een
index.js
. - In Django een basis
urls.py
enviews.py
-structuur.
Navigatie
- Cursus informatie
- Wat meer van less of les in sass
- Css genereren
- Voorbeeld in less
- Voorbeeld in sass
- Een paar vragen
- We gaan verder in sass
- Installatie
- Sass testen
- Hooggeëerd publiek...
- Sass code schrijven
- Een start maken
- Code organiseren
- Opdracht code schrijven
- Een stijlesheet in sass
- De watch flag
- Styles nesten
- Mixins
- Ide configureren
- Een paar vragen
- Eindopdracht
- Feedback