Angular 17'deki Son Gelişmeler: Bilmeniz Gereken Her Şey

Statista tarafından yürütülen araştırmaya göre Angular, ankete katılanların %17,46'sı tarafından en çok kullanılan web geliştirme çerçevesidir ^[i] . Bu konumu korumak, performansı artırmak ve kodlamayı basitleştirmek için Angular ekibi, 11 Eylül 2023'te yeni sürümü olan Angular 17'yi yayınladı.

Yenilenen Angular çerçevesi, Google Mühendislik Direktörü ve Angular ekibinin başkanı Sarah Drashner'ın vizyonuyla yönlendiriliyor. Ön uç çerçevelerdeki en son trendlerle uyum sağlarken geriye dönük uyumluluk sağlayarak artan iyileştirmeler sağlar.

Angular 17 ile işletmeler ve geliştiriciler gelişmiş bir geliştirme deneyiminin resmini çizebilirler. Burada, yeni kontrol akışı sözdizimi, iyileştirilmiş Sunucu Tarafı İşleme (SSR) desteği, esbuild tarafından desteklenen bir CLI ve diğer güncellemeler, daha sorunsuz ve daha dinamik bir geliştirme iş akışına katkıda bulunur.

Bu blog yazısında Angular 17 web geliştirme çerçevesindeki yeni iyileştirmelerin ve güncellemelerin kodunu çözebilirsiniz. Ayrıca geliştiricilerin işbirliğini kolaylaştırmak, kodun yeniden kullanılabilirliğini teşvik etmek ve ölçeklenebilir ve bakımı yapılabilir web uygulamalarının oluşturulmasını sağlamak için neden bundan yararlanması gerektiğini de anlayacaksınız.

Hadi başlayalım!

Angular 17'deki Temel Özellikler ve İyileştirmeler

1. Geleceğe Yönelik Dokümantasyon

Angular 17, angular.dev'de yeni bir evin geliştirilmesiyle belgelerine önemli bir iyileştirme getiriyor. Bu revizyon, yenilenmiş bir yapı, güncellenmiş kılavuzlar, zenginleştirilmiş içerik ve Açısal ve Açısal Komut Satırı Arayüzü (CLI) için etkileşimli bir öğrenme yolculuğunu teşvik eden son teknoloji ürünü bir platform içerir.

angular.dev'in beta önizlemesi, onu sürüm 18'de Angular için varsayılan web sitesi haline getirme planlarıyla birlikte yeni bir dönemin başlangıcını işaret ediyor. Bu öne çıkan özellik, kullanıcıların Angular CLI'nin gücünden doğrudan modern bir web tarayıcısı içinde yararlanmasına olanak tanıyan WebContainers'ı içeriyor. Bu ayrıca geleceğe dönük ve sürükleyici bir dokümantasyon deneyimi vaat ediyor.

2. Dahili Kontrol Akışı

Angular 17'de dikkate değer bir gelişme, *ngIf, *ngFor ve *ngSwitch gibi geleneksel yapısal direktiflerin yerine yeni kontrol bloğu sözdiziminin getirilmesidir. Bu evrim, geliştiricilere şablon kodunda daha fazla esneklik ve gelişmiş okunabilirlik sağlar.

Örneğin, @if ve @else blokları, mantıksal ifadeleri kullanarak içeriği koşullu olarak işlemek için daha temiz bir yol sağlar. @for bloğu, koleksiyonlar üzerinde yinelemeyi basitleştirerek daha anlamlı ve özlü kod sağlar. Ek olarak @switch, @case ve @default blokları verimli kontrol akışını kolaylaştırarak birden fazla koşulun ele alınmasını geliştirir.

Bu iyileştirmeleri benimsemek için geliştiriciler, sağlanan şemayı kullanarak mevcut şablonları taşıyabilir. Bu, Angular 17'de şablon geliştirmeye daha modern ve akıcı bir yaklaşıma yol açacaktır.

3. Dahili @for Döngüsü

Angular 17'deki yerleşik @for döngüsü özelliği, hem geliştirici deneyiminde hem de oluşturma hızında önemli bir gelişme olduğunu göstermektedir. Bu sözdizimi, etkili değişiklik tespiti için "iz" kullanımını zorunlu kılarak *ngFor'a dayanan uygulamalarda görülen yaygın performans darboğazını giderir. Ayrıca daha hızlı bir render süreci sağlar.

