Wat is boilerplate code?

Extra info

Deze pagina bevat nuttige achtergrond informatie. Je gaat dit in je vak tegenkomen en dit lezen, leren en begrijpen maakt je beter in je vak.
Je hoeft dit niet te kennen voor de toets.

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- of assets-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 of yarn start voor het opstarten van de ontwikkelomgeving.
  • npm test of yarn 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 zoals node_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 en views.py-structuur.

Navigatie

« Less & Sass