NX22 is out and if you're curious what

went into this release, lean back and

stick around as I'll walk you through my

main highlights of what we packed into

this NX22 release. Now, that said, I'm

not going to do any deep dive. I'm going

to demo some of the things, but we're

going to have deep dive videos on this

channel for each of the topics. So,

yeah, you're right. Now is the time to

subscribe to the channel and like the

video as well. Now, we have a lot to

cover, uh, so I'll try to keep it short.

All right, listen. Currently editing the

video.

It looks like excitement took over a

bit. So, it's

more towards the 20ish, 25ish minutes,

but hey, I'll make sure I have the

chapters in the YouTube description so

you can jump to whatever section you're

mostly interested in and you don't have

to go through all the video. But if you

do, definitely shout out in the

comments. Enjoy. But we have a

completely reworked NX graph which is

amazing. We have new terminal UI

improvements. We heard your feedback. We

have polyglot extensions for .NET and

Maven. There's better AI integration.

Finally, we have PMPM catalog support in

the sense that our plugins and NX itself

is aware of catalog. So, I'm going to

show you that. We have a lot of

improvements for mod federation, some NX

release updates, and a lot more. Shall

we? Let's go. So the first thing that I

wanted to show you is the annex graph.

Now people love the graph, but we also

kind of heard your feedback that once

you have a really large workspace where

you really would want to use the graph

to visually debug it, things didn't work

work out so smoothly. So it was really

hard to navigate uh it was like a big

ball of mud basically lots of

interconnections that were hard to

actually productively work with. So what

we did is we rewrote it made it much

more performant. Now I'm here on the NX

repo and so let me just launch the graph

real quick for you. So when the graph

opens up you can see already we kind of

like render it in what we call composite

mode. So the notes are all collapsed and

this is for performance reasons because

now even in a large workspace we won't

render all the notes immediately but you

rather dig in or you filter project as

you're interested in those. For

instance, you can see here the tools

folder up there. It has this number

four, which means if I expand here, you

can see there are other projects inside

and there's even other folders that I

could start layer by layer basically

digging deeper. If you click on these

nodes, you also have additional

information for those. So if for

instance I go to workspace plug-in, this

side panel opens up. You see the direct

dependencies, you also see the targets.

So you can open that up and look into

those and understand like what

configuration these targets have the

inputs outputs caching options etc. So

there's a lot of information that you

can actually see by using this graph.

Now one powerful approach though is

using this graph to debug your tasks

that run. So you have a slow task. So

you can also just go to this task tab in

here and then select whatever task you

have. Let's say for instance I have the

build one and click that one. And then I

choose from some projects I want to look

at. For instance, let's say Angular. As

you can see, this here now renders the

Angular build. Now the cool part is I

can change the direction in this

floating panel at the bottom from right

to left. And so that means I can start

reading graph from this side to this

side. Very the very rightmost node is my

Angular build that I want to look at.

And so I can understand what is going on

here. Whenever I invoke the Angular

build, it starts from this one here,

which is the build native, and then

starts walking through all these

different nodes until it can finally

build my Angular build. And so this is a

really useful information that you can

look at for better understanding what is

going on. Something people actually

don't use as much is even invoking this

directly from your terminal because you

can filter it but you can also do pmppm

annex build angular which is the task

you're running and you want to debug and

then do d-g graph which will open the

graph on the site

already filtered by this build and the

product you have. And so you basically

end up with the same view that we have.

You can change the orientation as before

and then you can just read through this

uh graph again. You can also add

additional projects and basically keep

debugging it in this way. Another thing

we keep improving is our terminal UI

support. And so I'm again here in the NX

repo and if I just run a bunch of

different tasks, let's say build, lint

and test, you can see the terminal load

up. And one thing that is immediately

apparent is that we remove the

pageionated list and just have an

infinite scroll here which is just much

nicer to navigate compared to the

pageionation because you also can use

your mouse wheel where we improve the

whole scrolling experience a lot. And

the same thing is like if you open up

one of these side panels and if I

highlight that we made that much more

evident. So you have a much better

understanding of what part is currently

highlighted and focused. You can scroll

this as well with your navigation keys.

Uh or just use the mouse wheel support

as well. Also for those tasks where

they're currently being processed but

they're waiting for dependent tasks to

