Son zamanlarda Angular, Zone.js adlı bağımsız bir "deneyimsel" geliştirme özelliği yayınladı. Özellik hâlâ deneysel olsa da, Angular ekibi uzun süredir bu önemli yenilik üzerinde çalışıyor. Duyarlı ilkel sistemler geliştiriciler için giderek daha önemli hale geliyor ve bu da Angular'ın yeni bir döneme girdiğini gösteriyor. Açısal bağımlılıklarSignals ve Rxj'lerin avantajları daha da belirgin; bu da Zone.js bağlı olan değişiklikleri sürekli dinleme ihtiyacını ortadan kaldırıyorve geliştirme sırasında aracı olarak görev yaptı.
Angular gelecekte cesur ve güçlü bir çerçeve olmaya devam edecek ve yeni bir dönüşüm başlatacak.
Öncelikle, makalem kimseye bir şey öğretmek için tasarlanmamış. Umarım okuyucularım bu kadar pasif olmayı hak ettiklerini düşünmezler. Deneyimlerimi ve öğrendiklerimi olabildiğince paylaşmaya ve tartışmalara açık olmaya çalışıyorum. Birlikte tartışmak, fikir alışverişinde bulunmak ve eleştirel düşünceyle değerlendirme yapmak önemlidir. Unutmamak gerekir ki, bu makalede tartışılan teknolojiler hâlâ deneyimleniyorken, tam olarak nasıl çalıştıkları konusunda hâlâ bazı karışıklıklar var ve bence değişiklik tespit mekanizması bile Angular'daki çekirdek ekip arasında biraz kafa karışıklığına yol açabilir.
Zone.js nedir ve ne yapar?
Zone.js, Brian Ford tarafından 2010 yılında "Zones" adıyla geliştirilen ve JavaScript'te asenkron çalışmaları yönetmek için geliştirilen küçük bir kütüphanedir. Erlang ve Dart gibi dillerden ilham alan bu platform, JavaScript'in tek iş parçacıklı ortamına yapılandırılmış eşzamanlılık getirmeyi amaçlıyor. Angular ekibi, Angular 2'de Zones'u değişim tespit mekanizması olarak benimsediğinde ivme kazandı ve Angular ekibi Zone.js şeklinde katkıda bulunmaya başladı; böylece daha geniş topluluk katılımı ve gelişim sağlandı. Günümüzde, hâlâ Angular ile sıkı bağlantılı olmasına rağmen, Zone.js, asenkron görevleri izlemek ve müdahale etmek için güçlü bir araç olarak kabul edilebilir; performans analizi, hata yönetimi yetenekleri ve birçok tartışmalı işlevi mümkün kılar.
Peki Angular neden Zone.js'yi terk etti?
Yapay zekanın hayali görüntülerimizi zahmetsizce çizime dönüştürme yeteneğinden yararlanarak, "yatağın altındaki sünger" metaforunu kullanarak kolayca anlaşılan bir görsel yarattık.
Yukarıdaki görseldeki yatağı hayal edin; yatağın yere değil, büyük bir süngerin üzerine yerleştirilmiş. Zone.js, Angular uygulamasında sünger gibi. Bu sünger, yatağın rahat ve destekleyici bir taban üzerine oturmasını sağlarken, uyuyan kişiye göreceli konfor sağlar. Sünger, yatağın her hareketini emer ve yatağın içindeki hareketin dışarıya yansımasını engeller.
Zone.js içindeki maymun yamaları, tarayıcıdaki tüm asenkron API'leri dinler; örneğin: olaylar, taahhütler, gözlemlenebilirler, setTimeout, setInterval vb.
Bunları dinleyerek Angular uygulaması herhangi bir değişikliği algılayabilir ve böylece kullanıcı arayüzünü güncelleyebiliyor; tıpkı bir sünger destek yatağı gibi Zone.js Angular uygulamasının sorunsuz çalışmasını da sağlıyor. Bu durumda, çok büyük projelerde hissetmediğimiz performans sorunları ortaya çıkabilir.
Öte yandan, bu karmaşık yapı zaman içinde belirli belirli değişiklikleri algılamamızı engelliyor gibi görünüyor. Her önceki özellik ve gelişme, kendi iç gelişimi ve değişen ihtiyaçlarıyla birlikte, bir anda bir sonraki gelişime ve gelişime engel olur.
Süngeri altımızdan çektiğimizde, yatağın yere doğrudan temas halinde olması nedeniyle doğal hareket özgürlüğünün ortaya çıkmaya başladığını görüyoruz. Süngerin konforu kısıtlayan etkisi aşınmaya başladığında, yataktaki hareket artık doğrudan yere yansıyacaktır.
Böyle bir metafor, süngerin bir konfor alanı sağladığı ve nispeten daha rahat bir uyku sağladığı anlamına gelebilir. Zone.js bu sünger gibi, yüzeydeki her değişikliği hissetmemizi sağlayan ciddi bir konfor alanı sağlar. Ancak zamanla, bu karmaşık yapı bazı spesifik değişiklikleri algılamamızı engelleyebilir. Alt sırt ağrısı, süngeri altımızdan çektiğimizde ortaya çıkabilir ve bu ağrılar, sızlamalar ve sızılar yapay zeminden doğal zemine indiğimizi gösterir; bu geçiş deneyimi biraz acı verici olabilir, ancak nihayetinde düz bir alt sırt, daha rahat uyku ve daha iyi dolaşım, ayrıca daha sağlıklı fiziksel ve zihinsel keskinlikle birlikte. Bölgesiz bir yatakta uyumaktan kaynaklanan sırt ve eklem ağrısına geçtiğimizde, sünger olmadan yatmaktan kaynaklanan sırt ve eklem ağrısı, yapay topraktan doğal topraklara geçiş yaptığımızın iyi bir işaretidir. Bu geçiş deneyimi biraz acı verici olsa da, alt sırtımız eski doğal haline dönmeye başlayınca geçiş ağrısı da kaybolur ve dolaşımımızı iyileştirir; Buradaki geçiş örneği, Angular v18'de duyduğumuz deneysel Zoneless ile örtüşüyor.
Zone.js, asektron işlemlerini takip ettiği ve bunları çağrılar, olaylar, hatalar gibi açısal algılama mekanizmalarına ilettiği için ek yük eklediği düşünülmektedir. Bugün, Angular'ın performansı açısından burada ekstra yükü göremiyor ya da hissedemiyoruz. Zone.js daha da geliştirilebilir ve bazı hata ayıklama sorunları çözülebilir, ancak burada temel Angular'ın yol haritasıdır. Angular'ın kendi geliştirdiği Signals'ın ilkel tepki verdiği Zone.js artık Angular'ın gelecekteki planlarının önüne geçtiğini görüyoruz. Sinyal yapısı tespit mekanizmaları açısından çok faydalı ve performans açısından da iyi, kullanımı kolay ve güçlü olsa da, Zone.js artık gerekli değil, ancak bir gecede terk edilebilecek bir kütüphane değildir.
Angular'ın hayallerini sınırlamak istemediğini, bunun yerine ara süreçleri mümkün olduğunca ortadan kaldırarak daha esnek ve güvenilir bir uygulama ve kendi kendine yeterli bir çerçeve oluşturmak istediğini anlıyoruz. Angular'ın daha pratik bir duruma doğru ilerlediğini ve gelecekte tekrar yükseliş trendine girme fırsatını değerlendirmeye çalıştığını görüyoruz. Ne yazık ki, mevcut StateofJS anketine göre böyle bir eğilimde olduğunu söyleyemiyoruz, ancak Angular'ın tüm olası yeniliklere açık olduğunu da görüyoruz.
Angular 18'de Zoneless moduna nasıl geçerim?
Angular 18, bölgesiz moda geçmemizi ve süngerden kurtulmamızı sağlayan bir adımla geliyor. Aşağıda gösterildiği gibi, bu deneyimi artık bootstrap aşamasında bölgesiz değişim algılama mekanizmasını kullanarak sunabiliriz.
Yukarıdaki fonksiyon sağlayıcıya eklenince, artık npm uninstall zone.js komutunu kullanarak aşağıdaki polyfills dizisinde tanımlanan zone.js angular.json'den kaldırabiliriz.
Şimdi Angular Zoneless kullanabiliyoruz!
Zoneless'ın avantajları nelerdir?
Zoneless, gereksiz dinleme işlemlerini ortadan kaldırarak uygulamalarımız için daha akıcı bir ekosistem sağlar. Bu, daha hızlı render, daha yüksek performans, daha hızlı sayfa yüklemeleri, daha küçük paket boyutları ve daha kolay hata ayıklama anlamına gelir.
Klasik bir teste girin; bir düğmeye tıklayarak sayaç ekliyorsunuz ve düğmeye tıkladığınızda bu sayıyı artırmak istiyorsunuz. Bu durumda, her fonksiyon tetiklendiğinde değişen değerin render edildiğini ve bu değerin HTML'de değiştiğini görebiliriz. Çünkü zaten bir fonksiyon ve doğrudan tetikleniyoruz, burada render ediliyor. Ama bu değer dış etkiler nedeniyle değişirse ve biz bunu manuel tetiklemeden herhangi bir değer değişikliği görmek istersek ne olur? Bir Zone.js varsa, sürekli tüm değişiklikleri dinler ve Angular'ı bizim adımıza bilgilendirir. Ancak şu anda böyle bir mekanizma olmadığından, ya asenkron bir işlemden sonra değişim algılama mekanizmasını tetiklememiz ya da Signals veya RxJS doğrudan kullanmamız gerekiyor, böylece değişim bu tepkiye doğrudan tespit edilebilir.
Sponge'ın kayboluşu bize sadece Zone.js kaybolmanın değil, aynı zamanda "konfor alanı" olduğunu öğretiyor.
Zone.js'yi ham JavaScript ile bir modül olarak kullanırsak, böyle görünür.
Angular'da bu durumlarla uğraşmamıza gerek yok; ngZone ile bu işlemler zaten tespit mekanizmasıyla birlikte çalışıyor.
Örneğin, doğrudan DOM, olay dinleyicileri, gözlemlenebilirler ve taahhütler, HTTP talepleri ve senkron kontrol akışları durumunda, asenkron işlemler için değişim algılama mekanizmasını manuel olarak tetiklemeliyiz.
Sinyaller veya R xjs değişiklikleri otomatik olarak algıladığı için, değişim algılama mekanizmasını tetiklemeye gerek yoktur.
Sinyal örneği:
Şimdi Zoneless ve Angular değişim algılama mekanizmalarını test etmek için bir uygulama yazalım ve nasıl çalıştığını görelim.
Yukarıda tanımlanan aralık standart olarak başladıldıktan sonra, çalışmaya başladığını görürüz, ancak DOM yenilenmez ve değişiklikler yansıtılmaz. Sinyal başlatma aralığını kullandığımızda, Angular'ın değişim algılama mekanizmasını tetiklemeden çalıştığını görürüz. Gördüğünüz gibi, tıklama olayı ve sinyal aralığı başladığında, Angular değişikliği fark eder, hemen standart aralıktaki değişikliği yakalar ve sonra serbest bırakır.
Bir değişkendeki değeri ana bileşene gönderdiğimizde, hem push hem de varsayılan durumlarda farklı algılandığını görürüz.
Girdiyi sola bağladığımızda, alan olmadığında değişim yansıyır ve benzer şekilde, vaat nedeniyle tıkladıktan sonra değişimin yansıdığını görebiliyoruz.
Burada, algılama değişiklikleri olmadan yapılan bir HTTP çağrısından sonra, değişikliklerin yansımadığını, sadece manuel tetiklediğimizde olduğunu görüyoruz. Tabii ki, Signals kolayca yeni gelenleri istenen ekrana yansıtıyor. Bazı kodlar şunlardır:
app.component.ts
change-detection-demo.component.ts
Uygulama Stacklibitz'de yayınlandı ve diğer testlere göz atabilirsiniz. Ayrıca kullanıcı arayüzündeki sonuçları kod üzerinden takip edebilirsiniz.
Stackblitz:Bağlantı girişi görünür.
GitHub:Bağlantı girişi görünür.
Aşağıda ayrıca Angular'ın değişim algılama mekanizmasının nasıl çalıştığını gösteren örnek bir uygulama var, oradan da deneyebilirsiniz.
Bağlantı girişi görünür.
Bölgesiz moda geçerken dikkate alınması gerekenler
Adından da anlaşılacağı gibi, ExperimentalZonelessChangeDetection hâlâ deneysel olduğunu belirtmek önemlidir.
Biraz test yaparken, değişim algılama mekanizmasında bazı tuhaflıklar fark ettik. Örneğin, bazı değişiklikler manuel tetiklenmediğinde, DOM'da hiçbir değişiklik görmez ve durum yenilenmez. Ancak, başka bir sinyal veya reaksiyon değişkeni değişim algılama mekanizmasının dışında çalıştığında ve DOM'un yenilenmesine neden olduğunda, daha önce yenilenmemiş durumun da yenilendiğini gözlemleyebiliriz.
Bu özelliği mevcut bir projede uygulamak istiyorsanız, tüm eylemleri ve uygulama davranışlarını dikkatlice test etmelisiniz. Özellikle, üçüncü taraf kütüphaneler Zone.js kullanabilir ve bu da bazı hatalara ve render sorunlarına yol açabilir.
Özgün:Bağlantı girişi görünür. |
2024-12-30 11:02:42 tarihinde yayınlandı
|
|
|
|
Ev sahibi|
2024-12-30 11:04:13 tarihinde yayınlandı
|