Önceki modelden farklı olarak "izleme" işlevi şablona bir ifade olarak sorunsuz bir şekilde dahil edilmiştir ve bileşenin sınıfında ek bir yönteme olan ihtiyacı ortadan kaldırmaktadır. Özellikle yerleşik @for döngüsü, isteğe bağlı bir @empty bloğu aracılığıyla sıfır öğeli koleksiyonları işlemek için kullanışlı bir kısayol da sağlar. Bu özellik yalnızca geliştirmeyi kolaylaştırmakla kalmaz, aynı zamanda Angular uygulamalarının performansını da önemli ölçüde artırarak çerçevenin evriminde dikkate değer bir kilometre taşıdır.

4. Ertelenebilir Görünümler

Angular 17'de, Angular topluluğunun bileşenleri, direktifleri ve kanalları tembel yüklemek için sezgisel bir mekanizma talebine yanıt olarak Ertelenebilir Görünümler adı verilen önemli bir geliştirme tanıtıldı.

Bu yeni özellik, bağımlılıkların ertelenmiş yükleme sürecini daha sezgisel ve kullanışlı hale getirmeyi amaçlamaktadır. Ertelenebilir Görünümler, geliştiricilerin şablonlarının bölümlerini gerekli olana kadar bildirimli olarak yavaş yüklemelerine olanak tanıyarak, başlangıç ​​paket boyutunu optimize eder ve uygulamanın başlangıç ​​yükleme süresini iyileştirir. Bu, şablonlarda yeni “@-sözdizimi” kontrol akışı sözdiziminin kullanılmasıyla elde edilir.

Ertelenebilir Görünümler, ertelenmiş yükleme için yerleşik ve yönetilen çözümler sunduğundan, geliştiriciler ayrıntılı dinamik içe aktarmaları, kesişim gözlemcilerini veya olay işleyicilerini yönetmeden niyetlerini ifade edebilirler. Bu özellik aynı zamanda daha hızlı kaynak kullanılabilirliği için önceden getirmeyi de destekler.

Ayrıca geliştiriciler, ertelenmiş yüklemenin ne zaman ve nasıl gerçekleşeceğini belirtmek için entegre tetikleyicileri ve özel koşulları kullanabilir. Ek olarak, Ertelenebilir Görünümler standart kodu azaltır ve bağımlılık yönetimini arka planda otomatik olarak yönetir.

5. Gelişmiş Sunucu Tarafı İşleme (SSR)

Angular 17'nin sunucu tarafı oluşturma yetenekleri, geliştiricilerin uygulama performansını ve kullanıcı deneyimini yükseltmesine olanak tanır. Hydration Boost özelliği, istemci tarafı JavaScript nemlendirme sürecini düzene sokarak titremeyi en aza indirir ve etkileşimli web sayfalarına daha sorunsuz bir geçiş sağlar.

Angular 17 ayrıca SSR için standartlaştırılmış EcmaScript Modülleri (ESM) formatını benimseyerek yapıları basitleştirir ve popüler araçlarla uyumluluğu artırır. Ek olarak, kod bölme teknikleri yoluyla SSR paket boyutlarını azaltmaya odaklanarak daha hızlı sunucu yanıtları ve gelişmiş arama motoru optimizasyonu sağlar. Bu gelişmeler, Angular 17'yi yüksek performanslı ve SEO dostu web uygulamaları oluşturmak için cazip bir seçim olarak konumlandırıyor.

6. Kararlı Sinyal

Angular 17, reaktivite meraklıları için çok önemli bir araç olan Sinyallerin stabilizasyonuyla çığır açan bir gelişme sunuyor. "Geliştirici önizlemesi" etiketini ortadan kaldıran Signals, artık durumu yönetmek ve bileşen güncellemelerini kolaylaştırmak için güçlü bir çözüm olarak duruyor.

Sinyallerin Change Detection.OnPush ile entegrasyonu bir düzeyde hassasiyet sağlar. Bu, bileşenlerin yalnızca belirli sinyalleri değiştiğinde yenilenmesini sağlar ve gereksiz yeniden oluşturmaları önleyerek performansı optimize eder. Mutasyon yönteminin, değişmez güncellemeler lehine kullanımdan kaldırılması, durum geçmişinin korunmasında öngörülebilirliği ve temizliği daha da artırır. Signals ön plana çıkarken, hala geliştirici ön izleme aşamasında olan Effects, eşzamansız işlemler için güçlü yetenekler sunarak Angular'ın durum yönetiminin geleceğine bir bakış sağlıyor.

Angular 17 özünde geliştiricilere kararlı Sinyaller, OnPush entegrasyonu, değişmez güncellemeler ve Etkilerin gelişen potansiyeli dahil olmak üzere geliştirilmiş bir araç seti sağlar. Bu sonuçta iyi yapılandırılmış uygulamaların oluşturulmasını teşvik eder.

