Christian Liebel: The New Angular

This talk by Chris focuses on the major updates introduced in Angular 18, emphasizing the framework's evolution aimed at improving performance and developer experience. Chris, a Google Developer Expert, highlights significant changes such as the adoption of signals, a new reactivity model that simplifies state management, as well as the introduction of standalone components that reduce dependency on Angular modules. He explains how Angular is now equipped with an enhanced change detection mechanism, which improves rendering efficiency by eliminating the need for Zone JS. Additionally, new built-in control flow directives simplify syntax and enhance rendering speed. The session also covers server-side rendering (SSR), which has been integrated into Angular's build tools, making it faster and more efficient for modern applications. Chris encourages developers to upgrade to Angular 18 to leverage these advancements and future-proof their applications.

hello and welcome to the first talk in this track uh we will talk we have Chris here uh from Germany and he will talk about what is new in Angela and what is the changes that are made and how you can enhance your productivity and your performance there thank you for being here yeah thank you for joining uh great to see so many faces uh this early

on this Friday here yeah I want to talk about the new angular um so I specifically decided to not put the version number in there because doing conferences in May is always a little bit dangerous if you're doing angular development because just like two days ago uh angular 18 was released so the new major version um and as you might know angular releases two major versions every

year uh and so just two days ago this new version angular 18 has landed so what I want to tell you today is basically valid for both angular 17 and I also tried to add some of the new features that are introduced by angular 18 all right so my name is Chris uh I'm a Google developer expert um and I have I'm pretty much in touch with

uh the angular team um so yeah that's basically what brings me here with uh angular 17 or maybe 16 it's hard to say the angular Renaissance was um started so to say this is the term int produced by the angular team itself and what it basically means is The Rebirth of angular and I think it's pretty much true um also with angular 17 the angular team introduced

a new logo that you can see here behind me and I think it just makes sense because there's so many things changing in the framework that they also decided to just change change the logo also with angular version 18 Again released two days ago um there's a new angular website angular.io was the old website and . def is the new one it's a little bit fancier documentation

was updated and there's interactive tutorials that you can use yeah it all started with around angular 16 um and here are the talking points for my talk the first point is signals and signal-based inputs or components so the reactivity story of the framework is changing it was or is still currently based on rxjs but rxjs is complicated so we want to make it easier for beginners so

we need something new and that is a signal also we want to change the uh change detection mechanism in angular because it was a little bit faulty sometimes then there are Standalone components and modules this improves the architecture of angular applications by um making NG modules redundant then there's a new built-in control flow and the so-called defer views this is a new version of ngf and ng4

for example which is faster than the previous versions of it and then there's SSR in hydration and it also in the same um Step so to say introduces new build tools right now or before this effort angular was based on weback which is a little bit aged by now so we now want to make the switch to more modern build tools and so as you can see

here all of these uh points on the slide they have uh a common goal and that is that want to streamline the apis to learn angular the second one is we want to modernize apis again make them simpler U and adapt to um yeah recent developments on the web and we want to improve performance that's the idea of all of those things that change in angular yeah

but if you are familiar with uh the history of angular um development this this does not uh mean so to say that everything is lost which it did right now right so everything continues to run this time um but still the shape of angular application will change significantly when I go to customers right and I open their angular code base you can basically tell by the eye

whether this is like an angular 4 uh workspace or whether it's an angular 18 workspace it's it's visual uh yeah visually visible so to say in the in the again no worries all of the new features are backwards compatible and interoperable so we don't have another angularjs scenario that we that we had like 10 years ago or so um so everything will continue to run at least

for now but still um I would uh recommend you to migrate your applications as soon as possible and in the session we want to talk about why when and how you can do that um for each of the four talking and I want to start with the first one um and that is angular signals so what is a signal as I've said signals are a new version

of or A New Concept for reactivity in uh angular applications and Beyond in fact YouTube is now based on angular signals which is quite interesting I think um rxjs is super complicated um if you want to learn angular then you also have to learn this other uh separate framework so basically the angular the team decided to give us an easier version of of it so to say

so essentially a signal is a reactive primitive right so it's a wrapper about around a value and that can notify interest uh interested consumers whenever that value changes it's basically like a behavior subject if you're familiar with rxjs um but this entire concept is a lot simpler than rxjs because we don't have uh these tons of uh tons of oper operators right but only like a few

