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.
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.
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.
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.
The list would not rerender. Internally, using an IterableDiffer, Angular would discover the change and remove the list item associated with the deleted entry.
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.
