Angular 10'daki yenilikler neler? Neler değişti?

Merhaba, Angular 10.0.0 versiyonu dün yayınlandı. Hatırlarsanız Angular 9 güncellemesinde, Angular ekibi son 3 yılda yapılan en büyük güncelleme olduğunu söylemişlerdi. Bu versiyonda yapılan değişiklikler ise genel olarak Angular’ı güncel tutma adına yapılmış gibi görünüyor. Zaten yılda 2 ana sürüm yayınlanıyor ve bunun sebebi Angular’ın güncel kalması.



Angular 10 ile neler geldi?


Yeni tarih aralığı seçici

Angular Material’de kullanabileceğimiz yeni bir tarih aralığı seçici. mat-date-range-input ve mat-date-range-picker bileşenleri ile kullanabileceğiz.



CommonJS içe aktarımıyla ile ilgili uyarılar

CommonJS ile paketlenmiş bir bağımlılıklar daha yavaş uygulamalara neden olabilir. 

Angular 10 ile beraber derleme sırasında bu paketler algılandığında uyarı veriyor. 



İsteğe bağlı daha katı ayarlar - Strict mode

Yeni proje oluştururken kullanacağımız —strict bayrağı, daha katı bir proje kurulumu sağlar. Yani sürdürülebilirliği artıran, hataları önceden yakalamanıza yardımcı olan ve CLI’ın uygulamanızda gelişmiş optimizasyonlar gerçekleştirmesine izin veren bazı ayarlamalar ile başlatır. Özetle şunları yapar;

  • TypeScript’te katı modu etkinleştirir,
  • Şablon türü denetimini Sıkı olarak değiştirir,
  • Varsayılan paket boyutlarını ~%75 azaltıldı,
  • “any” tipindeki bildirimleri önlemek için tslint kurallarını yapılandırır,
  • Daha gelişmiş tree-shaking (kullanılmayan kodun kaldırılması) sağlamak için uygulamanızı side-effect-free olarak işaretler.


Ayrıca, bu daha katı ayarları kullanan uygulamaların statik olarak analiz edilmesi daha kolaydır. Bu da Angular’ın gelecekteki sürümlerine güncelleme yaparken ng update komutunu daha güvenli ve hassas bir şekilde güncellemesine yardımcı olur.



Ekosistemle güncel kalın

JavaScript ekosistemiyle senkronize kalmak için Angular bağımlılıklarında güncellemeler yapıldı. Bunlar;

  • TypeScript 3.9 desteği,
  • TSLib v2.0 olarak güncellendi,
  • TSLint v6 olarak güncellendi,


Angular 10 ile beraber yeni bir tsconfig.base.json dosyasıda geliyor. Bu dosya IDE’lerin ve derleme araçlarının tür ve paket yapılandırmalarını çözme biçimini daha iyi destekler.



Yeni Varsayılan Tarayıcı Yapılandırması

Eski ve daha az kullanılan tarayıcıları hariç tutmak için yeni projelerin tarayıcı yapılandırması güncellendi.


v9 varsayılanları;


v10 varsayılanları; 


Bu, yeni projeler için varsayılan olarak ES5 yapılarını devredışı bırakma yan etkisine sahiptir. ES5 yapılarını ve bunu gerektiren differential loading etkinleştirmek için (IE veya UC Browser gibi) .browserslistrc dosyasına bu tarayıcıları eklemeniz yeterlidir.



Kullanımdan Kaldırılanlar

Angular paket biçimi artık ESM5 veya FESM5 paketlerini içermez. Angular paketler ve kütüphaneler için yarn veya npm install komutu çalıştırdığınızda 119 MB indirme ve yükleme süresi kazandırır. Bu formatlar artık ES5’in derleme sürecinin sonunda yapılır.


IE 9, IE 10 ve Internet Explorer Mobile’da dahil olmak üzere eski tarayıcılar için artık destek verilmiyor.


Kullanımdan kaldırma işlemleriyle ilgili daha fazla bilgiye şuradan ulaşabilirsiniz.



Angular 10’a güncelleme

Son olarak gelelim projelerimizi Angular 10’a nasıl güncelleyeceğimize. 


ng update @angular/cli @angular/core


Bu komut ile projemizi güncelleyebiliriz. Ancak mevcut projeniz Angular 9’dan daha eski bir sürümde ise güncellemenizi sürüm sürüm yapmanız gerekebilir. Örnek vermek gerekirse mevcut projeniz Angular 7 ise ve 10’a güncellemek istiyorsanız, önce 8’e sonra 9’a ondan sonra 10’a güncellerseniz daha sorunsuz bir geçiş yaparsınız. Yoksa epey hatalarla boğuşabilirsiniz. 


Güncelleme işlemleriyle ilgili daha detaylı bilgileri update.angular.io adresine bakabilirsiniz. 




Kaynaklar;

https://blog.angular.io/version-10-of-angular-now-available-78960babd41

https://github.com/angular/angular/blob/master/CHANGELOG.md

https://angular.io/guide/strict-mode




Bir sonraki yeni Angular versiyonu yazısında görüşmek üzere :)

Mehmet Sert

HTML, CSS, Javascript ve Angular konularında tecrübe edinmiş ve Bursa'da Frontend Developer olarak bir firmada görev almaktayım. Yeni teknolojilere meraklıyım, öğrendiklerimi uygulayarak ve anlatarak pekiştirmeyi seviyorum....

"Angular 10'daki yenilikler neler? Neler değişti?" için 1 yorum yapıldı.
L.U
Lütfullah U 26 Haziran 2020

Biz developer arkadaşlarını güncel tuttuğun için teşekkür ederiz.

Yorum yap * E-posta adresiniz yayınlanmayacak.