The state of change detection in v17, Matthieu Riegler

yes hello thank you for having me uh like my said my name is mat now I'm a rega German name French first name so I'm a software engor in France and my nickname on the web French Jes uh today I'm going to talk to you about change detection I think one of the hardest topic to uh master in angular and some things have changed recently so I wanted to share the new things that happened so what are we talking about change detection is the process through which angular checks to see whether your application state has changed and if any the Dom needs to be updated and that's one of the part that's let's say the costliest in angular change detection costs a lot of performance knowing how to master change detection will help you master performance in angular when you do change detection it starts if I can get this away yeah perfect it starts at the top when your application ref just sends uh let's say an event and it propagates through the whole application depth first so from the top every component is going to be change detected boom boom boom boom boom from the left to the right bottom at the end so that's what happen first question is how is it scheduled because that's how um how let's say how angular determines when we need to change detect the whole application and this is done [Laughter] this is done thanks to zjs you probably heard of it probably had nightmare with it but basically Zone JS tells angular when the app is soal stable so nothing is happening so nothing is happening you can update the application and for this we have a uh a a an observable that we can listen on microtask empty and when it fires angular NOS app is stable we can trigger the application ref. TI exactly uh so first question how do we optimize change dection and for a very long time we can do on push on push for know who knows what it is it runs change detection only in certain conditions the two major ones are when the reference change on the input that means if you do not do use uh imitability you won't have the change detection and the second one is when you call Mark for check and that's exactly what the sync pipe does so when you use on push you get better performance but you need to determine when uh your application will uh be change detected so how it would look like it's you still have the same tree with the black border we have the UN push components and for example on the right I have the dirty ones and these are the one that will be change detected so in the middle the gray one are not because there were not dirty and on the right the ones that were dirty the ones on the left are not on Bush door I checked what we call check always so every time there's a change detection that starts at the top there will be change detected so what are the responsibilities of change detection when the framework runs it four points first just execute the template to know what to update so the new value to put into uh the dawn also change detection is responsible to call all the life hooks life cycle hooks you uh you know on in it of the view in it of the content uh in it etc etc it also updates the queries the queries are uh content child uh content children your child your children and the last one also updates the host bindings that's the one that allows us to have an action to U let's say update the classes or something like that these are the sorry four and since V uh 17 we have a new uh new hooks after render and after next render so the are the five responsibilities let's say of the change detection but when we do change detection there's also a responsibility toward the developer it is UN unidirectional data flow it is necessary because we don't really know uh when um let's say more where the changed uh and what uh happened and where when I mean unidirectional it's remember the tree it starts at the top and goes down so always from the top to the bottom so a component down the tree should not alter the rendering of one of his ancestors or any other rendered element into the component do you know what happens if you do not do that I think you all know Ng 00 the most famous error everybody had it and that's what happened when you actually um change something after it was rendered so yeah you know break the the basic rules the framework screams at you and it is hard to fix it's when you look at it it's one of the most Feud help videos uh the angular team has so much uh questions on stack Overflow everywhere everybody had this issue mostly when you do forms so let's build a small form those who were in Vienna two weeks ago will recognize some of the slides I stole some of them to Alex RAR from the angle team also so let's take the idea we build a model driven input it would look something like that let's let's say we display a um status of our model and we have two inputs that will uh uh modify the um the state of our model so first we have an input where we put some for forbidden characters and Below just the value for our model so what happens is when you modify here it will have a um an impact on the value and on the do mean if you modify here after and something that alters the the the status you will get the ng100 error so that's how it's look uh the basic example uh in the template we have first the interpolation we've got the first label where will um we get the reference and we put this into the uh input the details are not really important what I wanted to to show is that when you modify uh the the the Forbidden characters it will trigger um the error so do you know if we can fix it and actually how do we fix Express change the error this one famous fix that you probably already used and like to hear it who knows that problemed yes more or less either problem is resolved or set time out I'll be loved and you know what it's used by everybody when I mean everybody this is NG form from the angular framework and if you look at here we got a nice resolve promise so even the angular team knows and uses the same fix because when you modify some kind something that is let's say stateful from the Dum it's the D that put putes the value to angular then you have the problem because got um data that comes from the top but also from the bottom so angular in itself already breaks the rule so it's not only your fault that um we get the error it's also the framework fault so uh so first problem second problem is we you still have uh it's using own push with uh this kind of uh implementation for example you had another component that's 100% on push if you pass the model to the component uh down here if you do not change the reference for example the model is just changed its value inside your component will never get refreshed that's one of the issues so can we fix all of this all the issue we have with change detection and the answer is of course signals if you do not love them yet you will soon if you know a bit about signal one of the important things about signals is the signal graph so the kind of hierarchy we have between the information if we take our example we get our producers so signal are like um objects functions you call but also that will uh emit some values you subscribe somehow to them so in our case we got two producers we got first the input where I put my string and the other one is the uh the illegal characters so the second string that's the both the the two producers we have these producers are consumed by a computer the computer just listen to the values by calling them and every time they change it will be called and produce a new value so it's a consumer but a computer also most of the time a producer a producer to another consumer and here the final consumer is the template with the string interpolation so here we have a nice example of a simple signal graph producers some mixed consumer producers and some kind of end consumers We call we like to call them so life consumers they always listen to the value so one of the Core Concepts and the basic idea that you need to understand is uh angular understands the signal graph so it means angular is able to um to uh to profit from the structure and to know which value change and reflected to the uh to the D with change detection and one of the first improvements we had with signals landed in v17 it's a um let's say a technical concept that you will not see directly as a developer but it's important to have to know uh when you do um when you want to understand change detection traversal nodes are actually components that will be uh traversed during change detection but not change detected so first with signal we'll be able to um still have our change detection like before starting at the top to the bottom but some components are going to be skipped and here my example is I've got a component that is dirty so I have a dirty signal it mean the signal has been changed somewhat somewhere maybe by the uh signal store so first thing what happens component is dirty and automatically the parents are marked as traversal so these components are going to be the one that will not be change detected so if I trigger change detction somehow application life calls the root component our um default component has still change detected normally and should have been another errow on the left but then what happens here on the right I've got a non- push component that is traversal and here you will see that the component will not be change detected but the dir one will be and then change detection continues normally we have below an un push that wasn't change won't be change detected and the last one is a default one that will be so here we see that where signals the framework is able to know which component to reender and which where uh the one he doesn't need to reender though here we got a major performance Improvement by just updating the components that have dirty values M major breakthrough so I'd like to show you a small demo some of you probably already saw it and it's here it's a small demo where we have a component tree where you can do some different actions for example here that's why I told you I can do uh uh not uh I can increment change of uh signal value and when I do that you will see first thing so here what you see is that the component have a flag the first one uh down is dirty and the parents at what what we called has two uh chart views to refresh that's an internal flag that tells angular Traverse these components you do not need to check them and first thing you can notice there's a green banner up there signal updates will not trigger right now change detection it will soon but right now it doesn't so first thing we need to do it's trigger change detection and here what happens you see all the blue components were the one that were uh change detected I can block it if I do this okay and here you see that either on push or default this components are not rendered only the one here down that was dirty was rendered so we are already able right now V7 without zoness able to just reender some of the components that's one of the key things that signal allows having a signal tree allows the application Al allows the framework angular to just render what it needs if you want to play with it you can scan the QR code at you can see uh on G um that's one of the key things and what I can also show you as clear yes of course I can zoom if you want hi it doesn't work reset oh I broke it what here and uh it shows you what signals does but every other action you can will see uh you have a uh you will see the difference you have when you do only a ma for check the explicit call to detect changes uh if you detach or attach component Etc or just a simple click so for example I do a click here and you see when do a click every parent of the UN push gets dirty different from consumer dirty we have a dirty flag that tells the um framework this component is on push and dirty refresh it so that's the small Demo First and next next I wanted to talk about zoness zoness is an interesting topic it's about dropping the nightmare that zone jsr is to go zoness right now the key things is we need a new schedule right now the schedule was Zone JS that allowed the framework to know when the App application was stable so we need a new schedu that doesn't rely on Zone and currently uh uh uh the angular team is experimenting with different solutions I've seen some implementation with request animation frame so it just check regularly if there is something dirty it just trigger CH detection or another one based on micro microtask with set timeout I think this uh I've seen a PR that was open few days ago basic implementation not much more than let's say 10 15 lines something like that it just calls uh every signal would call the notify and if there is something a task already scheduled uh it will be um skipped and if not it would just trigger change DET action basic implementation so you see uh you would say uh why why uh if it's that simple why don't we have it yet it's because uh change it is only one part of what zone JS does and zoness should also take care of not breaking the concept of stableness and stableness is very important typically for SSR or the rout imagine SSR needs to know when the application stable so it can just say I'm stable right now just send all the HTML to the browser one of the key important things and also uh when you do um testing you do not want to break the way change detection Works automatically um in the in the test unit test I mean official zoness support is likely and insist on likely to uh be in preview uh in 2024 uh don't add me on this but I really believe that we get some previews early 2024 and let's see how the the year will will end and one last thing I want to talk to you about when you do change detection is track by track by you know it from the ng4 but we also have it now in the new four block with the new control flow who really knows what the track byy does are you really sure to know if you know it what it does I thought I knew I didn't I've 10 years of experience and I've learned things like two months ago when they change it so I want to share with you that's with the new syntax how it looks like do you have any idea between the two differences you have here with the two examples first one we use the index here and second one it's what we call identity tracking so when the reference change get something that happens do you know what happens what you does that you do that those who follow me on Twitter have seen a demo I've Shir here I've got two example the first one I'm just doing focus on one line and then I trigger some uh sort asynchronously and what you see is that somehow the Dy stateful and I focused on the value eight something happened the uh um the table was reshuffled or or sorted like here and the value that was selected isn't anymore and it's another one and actually what happened is angular just kept the element and changed the value that's what we call the binding other the case below here I just created a list and I've got as you can see in the code here I just put the content uh directly in the Dom using uh create node and if I reshuffle look what happens angular only changes The Binding the key element is to to understand here when you use uh tracking as um element tracking that when you track the track item binds the item reference to the element in in the Dom this means if the reference of the value when I mean the value when it's a primitive value change it just swaps the row or deletes it and recreat it and the example I told you it when I use the um index so when I use the index it just saw that the element didn't change so index one was still index one index one index two Etc but we just updated The Binding so the element was kept and we just updated the value and one one slide too fast uh imitability so when you do um uh reference tracking imitability implies that each time the reference changed the element is deleted recreated so it means that's what tracking identity which was default in ng4 meant you were doing um you were doing um reference tracking you were creating and deleting uh the elements of the Dom every time and this is actually the most costly things in angular accessing the Dom apis creating an object deleting it etc etc so if you have a long list that shuffles regularly and the items are not tracked or not correctly tracked like you've got imitability then you have you will get poor performance and the case with index that I said it rebinds the data with the item so it's actually a good default but like in the demo I showed you it's not always the best one and and what I would recommend if you can do it is actually bind to something like an ID you pass an ID directly no need to create a new method in your component you can directly pass directly in the templates and right here you would have let's say the probability the best performance for uh your component so these are the the key ideas really for um mastering change detection knowing that right now you can get the best performance with signals and if you use signals today you will be able to go zoness actually quite easily you will be able to have these new change detection that skips the components that are not uh changed and Etc so thank you everybody if you have some question you can maybe uh ask them after if you want to follow me I share a lot of technical stuff and internal stuff about angular uh on Twitter thank you everyone

Channel: Manfred Steyer

Views: 1,455

Keywords:

Id: Jf67ERGwFEM

Length: 25min 18sec (1518 seconds)

Published: Mon Jan 29 2024