Optimizing an Angular application - Minko Gechev

  Рет қаралды 67,593

ng-conf

ng-conf

Күн бұрын

ng-conf is a two day, single track conference focused on delivering the highest quality training in the Angular JavaScript framework. 1500+ developers from across the country will converge on beautiful Salt Lake City, UT to participate in training sessions by the Google Angular team, and other Angular experts. In addition to the invaluable training, ng-conf will deliver a premier conference experience for attendees, providing opportunities to network with other developers, relax at social events, and engage in some of the unique entertainment opportunities available in Utah.

Пікірлер: 51
@masterlup
@masterlup 5 жыл бұрын
+1 for live coding. This takes some balls.
@popxkorn81
@popxkorn81 6 жыл бұрын
Very well presented! Easy to understand and follow! Thank you for this! Please do more presentations/teaching :-)
@user-hp3do6ot3m
@user-hp3do6ot3m 6 жыл бұрын
Thanks, this is the best practices I ever seen before
@user-cg4mb4mn2q
@user-cg4mb4mn2q 6 жыл бұрын
thank you so much this is wonderful
@Nitinjashaiwal
@Nitinjashaiwal 5 жыл бұрын
elaborate the optimization by you is awesome. Thanks a lot
@lllllllllllllllili
@lllllllllllllllili 6 жыл бұрын
best talk on this conf
@idanguttsait
@idanguttsait 6 жыл бұрын
The official release announcement was a serious Silicon Valley move... GJ!
@dovewingKor
@dovewingKor 5 жыл бұрын
오호~ 흥미롭게 잘 봤어요 감사합니다.
@DmitrySharabin
@DmitrySharabin 5 жыл бұрын
Excellent explanation! Thank you.
@robertbryan6485
@robertbryan6485 5 жыл бұрын
Awesome talk, thanks!
@nhatne5555
@nhatne5555 Жыл бұрын
I love it, thanks for your sharing
@evolveplatform8021
@evolveplatform8021 6 жыл бұрын
Really helpful and well presented
@arpanpatel5680
@arpanpatel5680 4 жыл бұрын
Very informative and helpful
@JuanPablodelaTorre
@JuanPablodelaTorre 3 жыл бұрын
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.
@d4lep0ro
@d4lep0ro 5 жыл бұрын
one additional optimization tip could be the ngFor track by.
@timothyalcaide
@timothyalcaide 4 жыл бұрын
Yes but it is better than immutable.js ? Because i think it do the same thinks ??
@d4lep0ro
@d4lep0ro 4 жыл бұрын
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.
5 жыл бұрын
yo.... ! thank you
@vivekr.k7950
@vivekr.k7950 6 жыл бұрын
awesome
@ashishkalra9438
@ashishkalra9438 4 жыл бұрын
Awesome
@AakashGoplani
@AakashGoplani 2 жыл бұрын
Best 💯
@mariokrstevski8836
@mariokrstevski8836 5 жыл бұрын
Does anyone has the code of the presentation, before and/or after improving the code?
@cedricblaser7079
@cedricblaser7079 4 жыл бұрын
very good persentation
@user-kx8wp1fy6l
@user-kx8wp1fy6l 5 жыл бұрын
using trackBy won't help?
@maveraa
@maveraa 6 жыл бұрын
I couldn't understand the reason using immutable js. The rest was pretty clear. thank you
@mgechev
@mgechev 6 жыл бұрын
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.
@maveraa
@maveraa 6 жыл бұрын
Now, it's fully clear. Thank you so much ;)
@mgechev
@mgechev 6 жыл бұрын
cev the theme is Nord with Fira Code font.
@ksaweryglab
@ksaweryglab 5 жыл бұрын
@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.
@irinakedem4051
@irinakedem4051 4 жыл бұрын
Where can I download the code from? The link that is presented in the video is no longer working. Thanks
@ankush3707
@ankush3707 3 жыл бұрын
anyone has the code for unoptimized and optimized app
@mojo1053
@mojo1053 5 жыл бұрын
Is there a way we can reduce module load time during application Load? Bootstrapping the application takes around 4000 ms.
@ttma1046
@ttma1046 4 жыл бұрын
lazy loading ngmodule, dont just build everything in one ngmodule.
@Bjlasc01
@Bjlasc01 4 жыл бұрын
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.
@yanweiwang2515
@yanweiwang2515 5 жыл бұрын
What happen if deleting one item, cause the list rerendering?
@mgechev
@mgechev 5 жыл бұрын
The list would not rerender. Internally, using an IterableDiffer, Angular would discover the change and remove the list item associated with the deleted entry.
@markgoho
@markgoho 6 жыл бұрын
Why is the fibonnaci function not in the class?
@SebaKerckhof
@SebaKerckhof 6 жыл бұрын
Why would it? It uses no state of the class object and is not related to the class' purpose.
@user-hp3do6ot3m
@user-hp3do6ot3m 6 жыл бұрын
it's static function so can pull out of class
@EugeneGuryanov
@EugeneGuryanov 4 жыл бұрын
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
@topratiksharma
@topratiksharma 3 жыл бұрын
what is that operator used in place of === ? is anyone aware ?
@kavinkumar
@kavinkumar 3 жыл бұрын
Chutiya
@kamalkamals
@kamalkamals 6 жыл бұрын
as like redux in react, import immutable from react to angular, i guess react team still the best to find a good solutions !!
@Almighty_Flat_Earth
@Almighty_Flat_Earth 2 жыл бұрын
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.
@kamalkamals
@kamalkamals 2 жыл бұрын
@@Almighty_Flat_Earth yes I gree but angular is more terrible specially with performance, that s reason I already switched to sveltejs and solidjs ;)
2 жыл бұрын
optimize angular application == port it to react
@Almighty_Flat_Earth
@Almighty_Flat_Earth 2 жыл бұрын
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.
@martinmika554
@martinmika554 2 жыл бұрын
+1 for @memo decorator
Angular at Large Organizations - Victor Savkin
25:29
ng-conf
Рет қаралды 30 М.
Iron Chin ✅ Isaih made this look too easy
00:13
Power Slap
Рет қаралды 36 МЛН
ПРОВЕРИЛ АРБУЗЫ #shorts
00:34
Паша Осадчий
Рет қаралды 7 МЛН
Получилось у Миланы?😂
00:13
ХАБИБ
Рет қаралды 4 МЛН
Ready for Readable Code? - John Papa
16:50
ng-conf
Рет қаралды 70 М.
N Things You Didn’t Know About the Router - Deborah Kurata
21:55
What's New in Angular v15, by Minko Gechev
28:59
JetBrains
Рет қаралды 27 М.
Qwik… the world's first O(1) JavaScript framework?
3:33
Fireship
Рет қаралды 668 М.
Water powered timers hidden in public restrooms
13:12
Steve Mould
Рет қаралды 225 М.
Ngrx Complex Form - Jesse Sanders
29:18
ng-conf
Рет қаралды 14 М.
Nature's Incredible ROTATING MOTOR (It’s Electric!) - Smarter Every Day 300
29:37
VS Code Can Do That - Burke Holland
20:34
ng-conf
Рет қаралды 53 М.
Какой ноутбук взять для учёбы? #msi #rtx4090 #laptop #юмор #игровой #apple #shorts
0:18
Rate This Smartphone Cooler Set-up ⭐
0:10
Shakeuptech
Рет қаралды 6 МЛН