Angular 18, geliştirici deneyimini geliştiren birçok küçük yenilik getiriyor. Ancak dikkatler Zoneless özelliği üzerindedir. Bölgesiz, Angular'ın DOM'u (Belge Nesne Modeli) güncellemenin önceki yolunu terk ettiği ve yeni bir mekanizma içerdiği anlamına gelir. Bu tür iç karışıklıkların çok büyük bir etkisi var, bu nedenle serbest bölge başlangıçta deneysel olarak sınıflandırıldı.
Duyuru
Rainer Hahnekamp, AngularArchitects.io uzman ağının eğitmeni ve danışmanıdır ve Angular'ın tüm yönleriyle ilgili eğitimlerden sorumludur. Ayrıca YouTube'daki ng-news ile haftalık olarak Angular ortamındaki ilgili etkinliklere kısa bir genel bakış sağlar.
Angular 18'de bölgesiz işlevsellik
Her ön uç çerçevesinin, tarayıcıdaki uygulama durumunu güncellemek için halk dilinde oluşturma olarak bilinen bir mekanizmaya ihtiyacı vardır. React'in sanal DOM'si var, Angular sözde değişiklik izlemeyi kullanıyor.
Değişiklik takibini başlatmak için bir tetikleyiciye ihtiyacınız var. Angular 18'den önce konu her zaman bir olay dinleyicisi ve eşzamansız görevlerin sonlandırılmasını içeren DOM olaylarıyla ilgiliydi. Zone.js kitaplığı bu iki tür olayı izler ve her zaman değişiklik izlemeyi tetikler. Eşzamansız çalışır ve DOM'u buna göre günceller. Bunu yapmak için Zone.js'nin tarayıcının büyük bir kısmına yama yapması gerekiyor. Zone.js bağımsız bir kütüphane olmasına rağmen Angular'ın çekirdeğidir ve bu nedenle en başından beri kullanılır. Bu noktada olay türleri bir DOM olayını ve eşzamansız bir görevin sonucunu belirtir. Zone.js kitaplığı için, bir DOM olayına ek olarak, DOM olayında kod yürüten ilişkili bir olay dinleyicisinin de olması gerekir.
Değişiklik tespiti için tetikleyici
(Fotoğraf: Rainer Hahnekamp)
Adından da anlaşılacağı gibi bölgesiz, Zone.js'nin artık kullanılmadığı ve bu nedenle artık değişiklik izlemeyi tetiklemediği anlamına gelir. Zone.js'nin devre dışı bırakılması Angular 18'de hala deneyseldir. Komut provideExperimentalZonelessChangeDetection bölgeleri olmadan etkinleştirilir.
Arka plan: Ayrıntılı olarak OnPush yöntemi
Şimdi bunun yerine değişiklik tespitini neyin tetiklediği sorusu ortaya çıkıyor. Bu konuyla ilgili daha ayrıntılı bir açıklama şurada verilmiştir: OnPushgerekli yöntem.
OnPush Bu bir değişiklik izleme ayarıdır ve Angular'da yeni bir şey değildir. Angular uygulamasının performansını artırmanın standart bir yolu olarak kabul edilir ve birçok proje bunu varsayılan olarak kullanır.
Değişiklik izleme, bileşenlerdeki özellik değerlerini DOM'dakilerle karşılaştırarak DOM'u senkronize eder. Bileşende farklı bir değer görünürse DOM'daki ilgili konum otomatik olarak güncellenir.
Angular'da varsayılan değişiklik izleme
(Fotoğraf: Rainer Hahnekamp)
Değişiklik tespiti her bir bileşeni kontrol eder. Herhangi bir değişiklik gerektirmeyen birçok bileşenle karşılaşabilirsiniz. En kötü durumda her şey aynı kalır ve değişiklik tespiti boşuna yapılır ve kaynaklar israf edilir. Örneğin, bir olay dinleyicisi yalnızca bir tıklama olayına yanıt verebilir console.log Çalıştır: Değişiklik yok ancak değişiklik algılama hala çalışıyor.
OnPush bir bileşeni ve alt öğelerini değişiklik izlemenin dışında bırakan bir ayardır. Değişiklik izleme, dosyanın alt öğeleri de dahil olmak üzere yalnızca bu bileşeni denetler. OnPushbileşen “kirli”. Resmi olarak bu, bileşenin aşağıdakiler için bir işarete sahip olduğu anlamına gelir: checking.
OnPush ile algılamayı değiştirin
(Fotoğraf: Rainer Hahnekamp)
İşlev markForCheck() bu işareti ayarlayın.
Angular'da aşağıdaki dahili eylemler vardır markForCheck gerçekleştirmek:
Sorun OnPush Bu çok nadiren değişiklik tespiti eksikliğinden kaynaklanıyordu, bunun yerine bileşen “kirli” olarak işaretlenmiyordu. Klasik örnekler, değişkenin değiştirilebilir değişikliklere sahip olduğu özellik bağlamalarıydı. Bu nedenle nesneye yeni bir başvuru oluşturulmadı.
Orada markForCheck İLE OnPush zaten her zaman değişiklik tespitinin başlaması anlamına geliyordu, bu aynı zamanda Angular 18 için de geçerli: markForCheck Yalnızca bileşeni “kirli” olarak işaretlemekle kalmaz, aynı zamanda (zone.js gibi) değişiklik izlemeyi eşzamansız olarak tetikler.
Geçici bir çözüm olarak hibrit mod
Bunların temelde Zone.js'nin zaten karşıladığı kriterlerin aynısı olduğu varsayılabilir. Bu, DOM olayları için geçerlidir ancak eşzamansız görevlerin sonlandırılması için geçerli değildir. Her şeyden önce burada bir araya geldiler OnPush Geçmişte manuel yürütme gerektiren sorunlar yaşanmıştı markForCheck gerektirebilir.
Angular 18'den itibaren Zone.js'nin çalışıp çalışmaması hiçbir fark yaratmaz. markForCheck değişiklik izlemeyi her zaman etkinleştirin. Bu davranış, özelliği etkileyen son derece önemli bir değişikliği temsil eder provideZoneChangeDetection({ ignoreChangesOutsideZone: true }) devre dışı bırakabilir.
provideZoneChangeDetection() bu standarttır. Yani, Zone.js ve markForCheck değişiklik izlemeyi etkinleştirin. Artık iki tetikleyici olduğundan Angular ekibi buna hibrit mod adını veriyor.
Ancak değişiklik takibi eşzamansız olarak yapıldığından iki kez yapılmaz. Eşzamanlı olarak birden çok kez talep edilebilir, ancak yine yalnızca bir kez çalışır.
Zone.js'nin bir geri dönüş olduğu hibrit mod, uygulama kodunuzu güvenli bir şekilde bölgesiz hale dönüştürme olanağı sunar. Bileşenleri birlikte gönderilen bir uygulama OnPush Bölgesiz kullanım için en iyi koşullarla donatılmıştır. Bunun nedeni şu ki OnPush DOM'daki değişikliklerin görülebilmesi için bileşenlerin “kirli” olarak işaretlenmesi gerekir.
Ancak, Zone.js'yi devre dışı bırakmak şu an için mümkün değil çünkü kullanılan tüm üçüncü taraf kütüphanelerin öncelikle dahili olarak Zone.js'siz hayata hazırlanması gerekiyor.
Neden bölge yok?
Bölgeleri olmayan bir uygulamada yalnızca değişiklik algılama çalışır markForCheck(), yani bir bileşende gerçekten bir değişiklik olmuşsa ve bu nedenle bir DOM güncellemesi gerekliyse. Bunun sonucunda üç avantaj elde edilir.
Öncelikle artık DOM'u güncellemeden değişiklik takibi yapmanıza gerek yok. Bu nedenle bölge içermeyen yaklaşım, önemli ölçüde daha yüksek performanslı uygulamalara olanak tanır. İkincisi, Zone.js kitaplığının kaldırılmasıyla başlangıçtaki JavaScript paketi küçülür. Optimize edilmiş bir yapıyla fark 35 kByte civarındadır. Üçüncü avantaj, kullandığı kodun derlenmesinde bulunabilir. async/await ırk. Zone.js yalnızca eşzamansız görevleri izleyebilir. Promise işlev. Bu nedenle asla doğal olarak yapamazsınız async/await teslim etmek. Bu da artık tarih oldu.
Haberin Sonu
Duyuru
Rainer Hahnekamp, AngularArchitects.io uzman ağının eğitmeni ve danışmanıdır ve Angular'ın tüm yönleriyle ilgili eğitimlerden sorumludur. Ayrıca YouTube'daki ng-news ile haftalık olarak Angular ortamındaki ilgili etkinliklere kısa bir genel bakış sağlar.
Angular 18'de bölgesiz işlevsellik
Her ön uç çerçevesinin, tarayıcıdaki uygulama durumunu güncellemek için halk dilinde oluşturma olarak bilinen bir mekanizmaya ihtiyacı vardır. React'in sanal DOM'si var, Angular sözde değişiklik izlemeyi kullanıyor.
Değişiklik takibini başlatmak için bir tetikleyiciye ihtiyacınız var. Angular 18'den önce konu her zaman bir olay dinleyicisi ve eşzamansız görevlerin sonlandırılmasını içeren DOM olaylarıyla ilgiliydi. Zone.js kitaplığı bu iki tür olayı izler ve her zaman değişiklik izlemeyi tetikler. Eşzamansız çalışır ve DOM'u buna göre günceller. Bunu yapmak için Zone.js'nin tarayıcının büyük bir kısmına yama yapması gerekiyor. Zone.js bağımsız bir kütüphane olmasına rağmen Angular'ın çekirdeğidir ve bu nedenle en başından beri kullanılır. Bu noktada olay türleri bir DOM olayını ve eşzamansız bir görevin sonucunu belirtir. Zone.js kitaplığı için, bir DOM olayına ek olarak, DOM olayında kod yürüten ilişkili bir olay dinleyicisinin de olması gerekir.
Değişiklik tespiti için tetikleyici
(Fotoğraf: Rainer Hahnekamp)
Adından da anlaşılacağı gibi bölgesiz, Zone.js'nin artık kullanılmadığı ve bu nedenle artık değişiklik izlemeyi tetiklemediği anlamına gelir. Zone.js'nin devre dışı bırakılması Angular 18'de hala deneyseldir. Komut provideExperimentalZonelessChangeDetection bölgeleri olmadan etkinleştirilir.
Arka plan: Ayrıntılı olarak OnPush yöntemi
Şimdi bunun yerine değişiklik tespitini neyin tetiklediği sorusu ortaya çıkıyor. Bu konuyla ilgili daha ayrıntılı bir açıklama şurada verilmiştir: OnPushgerekli yöntem.
OnPush Bu bir değişiklik izleme ayarıdır ve Angular'da yeni bir şey değildir. Angular uygulamasının performansını artırmanın standart bir yolu olarak kabul edilir ve birçok proje bunu varsayılan olarak kullanır.
Değişiklik izleme, bileşenlerdeki özellik değerlerini DOM'dakilerle karşılaştırarak DOM'u senkronize eder. Bileşende farklı bir değer görünürse DOM'daki ilgili konum otomatik olarak güncellenir.
Angular'da varsayılan değişiklik izleme
(Fotoğraf: Rainer Hahnekamp)
Değişiklik tespiti her bir bileşeni kontrol eder. Herhangi bir değişiklik gerektirmeyen birçok bileşenle karşılaşabilirsiniz. En kötü durumda her şey aynı kalır ve değişiklik tespiti boşuna yapılır ve kaynaklar israf edilir. Örneğin, bir olay dinleyicisi yalnızca bir tıklama olayına yanıt verebilir console.log Çalıştır: Değişiklik yok ancak değişiklik algılama hala çalışıyor.
OnPush bir bileşeni ve alt öğelerini değişiklik izlemenin dışında bırakan bir ayardır. Değişiklik izleme, dosyanın alt öğeleri de dahil olmak üzere yalnızca bu bileşeni denetler. OnPushbileşen “kirli”. Resmi olarak bu, bileşenin aşağıdakiler için bir işarete sahip olduğu anlamına gelir: checking.
OnPush ile algılamayı değiştirin
(Fotoğraf: Rainer Hahnekamp)
İşlev markForCheck() bu işareti ayarlayın.
Angular'da aşağıdaki dahili eylemler vardır markForCheck gerçekleştirmek:
- THE async– Modelde gözlemlenebilirler için boru kullanılmıştır.
- Bir ana bileşen özellik bağlamadan geçer (input() VEYA @Input) çocuğunuz için yeni bir nesne referansı.
- Manuel bir arama var markForCheck yerine.
- Bir modelde kullanılan sinyal yeni bir değer alır.
- Bileşendeki bir olay dinleyicisi çağrılır.
Sorun OnPush Bu çok nadiren değişiklik tespiti eksikliğinden kaynaklanıyordu, bunun yerine bileşen “kirli” olarak işaretlenmiyordu. Klasik örnekler, değişkenin değiştirilebilir değişikliklere sahip olduğu özellik bağlamalarıydı. Bu nedenle nesneye yeni bir başvuru oluşturulmadı.
Orada markForCheck İLE OnPush zaten her zaman değişiklik tespitinin başlaması anlamına geliyordu, bu aynı zamanda Angular 18 için de geçerli: markForCheck Yalnızca bileşeni “kirli” olarak işaretlemekle kalmaz, aynı zamanda (zone.js gibi) değişiklik izlemeyi eşzamansız olarak tetikler.
Geçici bir çözüm olarak hibrit mod
Bunların temelde Zone.js'nin zaten karşıladığı kriterlerin aynısı olduğu varsayılabilir. Bu, DOM olayları için geçerlidir ancak eşzamansız görevlerin sonlandırılması için geçerli değildir. Her şeyden önce burada bir araya geldiler OnPush Geçmişte manuel yürütme gerektiren sorunlar yaşanmıştı markForCheck gerektirebilir.
Angular 18'den itibaren Zone.js'nin çalışıp çalışmaması hiçbir fark yaratmaz. markForCheck değişiklik izlemeyi her zaman etkinleştirin. Bu davranış, özelliği etkileyen son derece önemli bir değişikliği temsil eder provideZoneChangeDetection({ ignoreChangesOutsideZone: true }) devre dışı bırakabilir.
provideZoneChangeDetection() bu standarttır. Yani, Zone.js ve markForCheck değişiklik izlemeyi etkinleştirin. Artık iki tetikleyici olduğundan Angular ekibi buna hibrit mod adını veriyor.
Ancak değişiklik takibi eşzamansız olarak yapıldığından iki kez yapılmaz. Eşzamanlı olarak birden çok kez talep edilebilir, ancak yine yalnızca bir kez çalışır.
Zone.js'nin bir geri dönüş olduğu hibrit mod, uygulama kodunuzu güvenli bir şekilde bölgesiz hale dönüştürme olanağı sunar. Bileşenleri birlikte gönderilen bir uygulama OnPush Bölgesiz kullanım için en iyi koşullarla donatılmıştır. Bunun nedeni şu ki OnPush DOM'daki değişikliklerin görülebilmesi için bileşenlerin “kirli” olarak işaretlenmesi gerekir.
Ancak, Zone.js'yi devre dışı bırakmak şu an için mümkün değil çünkü kullanılan tüm üçüncü taraf kütüphanelerin öncelikle dahili olarak Zone.js'siz hayata hazırlanması gerekiyor.
Neden bölge yok?
Bölgeleri olmayan bir uygulamada yalnızca değişiklik algılama çalışır markForCheck(), yani bir bileşende gerçekten bir değişiklik olmuşsa ve bu nedenle bir DOM güncellemesi gerekliyse. Bunun sonucunda üç avantaj elde edilir.
Öncelikle artık DOM'u güncellemeden değişiklik takibi yapmanıza gerek yok. Bu nedenle bölge içermeyen yaklaşım, önemli ölçüde daha yüksek performanslı uygulamalara olanak tanır. İkincisi, Zone.js kitaplığının kaldırılmasıyla başlangıçtaki JavaScript paketi küçülür. Optimize edilmiş bir yapıyla fark 35 kByte civarındadır. Üçüncü avantaj, kullandığı kodun derlenmesinde bulunabilir. async/await ırk. Zone.js yalnızca eşzamansız görevleri izleyebilir. Promise işlev. Bu nedenle asla doğal olarak yapamazsınız async/await teslim etmek. Bu da artık tarih oldu.
Haberin Sonu