Loading video player...
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]
Nx 22 is packed with exciting new features! From a completely reworked graph visualization to improved terminal UI, polyglot support for .NET and Maven, enhanced AI integration, and powerful Nx Release updates. This overview covers all the major highlights. ## 🔗 Links & Resources **Documentation & Guides:** - Nx 22 Release Blog Post: https://nx.dev/blog/nx-22-release - Nx docs: https://nx.dev/docs - Module Federation Setup Guide: https://nx.dev/docs/technologies/module-federation/introduction **Learning Resources:** - Free Nx Release Course on Epic Web: https://www.epicweb.dev/tutorials/versioning-and-releasing-npm-packages-with-nx - Nx Video Courses: https://nx.dev/courses **Community:** - Join our Discord Community: https://go.nx.dev/community ## 📚 Chapters 0:00 Introduction & Overview 1:29 Nx Graph Redesign 4:29 Terminal UI Improvements 6:18 .NET & Maven Support 10:52 Enhanced AI Integration 13:00 PNPM Catalog Integration 15:07 Module Federation Updates 17:17 Nx Release Improvements 20:49 Wrap-up & Next Steps #Nx #Monorepo #WebDev #JavaScript #TypeScript