key um apis that I want to show you on the next slide and signals uh form the basis for a new more effective change detection system in angular that could eventually replace Zone JS which would be a performance Improvement and I want to talk about that in a bit so let's have a look at the signals API so to create a new signal we will simply call

the signal method that is also interesting because angular now takes this functional path again right so it was it was very uh object oriented with classes and so on but now basically it gets a lot more functional like generally so if you want to create a new signal you can simply say signal and then pass in the value that it should WP then whenever the value changes

you call the the do set method on that signal and then uh you can have dependencies on this signal for example here in this case we have a count signal at the top and we want to have a computed signal that just gives us the the double amount of the count uh signal from the top and so you can simply use the computed function call the signal

that means read the value from the signal then multiply it by two and so that's a nice thing you can be sure that double count will always contain uh the count multiplied by two always always synchronously available and always true say and if you want to respond to a change of a signal then you can use the effect uh method and just again within the Callback of

this effect method just access the signal and then you will also get um the current value and this callback will be invoked whenever the uh the value inside changes that's the basic idea and that's more or less uh the API surface that you should that you should know so setting reading computed uh signals and effects um as I've said there's always like a backwards compatibility and interoperability

story so of course we still want to be compatible with rxjs and integrate with rxjs and therefore there is the possibility to convert an an rxjs observable into a signal using the true signal method if you use rxjs you are familiar that it must not necessarily have an an initial value so have to pass it here uh where that's not the case and um you can also

do it the other way around so basically convert a signal to an observable in cases where you have an rxjs uh chain and you want to do something with it um if you've used the take until destroyed operator in rxjs interestingly that also comes from this um signals and rxjs interrupt package and that's basically the API surface as you can see it's pretty simple and that's the

idea of this angular Renaissance effort right so to make things a much yeah much simpler than they were before and it's the same for the Zone detection sorry for the change detection mechanism so up until now angular uses a library called Zone JS it's offered by the angular team itself um and the functionality of this library is uh yeah is displayed here so when your angular application

launches zjs creates the so-called NG Zone and this uh NG Zone basically listens to whatever change could happen inside your browser tab so to say so it attaches to all events it attaches to calls to set timeout or set interval and it also patches certain apis to get notified whenever something changes and then basically when it notifies such or when it notices such a change it will

check your entire application and reevaluate the bindings in the app that's like the very basic form of it it of course can be optimized but that's like the the default uh behavior and you can see that this is um pretty bad right for performance because maybe we check things too often maybe you click like let's say 10 times um within the browser tab but no um no

binding changes right so we are checking uh the angular application completely unnecessarily and also zjs has some flaws because it needs to patch those apis if I use an API that is not patched for example a websockets then uh the change detection will not run so you can end up in a horrible state where the view is out of sync with um the with the actual data

model so that's why we want to get rid of zjs and throw it away instead we want to rely on signals okay my clicker died too bad um okay now it's back instead we want to rely on signals so now so now we've learned it's this uh wrapper around the value right and so now whenever the signal changes whenever it notices that there has been a change

of the data value itself then it emits a change and in the future this could mean that we can simply update the one and only binding so to say in the view that is actually affected by the change right so instead of checking the entire application tree over and over again we can directly identify in the HTML what has changed and only re-evaluate this binding that's the

idea and that's the um yeah path that we want to take all right that are um signals more or less now let's see how we can use them um so it's pretty simple so you can simply put them in um your component class so say but uh the thing is now we have also like inputs and outputs right so what we what we typically did to receive

values from the outside was um yeah to just add this add input decorator and then basically yeah we could read values that came in from the outside and we would bind to that value as you can see on the left hand side here um like that as you can see on the right hand side signals always need to be called to read their value so here we

add um the two parentheses right um to get hold of that value and now the API changes and here's how on the right hand side you can now see that we simply call the input method so it's calling a method again right just as for the signal um and that's it so to say uh and that's cool um because it has some advantages let's have a look

at that this is a common scenario where you have like a required input um but the problem is that you cannot specify like a default value for this required input right and so that's why we typically need to use this exclamation mark to tell typescript everything is fine there will be a value at runtime and that's not so nice right using exclamation marks so that's why with

