author profile picture

Naam: Yuri Burger

Huidige functie: Managing Director Software Development

VX Company & Micro-frontends: werken met NX tijdens de kennisdag. 

Kennis ontwikkelen en kennis delen zit ons in het bloed. De developers bij ons in dienst hebben echt passie voor het vak. En dat merk je maar al te goed tijdens onze kennisdagen. We steken tijd en energie in deze dagen, zodat wij onze kennis rondom software development up-to-date houden. Met maandelijkse trainingen en kennisdagen delen we nieuwe technieken, verbreden onze kennis en leren op een ongedwongen manier alles over verschillende thema’s. Benieuwd naar wat zo’n interactieve kennisdag jou te brengen heeft? Lees de volledige blogpost.

P1013913
De development opdracht

Drie ‘celebrities’ lopen ieder tegen een bepaald probleem aan in de communicatie tussen de developer, de klant en VX Company. Enkel door hen te interviewen komen we achter hun echte pains. Saskia, Agile coach bij VX, interviewt hen en stelt vragen om erachter te komen wat de huidige situatie van het probleem is. Maar ook om de gewenste situatie te schetsen. De groep wordt vervolgens verdeeld in vier groepen. Iedere groep mag na het algemene interview nog één vraag stellen aan de celebrities. 

Inhoudelijk staat de development opdracht van deze blog in het teken van Value Proposition Design, Liberating Structures, Micro-Front-ends met NX, Kubernetes, en GitHub Actions. Je zou denken dat het handig is dat iedere micro-frontend zijn eigen repository heeft, maar niets is minder waar. Voor deze workshop is dit niet het uitgangspunt. We slaan op en verzamelen code’s voor verschillende projecten en onderdelen in een repository. Dit noemen we: een monorepo. Het betekent dat samenwerken en van elkaar leren centraal staat tijdens deze dag.

P1013820-3
Value Proposition Canvas x Software Development

Het Value Proposition Canvas, ontworpen door Alexander Osterwalder, is een klantenanalyse-tool waarbij de ontwikkeling van diensten en producten onder de loep gelegd wordt. Door op een systematische manier in kaart te brengen waar de klanten behoefte aan hebben en wat hun in de weg staat wordt het gemakkelijker om een aansluitend product- en dienstenaanbod te creëren. Je geeft met dit canvas de waardepropositie weer van de klant.

Het vraagstuk van de ‘celebrities’ is aan het begin van de dag nog onduidelijk. Maar na de interviewvragen is het al een stuk opgehelderd. Het canvas helpt de developers duidelijk overzicht krijgen van het probleem dat de celebrities hebben. Als eerst vul je de ‘customer profile’ kant in. Er komt dan een overzicht van positieve punten, pijnpunten, behoeftes en oplossingen in het model tevoorschijn. Met deze informatie kan de eerste hand gelegd worden aan een passende development oplossing. Die komen aan de ‘Value Map’ kant. Je beschrijft oplossingen voor de pijnpunten en de behoeftes. De behoeftes worden nu in mogelijke oplossingsgerichte producten of diensten gegoten.  

Omdat we belang zien van het ontwikkelen van waarde in onze development opdrachten staat deze opdracht in het teken van Value Proposition Design. Dit model leert je eerst nadenken over de oorzaak en het gevolg, voordat je je development brein echt aan het werk zet. Wat levert je dit op? Een veel beter inzicht in het probleem dat je probeert op te lossen en een effectievere weg naar de oplossing.

P1013988-1
Wat zijn Micro-Frontends?

In deze blog laten we je kennis maken met Micro-Frontends. Een van de onderwerpen dat meegenomen is in de afgelopen kennisdag. Dus wat zijn Micro-Frontends nou precies? 

Iedere nieuwe website begint klein. Meestal, naarmate tijd verstrijkt, komen er steeds meer functionaliteiten in een site. Een logisch gevolg is dat er meer code te onderhouden is, en dat betekent een grotere ontwikkelafdeling. Hoe meer ontwikkelaars samenwerken in één code-base, hoe ingewikkelder het wordt. Dan moet er afgestemd worden wie, wanneer, welke nieuwe functionaliteit uitrolt. Bovendien betekent meer code een langere build-tijd. Op een gegeven moment gaat dat niet meer.

En zo ontstaat al snel de wens zo’n project als het ware “uit elkaar te trekken”. Ieder team onderhoudt dan een bepaald gedeelte van de totaaloplossing. Van de verschillende functionaliteiten die de teams produceren kun je vervolgens een compositie maken. Dat wordt dan één website. De eindgebruiker merkt er dus niks van. Dat is simpel gezegd de essentie van een micro-front-end architectuur.

In de moderne front-end wereld van vandaag is dat helaas makkelijker gezegd dan gedaan. Al snel beland je in een welbefaamde versie-hel. Stel dat je Angular gebruikt als front-end framework, het ene team bouwt in Angular 13, en het andere team in Angular 14, dat gaat voor problemen zorgen als dat bij elkaar komt op dezelfde website. Je hebt dus iets nodig om te zorgen dat zulke situaties niet kunnen ontstaan. Dat, en nog veel meer, kun je tackelen door een monorepo te gebruiken. Zonder tooling is het beheer van een monorepo ingewikkeld. Daarom is het verstandig gebruik te maken van tooling. Google heeft zo’n tool ontwikkeld: Nx. Dit is een monorepo-beheer-tool.

Een greep uit de functionaliteiten van Nx:

  • Met Nx kun je de versies van dependencies van alle apps beheren,
  • Je kunt er complete React, Angular, web-components projecten mee genereren,
  • Je kunt de code genereren die je nodig hebt om runtime, in de browser apps in te laden,
  • Als nieuwe code gebouwd wordt, worden de laatste build-resultaten van ongewijzigde code opgehaald uit de Nx-Cloud. Dat zorgt ervoor dat je veel sneller kunt bouwen.

Door Nx te gebruiken kun je individueel deployable apps bouwen. Dat betekent dat ieder team zo, zonder andere teams tot last te zijn, nieuwe business-waarde naar productie kan brengen. 
 
Houd wel in gedachte: de Nx filosofie is dat je continu, de hele monorepo geautomatiseerd test. En dat soort gedachtegoed sluit naadloos aan op GitHub actions. Daarmee kunnen bij iedere pull-request de tests gedraaid worden, de app gebouwd worden, en de resultaten in een Docker container plaatsen. Die kun je vervolgens in Kubernetes draaien.

P1013931
Kennis up-to-date houden!

Het doel van onze kennisdagen is het delen van kennis met elkaar. We leren nieuwe platformen, technieken en begrippen kennen die een positieve invloed op ons werk hebben. Onze kennis blijft altijd up-to-date. In deze blog heb je al kennis gemaakt met Nx, een micro-front-end. Wil jij nog meer kennis opdoen over dit soort onderwerpen? Bij de volgende kennisdag kan jij aanwezig zijn. Schrijf je in voor de kennisdag op 20 januari 2023 via deze button en los met ons het volgende probleem op!

 

Schrijf mij in!

 

 

Toe aan een nieuwe uitdaging?

Bij VX Company krijgen we veel unieke en uitdagende aanvragen voor projecten, opdrachten en ander werk. Wij zijn daarom altijd op zoek zijn naar nieuwe getalenteerde en gedreven professionals die teams en organisaties vooruit willen helpen. Bekijk de vacatures en zie waar jij ons team kunt versterken:

Gerelateerde vacatures

Heb je een vraag?

Neem contact op met Conny van Dijk: +31 6 22 98 68 72

Neem contact op
VX Company Software Development 12-2