Het gebruik van Monorepos met Nx en Angular

tech

Deze week vertelt collega Chris Smits over de toepassing van monorepos in Angular gebruikmakend van de Nx tooling. Kijk op YouTube, luister op Spotify, of lees het onderstaande artikel.

Software engineer Chris Smits is al 10 jaar werkzaam als frontend developer en de laatste 5 jaar vooral bezig in Angular.. Onlangs gaf een hacknight over het onderwerp Monorepos. Chris legt uit wat een monorepo precies inhoudt. ‘Mono staat voor single dus je stopt al je code in één repository en dus ook al je applicaties worden daarin gestald. Dit in tegenstelling tot polyrepos waar elke applicatie zijn eigen repository heeft met alleen gedeelde repositories voor bijvoorbeeld bepaalde UI components. Voordelen van monorepos is dat het meteen al je code inzichtelijk maakt. Je haalt 1 repository binnen en hebt dan meteen toegang tot al je code. Zo kun je ook de kwaliteit ervan goed bewaken en is het makkelijk opzoekbaar.’

Ook grote bedrijven zoals bijvoorbeeld Google maken gebruik van monorepos zodat alles tegelijk kan meeliften, de code goed gecheckt wordt en het meteen beschikbaar is voor al hun projecten en applicaties. Bovendien is er sprake van een grote mate van schaalbaarheid. Chris: ‘Ik gebruik het graag specifiek voor de frontend kant omdat je ook kleine UI components wel met al je applicaties wilt delen. Al je verschillende UI componenten in 1 monorepo heeft ook als voordeel dat die gebruik maken van 1 library die volledig bij jou in beheer is. Ik gebruik monorepos bij mijn huidige opdrachtgever waar we meerdere kleine applicaties ontwikkelen.’

Hiervoor gebruikt Chris de Nx tooling, welke een opinionated approach hanteert voor je projectstructuur. Chris: ‘Bij frontend patronen die je inzet is er sprake van best practices. Je erft bij een project als het ware hun structuur en die is ook meteen al getest. Als je erin gewerkt hebt, hebben ze een analyze tool die ziet wat er veranderd is en wat er dus weer getest moet worden. Ook detecteert de tool contextuele veranderingen, voert die in alle libraries door en test ook meteen alle code. Nx heeft een project based dependency en een integrated dependency. Heb je een grote organisatie, dan is het handig meteen voor de integrated variant te kiezen zodat je al je projecten daarop kunt testen.’

Nx is specifiek voor Angular maar volgens Chris werkt het ook goed bij React en twee Full Stack frameworks waaronder Express. ‘Voor een alternatieve Nx tool kun je terecht bij Google die Bazel nu een open source heeft gemaakt. Het mooie daarvan is dat je je taken in een soort container online kunt draaien. Als je veel moet testen, hoef je daarvoor dus niets op je eigen pc te draaien. Als je monorepos wilt proberen begin dan met Nx op de officiële website. Op de webinterface is er een Dependency graph waarop je bijvoorbeeld kunt zien hoe alle verbanden lopen tussen je librairies en je applicaties. Als nieuwe developer kun je dat bekijken zonder dat je meteen in de code moet gaan snuffelen. De Affected graph maakt veranderingen inzichtelijk en geeft je controle over wat je wel of niet als constrained wil meegeven.’