the help of this new method we can simply call the do required method on it and now this value two is filled right so now we get a signal it will always be there and angular will make sure that um the the value projected will be will be right these are signal based components introduced um with angular 17.1 um and from there it was improved so for

example let's say we have this um two-way binding right NG model for example that works by using an input and an output and now there's also a new API for that that is called Model so you can simply say equals model in that case it's also required um and then you will get a signal for this uh two-way binding right outside and with angular 17.3 the same

mechanism was introduced for the output decorator so instead of writing this you can now write this one here so simply call the output function and here you can also see that the API is simplified right because we um only have one line of code and we don't need to use an event emitter and stuff that's all handled for us um by the framework with angular 17.2 also

the old view queries were not really replaced but there's new versions for it so instead of using decorators with the same problem which is that we have to use the exclamation mark the non- null assertion operator we can now simply call The View child view children content child and content children methods to get hold of the instances um of the particular components that you want to get

access to and that is super cool uh and I can only recommend it works really great and as you can see uh instead of eight lines of code we now simply have four with the newest release again two days ago angular 18 there's now the possibility to opt out of Zone JS so that flaky change detection system um here's the method for that it's called provide experimental

Zess change detection you can simply um simply call it in your app config and then basically zjs will be turned off and you can then rely on the new signals based mechanism which is pretty cool and I will try that out in um the first uh in our first custom apps but be aware this is experimental as the method says yeah also um the ecosystem has changed

so um ngrx for example they also offer a signal based version of their store it's in the package ngrx signals um and is a great replacement for uh the pre for the previous component store and the ngrx entity adapter and they also adopted this new function functional approach so you can still use classes but you don't have to you have the the option to choose um yeah

whatever suits your application in your architecture so let's have a look here so first of all maturity um signals are stable you can use them um there are only some things that are still in developer preview that is the effect method the rxjs interoperability and all of the new methods that I've shown you so input model output and so on um so they are still def preview

also in the latest version and ngrx signals that is also still in developer preview yeah how can you migrate um why should you do it let's start with that um you should definitely migrate to signals That's the Way Forward right in angular the idea is everything that you bind to the template should must must be a signal um so from the angular side is should but I

would recommend you to just do it with um with signals when should you do it I would write new components um based on signals starting from now and uh whenever you have time I would also just uh yeah basically adapt the rest of your components um that you have in your application there's no hurry so NG rxjs will stay and the traditional ways will also not go

away anytime soon uh but yeah I mean as always uh don't lose time um and just do it before you have to switch everything um in a certain point in the future so how can you do it this can only be done manually um so there is no automated migration available so you have to revisit all of the components of the template to do it there is

an idea to provide um uh a migration but it's not there yet maybe gen can help in the end I guess it'll be a manual effort that's the first big change signals reactivity done better I guess then next talking point is Standalone components and apis um maybe you are familiar with energ modules that is something that has been introduced basically on the last steps towards angular 2

so when they created new version of the angular framework they wanted to do it without modules but then the angularjs developers came which new modules before and said oh no we want to keep our modules and so basically the angular team brought it back now NG modules die again um so you uh there's an alternative way to do it what is the problem with modules modules are

collections of uh angular building blocks so components directors pipes plus services and providers um that you can group in a box let's say the problem with that is that uh this uh yeah pretty quickly gets a little bit messy right so you have huge enery modules with tons of dependencies and components and directives and so on and there's often times a scenario where you build um uh

endless Loops right from the import paths for example so that is a great a big issue and and a problem also um the the angular team itself has problems with that approach for example here you can see a component right that uses ng4 and this app tool tip pipe and um sorry the app tooltip directive and the my pipe but the question is where do these two

things come from right and the answer is we don't know we need to scan the entire code base of your angular application to identify the module your component belongs to and then check whether there are dependencies that you want to use so that's pretty um pretty bad also for the tool implementation right so for the angular CLI um because you can never know where these dependencies are

coming from and so that's why it now all gets streamlined again um you can now opt into Standalone components by saying Standalone true and I expect that in the future you will have to say Standalone false and all the others right um but that's not the case right now and then in the Imports array you have now to specify all of the dependencies you want to use