7. esbuild ile Performans Oluşturma

Angular 17'de esbuild'in benimsenmesi, Angular projelerinin yapı performansını artırmada önemli bir adıma işaret ediyor. Başlangıçta Webpack'e dayanan Angular CLI, haftalık 20.000'den fazla indirmeyle övünen, kullanıcı dostu yapısı ve olağanüstü hızıyla tanınan daha yeni bir araç olan esbuild'den yararlanmaya geçti.

Esbuild'in entegrasyonu, geliştirici önizlemesi olarak Angular 16'da uygulandı ve artık Angular 17'de kararlı bir uygulamaya dönüştü. Bu entegrasyon, Uygulama Oluşturucu aracılığıyla yeni projeler için varsayılan oluşturucu haline geldi. Mevcut projeler için geliştiricilerin, angular.json'daki oluşturucu girişini güncelleyerek esbuild'e geçmeyi düşünmeleri önerilir.

Bu entegrasyonla, hem ng serve hem de ng build işlemleri, yalnızca gerektiğinde verimli npm paket oluşturma için Vite dev sunucusundan yararlanarak, hızda önemli bir artış sergiliyor. CLI ekibinin çeşitli performans optimizasyonlarını bir araya getirmesi, derleme sürecinin genellikle 2 ile 4 arası bir hız artışı sağlamasıyla, hızlandırılmış bir derleme sürecine daha fazla katkıda bulunur. Bu geçiş, Angular'ın geliştiricilere yalnızca iş akışlarını basitleştirmekle kalmayıp aynı zamanda proje oluşturma verimliliğini önemli ölçüde artıran araçlar sağlama konusundaki kararlılığının altını çiziyor.

8. Bağımsız Bileşenler

"Bağımsız bileşenler", Angular 17'de ana modüle ihtiyaç duymadan bileşenlerin oluşturulmasını ve kullanılmasını sağlayan çığır açan bir özelliktir. Bu paradigma değişikliğinde, "AppComponent" ile örneklenen kök bileşen, bileşen dekoratöründeki "standalone: ​​true" özelliği kullanılarak bağımsız olarak işaretlenir. Bu özellik, bileşenin bir üst modülden bağımsız olarak çalıştığını belirtir. Ayrıca bileşen, bir modüle güvenmek yerine, yönlendirici modülü gibi gerekli bağımlılıkları getirmek için "içe aktarma" dizisini kullanır.

Daha sonra uygulamayı başlatmak için "bootstrapApplication" işlevi kullanılır ve bu, geleneksel NgModule merkezli yaklaşımdan bir sapmayı gösterir. Bağımsız bileşenlerin yeni keşfedilen esnekliği, modüler ve kapsüllenmiş bir geliştirme stilini kolaylaştırarak Angular'ın bileşen mimarisini geliştirmeye ve geliştirmeye olan bağlılığını ortaya koyuyor.

Angular 17'ye Nasıl Geçilir?

Mevcut Angular uygulamanızı sürüm 17'ye yükseltmek için şu adımları izleyin:

• İlk olarak, 'npm install -g @angular/cli@17' komutunu kullanarak Angular CLI'nizi genel olarak sürüm 17'ye güncelleyin.

• Daha sonra 'ng update @angular/core' komutunu çalıştırarak Angular çekirdek paketlerinizi güncelleyin.

• Ek Angular paketleri kullanıyorsanız, Angular Material için 'ng update @angular/material' gibi bir kod kullanarak bunları ayrı ayrı güncelleyin.

• Ardından, güncellemelerden sonra beklendiği gibi çalıştığından emin olmak için uygulamanızı kapsamlı bir şekilde test edin.

Burada izleyebileceğiniz bazı ipuçları arasında büyük güncellemeler arasında küçük sürümlere yükseltme, yükseltme işleminden önce kodunuzu ve veritabanınızı yedekleme ve üçüncü taraf kitaplık uyumluluğunu kontrol etme yer alır. Yükseltme işlemi sırasında sorunlar ortaya çıkarsa yardım için Angular belgelerine ve topluluk forumlarına da başvurmalısınız. Bu basitleştirilmiş adımlar, olası zorlukları en aza indirirken en son Angular sürümüne sorunsuz bir geçiş sağlayacaktır.

Angular ile Sağlam, Zengin Özellikli ve Modern Uygulamalar Oluşturmaya Hazır mısınız? Uzmanlarımızla Konuşun!

Referanslar:

^[i] Statista