They don't do the same thing. Angular keeps track of your dom elements and whenever a change is needed it will know where to apply such change. If you don't use trackBy under big ngFor loops it will remove all elements and re-insert them, which could cause bad user experience if you have complex rendering, bad performance, etc.
Very simple optimizations that are easy to implement in a simple application. But try to do the same in some of the insane corporate spaghetti I've worked with. There are people that call themselves developers that don't deserve that title. Looking forward to following these to the tee in the project I'm starting.
Let's suppose that EmployeeListComponent has OnPush change detection strategy. Let's also suppose that we're using JavaScript arrays for representing both lists of employees. If the AppComponent adds a new item to the sales or r&d lists, the EmployListComponent's change detection will not get triggered. The reason is that the AppComponent will not pass a new input to the EmployeeListComponent because the AppComponent will only mutate the data structure referenced by the list. After the new element has been added, Angular will check if the data input of the EmployeeListComponent has changed and it will find out that it hasn't because it'll perform a reference check (i.e. newInput === oldInput, which will equal false). How can we work around this? We need to pass a new list of employees to EmployeeListComponent's data property when we add a new employee. For the purpose, we can copy the entire list: `const newList = this.rndList.slice(); newList.push(newEmployee); this.rndList = newList`. This way, when Angular compares the previous value of the data input, with the old value, it will determine that a change has happened, i.e. it needs to trigger the change detection in EmployeeListComponent. What are the problems with this? We need to copy the entire list and allocate new memory for the new one. This is slow and inefficient. That's why we can use an instance of the list from immutable.js instead of a JavaScript array. When we push a new element to an immutable list, we will get a new list that internally reuses as much as possible from the original one. Immutable.js uses techniques from persistent data structures en.wikipedia.org/wiki/Persistent_data_structure. I hope this makes it more clear.
@Minko - so you're saying that making a new copy of the object or array using Object.assign or object destructuring and array.slice() will take more memory than if we were using Immutable.js? How is Immutable.js handling it if you still have to assign a new value in the end to pass it to @Input param?
3 года назад
@@ksaweryglab immutable.js may use *structural sharing* of the unchanged parts of an object-tree.
The list would not rerender. Internally, using an IterableDiffer, Angular would discover the change and remove the list item associated with the deleted entry.
Look into the preload options. Their are ways to customize loading all/none/some modules upfront or on demand. You can also call to preload when a certain event fires, such as hovering over a Nav menu item.
If we put fibonnaci in the class and just call it once, it will work fast out of the box without fancy libs, it's not the way to go for modern frontend
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
+1 for live coding. This takes some balls.
one additional optimization tip could be the ngFor track by.
Yes but it is better than immutable.js ? Because i think it do the same thinks ??
They don't do the same thing. Angular keeps track of your dom elements and whenever a change is needed it will know where to apply such change. If you don't use trackBy under big ngFor loops it will remove all elements and re-insert them, which could cause bad user experience if you have complex rendering, bad performance, etc.
best talk on this conf
Thanks, this is the best practices I ever seen before
Very well presented! Easy to understand and follow! Thank you for this! Please do more presentations/teaching :-)
I love it, thanks for your sharing
The official release announcement was a serious Silicon Valley move... GJ!
Very simple optimizations that are easy to implement in a simple application. But try to do the same in some of the insane corporate spaghetti I've worked with. There are people that call themselves developers that don't deserve that title.
Looking forward to following these to the tee in the project I'm starting.
elaborate the optimization by you is awesome. Thanks a lot
thank you so much this is wonderful
Very informative and helpful
Awesome talk, thanks!
using trackBy won't help?
Really helpful and well presented
Excellent explanation! Thank you.
I couldn't understand the reason using immutable js. The rest was pretty clear. thank you
Let's suppose that EmployeeListComponent has OnPush change detection strategy. Let's also suppose that we're using JavaScript arrays for representing both lists of employees.
If the AppComponent adds a new item to the sales or r&d lists, the EmployListComponent's change detection will not get triggered. The reason is that the AppComponent will not pass a new input to the EmployeeListComponent because the AppComponent will only mutate the data structure referenced by the list. After the new element has been added, Angular will check if the data input of the EmployeeListComponent has changed and it will find out that it hasn't because it'll perform a reference check (i.e. newInput === oldInput, which will equal false).
How can we work around this? We need to pass a new list of employees to EmployeeListComponent's data property when we add a new employee. For the purpose, we can copy the entire list: `const newList = this.rndList.slice(); newList.push(newEmployee); this.rndList = newList`. This way, when Angular compares the previous value of the data input, with the old value, it will determine that a change has happened, i.e. it needs to trigger the change detection in EmployeeListComponent.
What are the problems with this? We need to copy the entire list and allocate new memory for the new one. This is slow and inefficient. That's why we can use an instance of the list from immutable.js instead of a JavaScript array. When we push a new element to an immutable list, we will get a new list that internally reuses as much as possible from the original one. Immutable.js uses techniques from persistent data structures en.wikipedia.org/wiki/Persistent_data_structure.
I hope this makes it more clear.
Now, it's fully clear. Thank you so much ;)
cev the theme is Nord with Fira Code font.
@Minko - so you're saying that making a new copy of the object or array using Object.assign or object destructuring and array.slice() will take more memory than if we were using Immutable.js? How is Immutable.js handling it if you still have to assign a new value in the end to pass it to @Input param?
@@ksaweryglab immutable.js may use *structural sharing* of the unchanged parts of an object-tree.
Best 💯
What happen if deleting one item, cause the list rerendering?
The list would not rerender. Internally, using an IterableDiffer, Angular would discover the change and remove the list item associated with the deleted entry.
Is there a way we can reduce module load time during application Load? Bootstrapping the application takes around 4000 ms.
lazy loading ngmodule, dont just build everything in one ngmodule.
Look into the preload options. Their are ways to customize loading all/none/some modules upfront or on demand. You can also call to preload when a certain event fires, such as hovering over a Nav menu item.
Does anyone has the code of the presentation, before and/or after improving the code?
오호~ 흥미롭게 잘 봤어요 감사합니다.
Why is the fibonnaci function not in the class?
Why would it? It uses no state of the class object and is not related to the class' purpose.
it's static function so can pull out of class
If we put fibonnaci in the class and just call it once, it will work fast out of the box without fancy libs, it's not the way to go for modern frontend
what is that operator used in place of === ? is anyone aware ?
Chutiya
yo.... !
thank you
anyone has the code for unoptimized and optimized app
Awesome
Where can I download the code from? The link that is presented in the video is no longer working. Thanks
awesome
very good persentation
as like redux in react, import immutable from react to angular, i guess react team still the best to find a good solutions !!
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
@@Almighty_Flat_Earth yes I gree but angular is more terrible specially with performance, that s reason I already switched to sveltejs and solidjs ;)
optimize angular application == port it to react
React js is a shame to JavaScript community. Governments should ban the use of this stupid library. Same functionalities can be achieved with Angular and Svelte with less frustration, so what's the point of using the stupid react js which makes web development unnecessarily complicated.? Those who use react are slaves.
+1 for @memo decorator