and now everything is much simpler because your component explains itself it specifies from where we get our dependencies that we need to use and this allows us um allows to build way better application architectures than with this big module chunk um that we before everything is still working lazy loading will still work as you expected to even without modules you can simply load a component uh that's

all possible and yeah not much of an issue uh you can also uh provide injectables um for example on a certain route if that was your concern to use NG modules so basically for every question that you could have why NG modules were great and why you want to continue to use them there's basically an answer um that you can still migrate to stand components and Standalone

apis all right um and also there's again an interoperability story so um you can use Standalone components and directors and pipes um in enery modules by adding them to the Imports array of the module and it's also possible the other way around so if you want to use a module in a standalone component this will also work by simply adding the module to the Imports array of

uh of your component so all of that is perfectly fine and just as with signals we also have an here now why do we need this why is this a great um for us so there's angular elements a way to write web components with angular but the problem is that you don't just have to write the component but also just for the sake of actually nothing provide

this this module right so we want to make that possible and easier um and this is exactly where Standalone API um helps us due to this uh simplified API we can now create web components much easier that can then be used in any context not only angular applications just be aware that for now we still have this dependency on Zone JS but we are going to get

rid of that as well so in the future it's not too far away we will'll also be able to write great web uh components with the help of angula we are not 100% there yet but the time will come yeah um it's even like visible in stack blits for example if you use stack blits sometimes to demo something or to try something out uh then you may

have noticed that the application that you see on stack Blitz on the right hand side is actually a single file right so it's there's only like how's it called there's only the main TS and this single file includes the component and then in the end only calls bootstrap application bootstrap application is a new um API it's then called a standalone API um and that means that we

don't need to provide a module as we need to to do it as we had needed to do it before um but we can simply pass in um a component in that case it's app and everything will work so instead of right adding this extra layer so to say we can direct directly pass in a component to the bootstrap application call and it will simply run this

single file is all it takes to actually run the angular app on the right hand side big Improvement this also means that the folder structure of our angular application changes so left is the old structure uh and right is the new structure so um in Standalone apps the main TS remains um but there's no routing module anymore now the file is simply called app. routes and there

is no app module anymore now the file is simply called app.config docs so basically the modules are all thrown out of course we still need um the the routes and so on um and the basic configuration and they they are still there uh but it looks a little bit different and without the bloat of uh the modules around it so let's have a quick look left is

the old API that required a module I mean it's called bootp module write is a new way so we simply say application import the component and call bootst application so again also I think simpler because there's also not this second method here then um if you uh for the providers for example for the config left the old way we had this app module um where we added

the Imports and the new approach is to have a configuration object so essentially the thing that wasn't a decorator right and here you would add the providers with more function calls um that we've seen today already all right and there's a possibility again interoperability to load the old um modules as well okay um oh maybe let's let's skip this okay now talking about this block um so

Standalone components and apis are also fully stable uh I would use them from now um also if you create a new angular app they are used anyway um they improve the developer experience um and prepare your code base for upcoming angular features um they even started to deprecate like the HTP client module right not the HTP client but the module as a way of using this uh

thing um so yeah it future proves your application um new projects should only be started with sandone API new components should only be added as Standalone components and I would also here in that case um basically migrate them as soon as possible um yeah while making sure that the new parts are Standalone um be aware that some of the NG add or NG update Integrations may not

work with stand loone workspaces if they are super old but that may also be an indication that it's not a great idea to them how can you do it in this case there is uh a migration available that partly automates this process manual changes will still be required we migrated a smaller project in in a day uh you could say um the problem is that there's no

functional difference so you really have to convince your boss and say hey this is for future proofing our application uh because it will behave the same um afterwards there's also no performance Improvement this time um be aware that changes to the project setup may lead the to the migration to Break um this automated migration it may fail doing The Replacements in unit tests and it does not

introduce this new folder structure that I've shown you so not the new app. config dots files um and and so on it leaves them untouched and this is the migration that you can run uh and you generate at angular call and Standalone and it will then run you through the steps um to to migrate your angle app cool next uh talking point is the new built-in control

flow and defer views on the left hand side the old uh version so there's this like asterisk andf um and it's a great example actually right because it shows how convoluted that syntax is and how yeah how ugly right uh so if we have this else case where where you want to show something different then we need this NG container around the NG if and then we