be completed. We show that nicely in the

panel if it is open. So here I have the

Angular RSpack test one open and you can

see these are starting to be completed

as I have it here open until finally the

Angular RSpec test can be processed.

These are just like a lot of different

things that add up to make the DX much

much nicer. We also made sure to have

things like the filtering that behaves

as you would expect. So whenever you

just like go for angular or playright uh

we keep the filtering stable and the

scrolling position. So there's no

unwanted or weird scrolling happening as

you filter the list. And if you're now

one of the Windows users saying like

what about Windows, it is coming. We are

actively working on it right now. We

didn't take prioritize or forget about

it. It's just trickier than we thought.

But updates are coming your way. So stay

tuned and make sure you follow us on

Discord and our channels uh to get the

update once it is out. Next on my list

isnet and Maven. We've been expanding

our polyglot support in the recent

months because NX at the core is really

just a task runner that is tech

agnostic. So it can be extended to these

different frameworks and we definitely

want to also bring in like .NET, Java

and potentially other non-JavaScript

languages because we have a lot of

people a lot of customers that have

their Java back end orn net back end and

they want to integrate it for with their

front end or they just have a super slow

Maven support maven setup and we want to

benefit from some of the caching task

orchestration uh locally but also on CI.

So let's have a look for the net

support. Here I have a demo where I have

basically a front end application which

here happens to be Angular and here I

have a net web API project that is

embedded in the same NX workspace. So

here you can see the web API it just

returns a bunch of people like an array

at this API endpoint. I connected the

two via the proxy config. So just like

normal things that you might do in

Angular but you can also obviously do in

other frameworks. But the nice thing is

also how you can now connect the two

just because we were speaking about the

terminal UI support because here for

instance for surf I'm just like saying

the surf depends on my API watch and so

if I run now and I serve front end what

will happen is it will run my front end

here in one terminal and then open

another one se another section here

which runs my back end which leads to a

really nice experience. So I can now go

to 4200. My Angular application renders

with the data from my back end all

nicely served here in the same terminal

experience. And so I can just like close

it again and everything gets cleaned up

for me. And this is really nice not just

for working in a single monorreo here

but also when you use AI which can then

work across front and back end in one

single PR for instance. Big shout out

also to Gregory Copola which is now

working as part of the NX core team but

like he started the NX.NET

community plugin before he even joined

NX and reached up to 25,000 downloads

per weeks per week which is like really

huge achievement thanks to also a lot of

contributors. We mentioned them in the

blog post on the Alex dev blog to Ben

Caligan Christopher Lee Paulo Olivera

and a bunch of others. It's really nice

to see like such a community develop

such a popular plug-in such that we

decided at some point that we should

actually bring it into the core team and

maintain it there because there was a

lot of interest from a lot of the

customers as well. Now we're going to

have a deep dive video on this how you

can have a full stack type safe setup.

So stay tuned for that one. Same thing

holds for Maven support. Now we've been

introducing we have introduced Gradal

support a couple months ago and we

really had some good results in making

Gradel super fast but we heard people

begging for Maven. So we looked into it

and so here you go. So this is a spring

boot project which I just downloaded

from the spring website and I chose

Maven as my build tool in this specific

case and then I just ran NX init to

initialize NX in this workspace. and X

in it understands this is the Maven

workspace and properly installs and

configures itself as a Maven plug-in.

Now you can go deeper on to how this

works on our website uh on our docs

nx.dev/docs /docs. But basically what I

want to show you here is if I open up

for instance the pom xml file and in

this case I have nx console installed

you can see that nx understands this

maven workspace. So it shows you all the

different targets that you can run which

ones are cachable which ones are not

cachable and on the other hand that also

means I can just run nx compile for

instance which is a maven target which

will now compile basically and run that

target for us in the nx terminal.

That also means obviously if I rerun it

since it is cached it will be immediate

and so this way Maven projects can

benefit from the same speed improvements

on CI even via NX cloud. Now these can

be just pure Maven projects or it can

also be mixed workspaces as I had before

where you have a front and a back end

and you just want to integrate them into

one NX monaper. Now as a Java user you

might be wondering do I need to install

NX over npm? I don't really want to have

npm or node modules in my pure maven

setup. Uh if you look at my NX

installation here, I installed it over

homebrew. So that's not really an issue.

