Insights

Nx workspace is een tool om monorepos te builden van elke grootte voor frameworks zoals Angular, React als backend technologieën zoals Next en Express. De belangrijkste doelen van NX zijn het versnellen van de workflow met minimale inspanning en een goede developer experience creeëren. Om deze doelen goed te illustreren kijken we dus best ook even wat de voordelen zijn van het werken met monorepos.
Voordelen van Monorepo
Als we kijken naar het belangrijkste voordeel van deze aanpak is dat het de ontwikkeling vereenvoudigt door alle code, configuraties en afhankelijkheden in één repository te centraliseren. Maar daarbuiten zijn er nog heel wat.
Gedeelde code
Zorgt ervoor dat er minder herhalende code zich in het project bevindt
Atomic changes
Aanpassingen in library en applicatie die component gebruikt kunnen direct samen aangepast worden.
Developer mobility
Consistente manier van bouwen en testen schrijven
1 set van dependencies
Gebruik 1 versie van third-party dependencies, zorgt voor minder inconsistencies
Applicaties waar minder aandacht krijgen blijven ook up to date
Nieuwe workspace opzetten
Om een nieuwe workspace op te zetten kunnen we gebruiken maken van de NX CLI met het volgende commando
npx create-nx-workspace --preset=angular
Deze zal enkel configuratie vragen stellen als project naam, stylesheet format, linting tool en of er gebruik gemaakt zal worden van NX cloud. Default wordt Jest en Cypress toegevoegd als testframeworks aan het project.
Workspace name (e.g., org name) APPEELIO
What to create in the new workspace angular
Application name todos
Default stylesheet format CSS
Na dit zal een nieuw project aangemaakt worden met deze structuur
apps/
{{appName}}
{{appName}}-e2e
de applicatie projecten
libs
de plaats waar alle libraries zullen geplaatst worden
tools
de plaats voor alle scripts voor het project
Een library maken
Volgens de Nx workspace methode zal er veel gewerkt worden met kleine libraries. Dit zal er voor zorgen dat er tijdens het developement met NX veel gebruik zal worden gemaakt van creëren van libraries.
De voordelen van het maken van libraries houdt in
Vluggere commandos
Via het commando nx affected en de computation cache is het mogelijk om enkel testen te runnen die enkel aangeraakt zijn bij een code change
Visualizing architecture
Met nx graph is het makkelijk om een grafiek te visualiseren die aantoont hoe de libs en applicaties relatereren tot elkaar
Beperkingen afdwingen
Elke library heeft zijn eigen index.ts file die ervoor zorgt dat enkel de api die publiek gexprosed word kan gebruikt worden in ander libraries
Om in NX een library aan te maken kunnen we ook weer gebruik maken van de NX CLI
nx g @nrwl/angular:lib mylib
--directory=”name subfolder”
Hiermee kan je libraries nesten in een specifieke subfolder
Dit commando zal een library genereren in de libs folder en zal de set up van deze voor zich nemen. Elke lib zal een index.ts file hebben die het access point zal zijn van de library en zal dus de publieke api van de library zijn.
Conclusie
Het werken met een NX workspace zorgt ervoor dat we gemakkelijk kunnen gebruik maken van een monorepo en zorgt voor vele tools die ervoor zorgen dat development een stuk vlugger vooruit kan gaan. Het kan gebruikt worden voor elke size project en is makkelijk opzetbaar in een nieuw of bestaand project.
:quality(100))
Ellen
Insights
Meer inzichten
:quality(90))
🛠 Frontend development
Next.js 13
Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.
:quality(90))
🛠 Frontend development
Hoe maak je een moderne UI met Spline
Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.
:quality(90))
🛠 Frontend development
Dingen die je in CSS kan doen in plaats van Javascript
Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