Angular 16: Angular’ın ilk uygulanmasından bu yana en büyük sürüm
Angular ekibi, Angular 2’nin piyasaya sürülmesinden bu yana JavaScript çerçevesinin en büyük sürümü olan, merakla beklenen Angular 16’yı yayınladı. Angular Momentum girişiminin bir parçası olarak, geliştirici deneyimini daha da geliştirmeyi ve yeni özelliklerin uygulanmasını hızlandırmayı hedefliyor. İlk adım, Angular uygulamalarında yanıt vermeyi kolaylaştırmaktır çünkü sinyallerin temel bir özellik olarak tanıtılması, Angular’da değişiklik izlemede devrim yaratır.
Açısal 16, daha kolay yanıt vermeyi işaret eder
Önceden Angular, değişiklik takibi sağlamak için zone.js’ye güvenmek zorundaydı. Ancak bu çözüm temiz bir şekilde ölçeklenmedi ve büyük uygulamalarda verimli bir şekilde çalışmak için birçok küçük performans korsanlığı gerektirdi. Angular 16 ile zone.js isteğe bağlı bir bağımlılık haline gelirken, Signals reaktif ilkel dediğimiz şeyi sunar: signal, computed VE effect:
- signal bir değişkenin eşdeğeridir ve bir sınıf özelliğine veya gözlemlenebilir bir değere benzer bir değişken değeri tanımlar. of('value').
- computed değerini diğer sinyallerden alan bileşik veya hesaplanmış bir değerdir. İle computed bir değerin ne zaman yeniden hesaplanması gerektiğini açıkça tanımlayabilirsiniz, bu da size klasik Açısal enterpolasyonlu değerlere göre belirleyici bir performans avantajı sağlar.
- effect bağımlılıklar değiştiğinde çalışan bir işlevi belirtir. Bu, efekt içinde kullanılan sinyal değerleri anlamına gelir. Geliştiricilerin, sinyallerin değerindeki değişikliklere kolayca ve rahat bir şekilde tepki vermelerini sağlar. Hem ilkel sinyaller hem de hesaplanan sinyaller dikkate alınır. Geçişli bağımlılık tespiti otomatik olarak yapıldığından, geliştiricilerin bu değerleri yönetme konusunda endişelenmesine gerek yoktur.
RxJS ile geriye dönük uyumluluk ve etkileşim
Signals’ın tam olarak uygulanmasının bu yılın sonuna kadar beklenmemesine rağmen, geliştiriciler artık özelliği @angular/core veya @angular/core/rxjs-interop aracılığıyla kullanabilirler. Gelecekteki planlar, Sinyaller üzerinde çalışan yaşam döngüsü kancalarının düzene sokulmasını da içerir.
gibi önceden tanımlanmış işlevler toSignal VE toObservable, gözlemlenebilirlere ve gözlemlenebilirlerden dönüştürmeye izin verir. Ayrıca, yeni takeUntilDestroyed-Açısal uygulamalarda kaynak yönetimini basitleştiren bileşenlerdeki gözlemlenebilirleri temizlemek için operatör.
Bir sonraki kursta Angular ekibi, diğer arayüzleri de yeni Signals API’ye dönüştürmeyi planlıyor. Örneğin, bileşen girdileri ve bileşen yaşam döngüsü kancalarının dönüştürülmesi gerekir.
Organizatörler 21 ve 22 Haziran 2023’te karar verecek dpunkt.verlag, Haberler geliştiricisi VE iX Darmstadt’taki enterJS kurumsal JavaScript konferansı. JavaScript ve TypeScript dilindeki yenilikler, React, SvelteKit ve Astro dahil olmak üzere yeni ve yerleşik araçlar ve çerçevelerin yanı sıra erişilebilirlik ve yazılım mimarisi 35’ten fazla derste tartışılacak.
Tam gün atölyeler hem yerinde hem de çevrimiçi olarak mevcuttur.
Programdan alıntı:
Angular Universal ile Sunucu Tarafında Oluşturma
Angular Universal artık elden geçirilmiş bir sunucu tarafı işleme için bir geliştirici önizlemesi sunuyor. Önemli bir yenilik, “Tam Uygulama Tahribatsız Hidrasyon”un kullanıma sunulmasıdır. Hidrasyon gerçekleşir gerçekleşmez DOM’nin yeniden işlendiği önceki yaklaşımların aksine, çerçeve artık dahili veri yapıları oluşturulurken DOM düğümlerinin var olup olmadığını kontrol ediyor. Ardından bu düğümleri uygun olay dinleyicileriyle ilişkilendirin. Bu özelliği kullanmak için özelliği etkinleştirmeniz gerekir. provideClientHydration() sağlayıcılar dizisine dahil edin.
Bu yaklaşım, Angular uygulaması kullanıcıları için çeşitli avantajlar sağlar:
- Uygulama yükleme işlemi sırasında artık titreme yok
- Web Core Vitals’ta iyileştirilmiş performans
- Mevcut uygulamalara kolay entegrasyon, daha yüksek benimseme oranlarına yol açar
- Dönüşüm aşamalı olarak uygulanabilir. İle ngSkipHydrationniteliği, bileşenler gerekirse DOM’u manuel olarak manipüle edebilir.
Kısmi hidrasyon ve devam ettirilebilirlik gibi daha fazla özelliği yakında takip edecek olan bu ilk adımlar, sunucu tarafı işlemenin geleceğinin başlangıcını işaretlemeyi amaçlıyor.
Angular artık açıkça Next.js gibi pazar rakiplerinin peşinde ve daha önce gözden kaçan bir konuyu gerçek bir özelliğe dönüştürüyor.
Bağımsız API uzantısı
Angular 16, modüllerin ve bileşenlerin geçişini basitleştirmek için bağımsız API’leri genişletir. Yeni şemalar mevcut kodu dönüştürür, gereksiz NgModule’ları kaldırır ve bağımsız API’leri temel alan uygulama önyüklemesini değiştirir.
İhtiyacınız olan tek şey, projede tek bir komuttur:
ng generate @angular/core:standalone
Yeni projeler için Angular 16, bağımsız bileşenlerle doğrudan basitleştirilmiş bir yapı oluşturma imkanı sunar. komut ile ng new --standalone geliştiriciler, halihazırda bağımsız API’leri temel alan yeni bir proje oluşturabilir. Bu, Angular projelerine başlamayı kolaylaştırır ve daha verimli bir proje yapısı sağlar.
Angular 16’da geliştirilmiş araçlar
Angular 16, araçlar alanında bazı heyecan verici yeni özelliklere ve iyileştirmelere sahiptir:
Bu, Screw ve Exbuild’i birleştiren yeni yapı araçlarının bir önizlemesini içerir. Webpack’in yerini alan Angular ekibi şimdi bu iki aracın kullanımını test ediyor. İlk testlerde esbuild, üretim yapılarının yapı performansında %72’lik bir gelişme gösterdi. Esbuild on esbuild gibi asma da zenginleştirir ng serve bu performans kazancı ile. Angular CLI’de Vine, tüm derlemeyi içine eşlemek yerine yalnızca bir geliştirme sunucusu olarak kullanılır.
Angular 16 ayrıca Jest ve Web Test Runner için deneysel destek sunar. Angular ekibine göre, Angular ve daha geniş JavaScript topluluğunun anketleri, Jest’i en popüler birim test araçları arasında gösteriyor. Geliştirme ekibi, Angular Language Service’i genişletti: artık şablonlarda otomatik tamamlama içe aktarmalarını kullanma olanağı sunuyor. Borular ve bileşenler artık doğrudan modelden içe aktarılabilir.
Ek olarak, Angular 16, ECMAScript dekoratörleri desteği, ngcc’siz ve bağımsız uygulamalarda hizmet çalışanları desteği dahil olmak üzere TypeScript 5.0’ı destekler.
Toplu olarak, Angular 16 araçlarındaki bu iyileştirmeler, daha iyi bir geliştirici deneyimine ve daha verimli iş akışlarına katkıda bulunur.
Geliştirici deneyimi için yenilikler
Ek olarak, Angular 16, geliştirici deneyimini daha da kolaylaştıran bir dizi yenilik ve iyileştirme getiriyor:
yönlendiriciler
İlk kez, bir bileşenin girişlerini doğrudan rota konfigürasyonunda yönlendirmek artık mümkün. Bu, dosyadaki değerleri saklamanıza izin verir. resolve– rota çağrıldıktan sonra doğrudan kullanılabilen bir rotanın özellikleri.
Gerekli girdiler
Geliştiriciler artık girişi şu şekilde gönderme olanağına sahiptir: required işaret. Sonuç olarak, bir bileşen yalnızca gerekli girdileri karşılıyorsa kullanılabilir. Bu adım özellikle bileşen kitaplıkları ve büyük geliştirme ekipleri için kod kalitesini ve sürdürülebilirliği iyileştirmek için kullanışlıdır.
OnDestroy’da temizleme mantığının daha esnek kullanımı
enjekte edilebilir tanıtımı ile DestroyRef geliştiriciler, Angular uygulamalarında kaynak yönetimini geliştiren bileşenlerde temizleme mantığını kaydetmede daha esnek olabilir.
kendiliğinden kapanan etiketler
Diğer bir yenilik ise bileşen seçiciler için kendi kendine kapanan etiketlerin tanıtılmasıdır. Sonuç olarak, etiketlerin artık iki kez yazılmasına gerek yoktur, otomatik olarak kapanacak şekilde tasarlanabilir.
Geliştirme ekibi, bir blog gönderisinde Angular 16’nın yeni özelliklerini sunuyor. Daha fazla ayrıntı GitHub deposunda bulunabilir.
(Mayıs)
Haberin Sonu