You can get it over that one as well.

And then X itself will then handle all

the plugins that it needs uh properly in

its own folder. Now apart from polyglot

AI is a big focus for us because we

strongly believe that it will stick

around and will be another tool in your

tool belt that you just use on a daily

basis to develop your software. And we

want to make sure that you have the best

possible integration. So earlier this

year when MCPS became popular, we

already shipped the NX MCP which we keep

improving all the time, make it more

token efficient. Uh and so you have the

best experience with it. But we also

want to make sure the local LMS like

claw, codex, etc. know how to navigate

in anx workspace. And so we shipped the

configure AI agents command recently

which allows you to generate a

configuration for whatever agent you're

using. So whenever you run the command

which you can by the way run on any NX

workspace just run NX at latest

configure AI agents and will analyze the

workspace understand which tools you're

using and propose you a bunch of

different tools which you can then

choose from that it is going to set up

for you. It generates basically like a

claude MD file that points to the

correct MCP. It installs NXMCP this is

not if it is not there and it also

updates these files over time because as

we might improve these and make them

better you can just rerun the command

and it will look at the diff and just

enhance the current configuration that

you have. Now if you have NS console you

can just wait and console will give you

a notification whenever some update is

available. So you can just like then run

the command and it will do it for you.

Now this is just for making your local

workspace setup as efficient as possible

with respect to AI tools. But another

thing is on CI and their big focus for

us is selfheating CI which is just

another way to make sure your CI

completes as fast as possible. One

metric we look at heavily is the TTG

which is the time to green which is not

just to make AI fast from a technical

perspective but if there are things that

are failing we can use AI to fix them

for you in a smart way propose them to

you such that you can just keep going

and just like uh basically verify look

at it approve it and it gets pushed on

your PR so make sure you check that out

as well next on my list PMP cataloges

I've been heavily advocating this to our

team because I think is a super nice way

to organize your dependencies in a monor

repo setup. Now, in the past, we've been

heavy promoters of the single version

policy and we still kind of are because

like we see it work really well with the

customers that we work with has

obviously downsides and there's

sometimes situations where you need to

deviate like you have some temporary

maintenance to be done or you want to

run experiments with a new monor repo.

You want to upgrade the single project

rather than the entire monor repo in one

go. Now, we've made this drastically

easier since we switched NX workspace to

be just like an npm, PMP or yarn

workspace because at that setup or with

that setup, each of these have their own

package JSON. And so, for instance, if I

go into one of these here, you can see

it has its own dependencies defined that

this specific package is being use is

using. Now this has some downsides

though as it might lead to really nasty

bugs because like if some of these

versions deviate you might be reusing

packages which are supposed to use a

different type of version of let's say

React or TypeScript or RXJS or whatever

you're using. Now PMPMA has introduced a

smart concept which they call catalog.

And in fact if you use at this

dependency definition here you don't see

a specific version but you rather see

catalog colon. And what happens here is

that at the root level in your pmppm

lock file, I've basically defined this

catalog where you see all these

different packages

have defined a specifier and a version.

And that's the one that is being used

across wherever this is being imported

with that catalog protocol protocol. And

so here you can define those ver these

types of version setups uh most

interestingly uh for the version for the

packages that are being reused across

different projects such that they are

aligned and you don't run into these

bugs. So super happy this landed. We're

also probably going to have a deep dive

into single versus multi- version policy

in a monor repo as people keep asking

about that. I think it's really

interesting topic. So make sure you you

check our channels for one that gets

published. Next, modiferation.

It's a super hot topic. We've been

supporting it for a long long time with

Webpack. Now, recently also with RSpack.

And what we did is we ported it to the

npm workspace setup. So, up until now,

our generators relied on basically the

traditional NX setup with a TSbased

config with TypeScript path aliases for

dependency mapping. Now, we have a

fullyfledged AMP workspace. So let me

jump over to the modifation setup. This

is an app I already generated to be

quicker but I basically use the

generators that you can find on our

documentation. So if you go to nxdev u

and then like search for modifation you

will see under the technology section

here there's a modiferation entry which

will guide you through the different

commands that you can use for setting up

a react or angularbased modiferation.

But what you can see here is again we

have just like an mpm or pmppm workspace

defined with these apps or packages if

you would have any. And then here I

generate a shell project which has the

