JavaScript Çerçevelerindeki Yenilikler (Mayıs 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani

JavaScript çerçeveleriyle ilgili gelişmelere ayak uydurmak zor olabilir. Bu belgede, JavaScript çerçeveleri ekosisteminde son bir yıl içinde yaşanan önemli gelişmeler kısaca özetlenmiştir. Bu konuların bazılarıyla ilgili daha uzun bir tartışma için bu yılki Google I/O etkinliğindeki ilgili JavaScript Çerçeveleri Ekosisteminde Gezinme konuşmasına göz atın.

Çerçeve özelliklerini karşılaştıran grafik

Grafikte gösterildiği gibi, JavaScript çerçeveleri benzer özelliklere ve mimarilere doğru yaklaşıyor. Bileşen tabanlı mimari, dosya tabanlı yönlendirme ve modern SSR desteği bunlardan bazılarıdır. Bu yakınlaşma, çerçeveler birbirinden bilgi edinip en iyi uygulamaları benimserken ekosistemin olgunluğunu ve evrimini gösterir.

Aynı zamanda, son zamanlardaki bazı trendler (ör. sunucu bileşenleri ve ayrıntılı tepkiye yönelik farklı yaklaşımlar) farklı çerçeveleri birbirinden ayırmaya devam ediyor. Bu trendleri daha iyi anlamanıza yardımcı olmak için bunları birer birer ele alıyoruz.

Angular

Angular'ın son sürümlerinde sinyaller, ertelenebilir görünümler, NgOptimizedImage, bozulmayan sulandırma ve kısmi sulandırma gibi çeşitli önemli değişiklikler yer aldı. Öne çıkan özelliklerden bazıları şunlardır:

  • Sinyaller: Sinyaller, bir uygulamadaki durumu izlemek için birden fazla çerçeve (Angular da dahil) tarafından kullanılan bir yaklaşımdır. Angular sinyalleri, değişiklik algılama sırasında yapılması gereken hesaplama sayısını azaltarak Interaction to Next Paint (INP) dahil olmak üzere çalışma zamanı performansını artırabilir.
  • Ertelenebilen görünümler: Ertelenebilen görünümler, belirli bileşenlerin, yönergelerin ve boruların yüklenmesini ertelemenizi sağlar. Örneğin, bir bağımlılığın yüklenmesini içerik görüntü alanına girene veya ana iş parçacığı boş olana kadar erteleyin.
  • NgOptimizedImage: NgOptimizedImage, resim yüklemeyle ilgili en iyi uygulamaların benimsenmesini otomatikleştiren Angular için bir resim bileşenidir.
  • Yıkıcı olmayan hidrasyon: Yıkıcı olmayan hidrasyon, sunucu tarafında oluşturulan Angular uygulamalarının DOM'u istemci tarafında yeniden oluşturulduğunda ortaya çıkan titremeyi düzeltir.
  • Kısmi sulandırma: Angular ekibi yakında kısmi sulandırmanın geliştirici önizlemesini yayınlayacaktır. Kısmi sulandırmada, sayfa oluşturulduğunda tarayıcı varsayılan olarak sayfanın JavaScript'ini yüklemez. Bunun yerine, kullanıcı sayfayla etkileşimde bulunurken sayfanın belirli bölümleri doldurulur.

Astro

Modern bir statik site oluşturucu olan Astro, web geliştirmeye yönelik yenilikçi yaklaşımıyla adından söz ettiriyor. Performans ve geliştirici deneyimine odaklanan Astro, heyecan verici çeşitli özellikler ve güncellemeler yayınladı:

  • Astro Adaları: Astro Adaları, geliştiricilerin sayfanın geri kalanından izole edilmiş etkileşimli kullanıcı arayüzü bileşenleri oluşturmasına olanak tanır. Bu sayede verimli güncellemeler ve optimum performans elde edebilirsiniz.
  • Karma oluşturma: Astro artık karma oluşturmayı destekliyor. Bu sayede, daha fazla esneklik için statik site oluşturma ve sunucu tarafı oluşturmanın avantajlarını birleştirebilirsiniz.
  • Resim ve Resim bileşenleri: Astro, resimlerin işlenmesini basitleştiren ve otomatik optimizasyon sağlayan yeni Resim ve Resim bileşenlerini kullanıma sundu.
  • Görüntüleme Geçişleri desteği: Astro, Görüntüleme Geçişleri API'si için yerleşik destek sunarak sorunsuz sayfa geçişleri sağlar.
  • Astro Dev Araç Çubuğu: Astro Dev Araç Çubuğu, Astro uygulamalarında hata ayıklama ve optimizasyon için güçlü bir araç seti sunar.

React

Geçen yıl, React sunucu bileşenlerinin sürümüne React bileşenlerine yönelik yeni bir yaklaşım eklendi. O zamandan beri React ekibi, React Derleyici ve Sunucu İşlemleri özellikleri de dahil olmak üzere çeşitli yeni özellikler üzerinde çalışıyor.

  • Sunucu Bileşenleri: React sunucu bileşenleri, verileri getiren ve istemciye aktarılmadan önce sunucuda oluşturulan bileşenlerdir. Bu işlem, oluşturma işini sunucuya taşır ve istemciye gönderilmesi gereken kod miktarını azaltır.
  • React Compiler: React Compiler, bileşenleri otomatik olarak hafızaya alabilen bir compiler. Bu, gereksiz yeniden oluşturma işlemlerini azaltarak performansı artırır. React ekibi, geliştiricilerin kod değişikliği yapmadan React Compiler'ı kullanabileceğini belirtti.
  • Sunucu işlemleri: Sunucu işlemleri, istemci ile sunucu arasındaki iletişimi sağlar. Sunucu işlemleri sayesinde, doğrudan React bileşenlerinizden çağrılabilecek sunucu tarafı işlevler tanımlayabilirsiniz. Böylece manuel API çağrıları ve karmaşık durum yönetimi gerekmez. Bu, özellikle veri mutasyonları ve form gönderimleri gibi işlemler için yararlı olabilir.
  • Öğe Yükleme: React, komut dosyaları, stiller, yazı tipleri ve resimler gibi öğeleri önceden yüklemek ve yüklemek için açıklayıcı API'ler üzerinde çalışıyor.
  • Ekran Dışında Oluşturma: React, ekran dışında oluşturma üzerinde de çalışıyor. Ekran Dışı Oluşturma, "ek performans yükü olmadan arka planda ekran oluşturmak için React'te yakında kullanıma sunulacak bir özelliktir. Bunu, yalnızca DOM öğeleri için değil React bileşenleri için de çalışan content-visibility CSS özelliğinin bir sürümü olarak düşünebilirsiniz."

Remiks

Full-stack web çerçevesi olan Remix, geliştirici topluluğunda ilgi görmeye başladı. Web'in temellerine ve gelişmiş geliştirici deneyimine odaklanan Remix, birkaç önemli güncelleme yaptı:

  • Remiks 2.0 sürümü: Eylül 2023'te kullanıma sunulan Remiks 2.0, çerçeveye önemli iyileştirmeler ve yeni özellikler getirdi.
  • Vite için kararlı destek: Remix artık hızlı ve hafif bir derleme aracı olan Vite için kararlı destek sunuyor. Bu sayede daha hızlı geliştirme derlemeleri ve daha iyi performans elde edebilirsiniz.
  • SPA modu: Remix, üretimde JavaScript sunucusu gerekmeden tamamen statik siteler oluşturmaya olanak tanıyan SPA modunu kullanıma sundu. Bu sayede geliştiriciler, statik site dağıtımının basitliğini korurken Remix'in dosya tabanlı yönlendirme, otomatik kod bölme ve daha fazlası gibi güçlü özelliklerini kullanabilir.

Next.js

Mayıs 2023'te yayınlanan Next.js 13.4, React sunucu bileşenleri, akış ve Suspense için kararlı destek sunması nedeniyle özellikle dikkate değerdi. O zamandan beri Next.js, yeni React API'leri (ör. Server Actions) için destek geliştirmeye ve Turbopack gibi girişimler aracılığıyla geliştirici deneyimini geliştirmeye devam ediyor. Diğer öne çıkan özellikler:

  • Uygulama Yönlendiricisi: Next.js 13.4'te kararlı hale gelen Uygulama Yönlendiricisi, Next.js uygulamalarında yönlendirmeyi yapılandırmanın ve yönetmenin yeni bir yoludur. Uygulama Yönlendirici, Next.js uygulamanızda paylaşılan düzenler ve iç içe yönlendirme gibi yeni Next.js özelliklerinin yanı sıra React Sunucu Bileşenleri, Askıya Alma ve Sunucu İşlemleri gibi yeni React API'lerinin kullanılması için ön koşuldur.

  • Turbopack: React'in Suspense API'si üzerine inşa edilmiş sayfa oluşturma yaklaşımı (şu anda deneysel). Kısmi ön oluşturma, statik bir yükleme kabuğu kullanarak bir sayfayı oluşturur. Ancak kabuk, sayfadaki dinamik içerik için "delikler" bırakır ve bu içerikler eşzamansız olarak yüklenir. Bu sayede, sayfa içeriğine dinamik veriler eklemeye devam ederken önbelleğe alınabilir, statik bir sayfanın performans avantajlarından yararlanabilirsiniz.

Vue

Vue'un en son sürümü olan Vue 3.4, çeşitli performans iyileştirmeleri içeriyordu. Vue şu anda performans odaklı Vue Vapor üzerinde de çalışıyor. Bu alanda neler olduğuna dair öne çıkan birkaç noktayı aşağıda bulabilirsiniz:

  • Vue 3.4 sürümü kullanıma sunuldu: "İki kat daha hızlı, tamamen yeniden yazılmış bir ayrıştırıcı, daha hızlı SFC derlemesi ve yeniden hesaplama verimliliğini iyileştiren yeniden yapılandırılmış bir reaktivite sistemi" gibi özellikler bu sürümde yer alıyor.
  • Vue Vapor Modu: Vue, Vue Tek Dosya Bileşenleri ile çalışan, etkinleştirilebilir, performans odaklı bir derleme stratejisi olan Vapor Modu üzerinde çalışıyor. Bu mod, Vue derleyicisi tarafından üretilen koddan daha yüksek performanslı kod oluşturur. Ayrıca, tüm bileşenlerle birlikte Vapor modu kullanılması, Vue Virtual DOM'a (bu da paket boyutunu azaltır) olan ihtiyacı ortadan kaldırır.
  • Vue 2'nin kullanımdan kaldırılması: Vue 2'nin kullanımdan kaldırılma tarihi 31 Aralık 2023'tür. Ancak Vue 2 hâlâ oldukça yaygın olarak kullanılıyor: Vue npm paketi indirmelerinin yaklaşık% 50'si Vue 2 içindir.

Nuxt

Nuxt, Nuxt 4'ün kullanıma sunulmasına yaklaşıyor. Nuxt'un son bir yılda sık sık yayınladığı çerçevelere ek olarak Nuxt modülleri ekosistemi de yaklaşık 220 modüle ulaştı. Bu alandaki son gelişmelerden bazıları şunlardır:

Katı

Solid, meta çerçevesi SolidStart'ın kararlı 1.0 sürümünü yayınlamak için çalışıyor. SolidStart, ayrıntılı tepkisellik, izomorfik yönlendirme ve çeşitli oluşturma modları için destek sunar. Öne çıkan özellikler:

  • Ayrıntılı tepkisellik: Solid'in tepkisellik sistemi, verimli oluşturma ve durum yönetimi sağlayarak hassas güncellemeler ve optimum performans sağlar.
  • Izomorfik yönlendirme: SolidStart, yönlendirme için birleşik bir yaklaşım sunarak geliştiricilerin hem istemcide hem de sunucuda sorunsuz çalışan rotalar tanımlamasına olanak tanır.
  • Esnek oluşturma modları: SolidStart, sunucu tarafı oluşturma, statik site oluşturma ve istemci tarafı oluşturma dahil olmak üzere çeşitli oluşturma modlarını destekler. Böylece geliştiricilere uygulamaları için en iyi yaklaşımı seçme esnekliği sunar.

Svelte

Svelte ekibi, geçtiğimiz yıl önemli bir sürüm olan Svelte 5'in yakında kullanıma sunulmasına odaklandı. Diğer öne çıkan özellikler:

Chrome Aurora

Chrome Aurora, Google'da web'de kullanıcı deneyimini (özellikle performansı) iyileştirmek için çeşitli açık kaynak web çerçeveleriyle birlikte çalışan bir ekiptir. Geçtiğimiz yıl katkıda bulunduğumuz girişimlerden bazıları şunlardır:

Sonuç

JavaScript çerçevesi ekosistemi hızlı bir şekilde gelişmeye devam ediyor. Her çerçeve kendi yeniliklerini ve iyileştirmelerini getiriyor. İster Angular, React ve Vue gibi yerleşik çerçevelerin en son özellikleriyle ilgileniyor ister Astro, Remix ve Solid gibi yeni seçenekleri keşfediyor olun, takip etmeniz gereken heyecan verici gelişmelerden asla mahrum kalmazsınız.

Geliştiriciler olarak bu gelişmelerden haberdar olmak, projelerimiz için bir çerçeve seçerken bilinçli kararlar almamıza yardımcı olur. Her bir çerçevenin güçlü yönlerini ve benzersiz özelliklerini anlayarak proje gereksinimlerimiz ve geliştirme tercihlerimizle en uyumlu olanı seçebiliriz.

Bu genel bakışın, JavaScript çerçevelerinin mevcut durumuna dair bir fikir verdiğini umuyoruz. Bu blog yayınında ele alınan konular hakkında daha fazla bilgi edinmek için Google I/O'daki ilgili konuşmaya göz atın. Keyifli kodlamalar dileriz.