need an NG template why actually right have this template reference and then reference that in the else part of the ngf explain that to a beginner it's not easy right and so that's why there's this new control flow syntax that has been introduced is now called at if right and there you can place the content and there's an at else Branch where you can directly place the

content into so again same thing much simpler right um and definitely something that you want to use and better for beginners all right so um why do we want to do this in this this time there's even a performance Improvement because this new control flow is directly built into the renderer of angular so there's no need to import something for example common module or NG if as

we did it before we don't need the this these dummy dumb elements any longer such as NG container we get rid of this angular specific uh structural Direction syntax that no one else uses and for example in the case of ng4 we get a performance Improvement up to 90% because we no longer rely on zjs I mean you can see the story right um to uh to

render when something changes and again we improve the developer experience when we deal with very common scenarios be aware that the buildin control flow is not extensible so you cannot extend it and create your own ad whatever that's not possible because it's a built-in feature of of the compiler some more examples this is NG switch also not easy to write because we have this um attribute at

the top and then the switch case um structural directives it's all much easier now right it's just an add switch with a condition and case and the default at the bottom just as we would write code I guess um and four is also uh nicer now left the old version on the right hand side there's the new version it's at for in this case they even added

an at empty plock for the case where you have zero items which was also a little bit complex to implement before um yeah so also in that case much better than it before yeah migration strategy also the buil-in control flow is fully stable um with version 18 actually that was released two days ago uh so I would use that thing now um it makes it improves the

developer experience and improves performance so use that thing now starting from now and migrate rest of your code base as soon as possible all right um be aware that your IDE must support this but all recent versions of webstorm V code and Prett supported um and be aware that the syntax also does not match the HTML standard uh so if you use older IDE versions or some

tool toing that does not know the syntax there may be problems but all of the other well-known tools including Pria and so on um yeah it how can you do it there's a migration to automatically migrate to the new buil-in control flow where you can pass in the Target path so you can also just migrate uh a part of your app um it also formats the files

afterwards and removes the common module or structural directive import from the component class still you may have to you will pretty likely have to perform some manual changes and check what you did effort for midsize project was less all and again no functional change so you need to convince your boss okay how can you do it um oh sorry let me just show that slide before this

is the migration that you can run um this time engine generate at angular colon control flow just as with stand alone but be aware that um four will track the count variable by default um which is not uh the best or the optimal way so if you have an ID you want to track that um the new buil-in control flow does not support some very rarely used

features of the old structural directive syntax which is um renaming a collection uh or giving multiple aliases to an ngf I think nobody ever used this if you did you have to change that um and the template reformating unfortunately does not use prettier um so you have to format it again at least in my case where we use prettier in a project another nice uh case where

we also see that new features of angular built on top of these new things and approaches is defer views um that is a pretty cool block and that's the result of a cooperation between the Wiis framework team at Google and the angular team so for example YouTube and Google Maps and so on they use wi like a Google internal framework which is heavily optimized um for service

side rendering example um and angular is very optimized for developer experience and in the future those two Frameworks will merge and form one framework and at defer the defer block that we see now is one product of this collaboration so the referable views take lazy loading a step further it was possible on a route basis and now brings it even to the template level to the view

level you can specify a part a fragment of your um application where you want to um lazy load things and this is exactly what uh this defer block does and with the help of that you can basically offload large chunks of your app or rarely used chunks and only load them when they are actually visible everything provided by template magic so you don't have to care for

about anything right all handled by the framework for you and it uses this new defer block and also here we have some nice helpers like at placeholder um that show while the content is being loaded or at error when the content cannot be loaded for example because you're offline or the server has crashed um it's all implemented and and supported um out of the box and that's

a nice example for something that is only available using the new syntax so there's no structural directive equivalent of this another reason why you want to migrate to the new approaches as fast as possible so this is again the code for that um add defer then the trigger when you would like to load that stuff uh again possibility to show placeholder while is loading and the at

error um while it is oh that is shown when there's uh an exception there's also an at loading um block I think yeah all right and um last talking point for today is SSR and the new build tooling um again why do you want to do this in this case it's a performance Improvement again um server side rendering would pre-render the application on the server which significantly