modiferation configuration in here and

the two remotes that basically are

import into this project. If I go here

to the app tsx file you can see here

it's being loaded in remote module one

like remote one module remote two module

and this is being set up here for these

different routes. If I go to the package

JSON, you can see that these are defined

here via the workspace protocol in PMP

and or would be similarly uh in mpm uh

without the workspace colon here. And so

if I now serve this product and run nx

surf shell, it will boot this up for me.

And then if I go to localhost

4,200, you can see there's like the

router set setup at the top with remote

one and remote 2. And if I go to the

network panel here, we can see as I load

these different or navigate between

these different routes. You can see the

the remote modules being loaded in in

this modification setup. So definitely

check it out on our docs. Uh we will

have some deeper dive videos for this

one as well going forward. And finally,

the last thing that I want to pick out

is NX release. A lot of people are using

it and we shipped a lot of improvement

in NX22 based on customer feedback and

real world use cases to make it even

more powerful. Now, I don't have a demo

for you ready just yet, but if you go to

the NX22 blog post on the NX blog, you

can see there's a dedicated section with

all the different things that were

shipped for it. Now, if you're not

familiar with NX release, you can either

just go to our docs obviously, but you

can also go to resources and NX video

courses which links here the versioning

and releasing mpm packages with an X. If

you click on it, you will be guide uh

redirected to epic web where I basically

released an entire course that is

completely free for you that you can

check out for getting started with NX

release starting from how it works to

the actual more powerful programmatic

API to customize the release project the

release process for your specific

workspace and setup. So what

specifically changed in NX22?

If we look at the change lock here,

first of all, what we did is made the

whole grouping that is possible in annex

release graphawware. So with NX release,

you can basically divide almost

structure your workspace into release

groups that you want to treat

independently with different

configuration in terms of release

process even just like how you want to

version them where semantic versioning

or not. And before these release groups

were not aware of each other but there

might definitely be dependencies across

these groups and you might want to be

able to affect basically these groups

based on the release setup. Now we

introduced here an update dependence

option which now supports always as a

value and basically that means that it

updates the dependency references in

these dependents across groups. So

meaning if you have product A in group

one that depends on project B in group

two. If you run NS release-pr

B or NS release-group

2 depending on what you want to define

here, it will update the dependent

project A in that auto group as well. So

if that was kind of complicated,

definitely check out our guides here

which have like a more detailed uh like

outline of how this works, how you can

configure it in your project. We also

kind of improved the whole ergonomics of

using NX release. So here's an example

for instance for defining release tag

patterns in NX21. And so in NX22, we

just made it much nicer to define by

just grouping it in a separate object.

And so it's much nicer to define and use

and work with. One thing you should

definitely look into is the programmatic

API. Uh if you use NX release, you can

use it actually without any sort of

configuration. And that works nicely for

simple packages. We just manually

trigger the release process. But most of

the time you want to customize it. You

want to just perform operations

beforehand, for release or in between.

And the programmatic API gives you

really fine grain access to the

different steps in the release process

so that you have full control and can

customize to whatever you want. And so

we improved that uh quite a bit and what

I really like is that we have a new

dedicated programmatic API guide on our

docs which gives you much more

information of how you can use these

APIs in your setup. Finally, kudos to

our community because this one came from

that like from people reporting uh this

type of behavior. So now basically if

you use conventional comets NX

determines the relevant commercial

comets with the same behavior as annex

affected because there was some disjoint

between those two commands which

resulted in some basically not correct

behavior when you run annex release. All

right that's it you made it. Like if

you're still around say hi in the

comments so I can give you a shout out

there. But this is basically the main

highlights that I wanted to show you.

There's a bunch of different things that

went into release as well apart from

just like the ones that I showed you

like there's improved watch commands

with storybook. There's a bunch of

breaking changes that we highlight also

in the blog post. So make sure you go

train.blog.

I'll also make sure obviously to link it

in the description of the video. And

other than that, usual thanks. Make sure

you subscribe, like the video, which is

really nice feedback for for us all. And

big big shout out to our Discord

community. Lots of our core members hang

out there, chime in. Our annex champions

are there. So, if you're not on our

Discord community, make sure you join.

I'll have the link in the video

description as well. That said, take

care and I'll see you in the next one.

Peace.

[Music]