Nx Workspace

Insights

NX workspace: Opzetten met Angular

🛠 Frontend development

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. 

Ellen

Ellen

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 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.

Spline

🛠 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.

css

🛠 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. 🤓