improves the load time because we don't have to launch angular uh on the client to show the the domum nodes that are created by angular but we can directly show what we get from the server as HTML we'll see it on the next slide um then there's pre-rendering or static side generation let's say you have static routes then we can pre-render them at compile time so so

that we don't even have to compile them during runtime right because they won't change this is what static side generation does and this improves server response time because not even angular has to run on the server right it can it can be done on compile time and then there's hydration which allows the client site angular to just attach on the existing Dom nodes that we receive from

uh from the server and this improves the client side load time again just a little side note because it's super new announc at Google IO um there will also be the possibility of partial hydration which means that we can render the content of a defer block so again on one view um during runtime on the server and then reattach on that uh thing on client here no

SSR and on the right hand side version with SSR so the server pre- renders the HTML that we want to show um and that yeah that is basically displayed big Improvement there are some caveats which which we'll talk about um next um or in a bit in angular 17 SSR is now fully integrated with angular it's super easy uh to set up um all you need to

do is call engine new D SS R so it's no long longer a separate Library it's built into um the framework itself um if you've used SSR before you need to switch to a new application the so-called application Builder and update your config to use it now let's talk about the caveats setting up SSR is hard if you use authentication and SSG may be impossible at all

um because if data is dependent on your on the r that you have for example then it's going to be um no zjs which is the the goal of angular is not supported right now or a custom zjs implementation uh angular internationalization is I think it's even supported by 18 but I'm not sure it was not supported in 17 um when you use service worker then SSR

is only used on the first visit um all components that you if you want to use hydration must support it and if you use uh libraries that use dumb uh manipulation directly for example D3 or whatever then this will also break hydration so you see SSR sounds nice but the effort may be super high if you really want to do it so be aware of that the

new server side rendering is based on new build tools um in in angular so instead of weback we now want to use es build and we V why do you want to do it because it's much faster weback is here at the bottom right so here's a code base weback takes 40 seconds in es build it's less than one um maybe that's little a little bit better

um that that's an actual angular code base Blue Bar blue bar is weback the red bar is the new um yes buil in Ved based um Builder so we get significantly improved build times so this time it's developer experience again for initial as well as incremental builds um we get compatibility with Native es modules and the modern uh ecosystem uh and you got HMR for Styles which

is again a performance Improvement so um all new apps from angular 17 will automatically use these new build tools why do you want to do it faster build times when do you want to do it do it now if you can right so weback is still stable older apps are not migrated automatically with angular 18 you are asked if you want to migrate um and yeah you

should just do it use the new build tools and if you run into any problems then you can try to use browser es build a compatibility Builder and if that doesn't work then switch back to um to the standard Builder all right I would just do my summary slide if it's if it's fine um perfect so what have we seen the angular reniss sauce is real right

so it's so much ongoing framework that's a good message there are notable advancements everything is backwards compatible we get performance uh improvements on build build run time and compile time so keep your users and developers happy um keep your code base up to date and yeah avoid technical depth and migrate now thank you for listening thank you very much we have a couple of questions the first

question is when using NG Zone does the whole application get reated not just the component and the child component indeed not so it re evaluates the entire application tree unless you use let's say the on push change intersection strategy but the default behavior is we everything okay the next question is should you just wrap signals in a geta and seta for its set function to mimic way

uh I don't know why I would simply use the new the new signal syntax I don't see any gain in that it may be possible but but why uh the next question is what's your Takeaway on using uh effect angular documentation at least previously dis enqu from using it if possible it's it's it's fine to use it's maybe in the documentation because it's not like fully stable

yet and of course there also some some caveats we are using it in production and there's no big issue or bigger problem that I have noticed and the last question is do we need a any new tool or technique for technique for debugging and monitoring applications using the new signal based detection uh depends on what you used before uh so the angular def tools are being improved

to explicitly support stuff like that so for example signal the behavior of signals so what uh emitted something right and what was the chain that led to a certain um to a certain change so that is built into the angular dep tools if you've used them before you update to latest version I'm not sure if it's in there yet but it will definitely come all right that's

it thanks again Chris thanks for all the questions uh from the audience and thanks for being here and looking forward to see you again yeah thanks for joining [Applause]