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

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

JavaScript çerçeveleriyle çalışan her şeye ayak uydurmak zor olabilir. Bu belgede, yaklaşık bir yıl içinde JavaScript çerçeveleri ekosisteminde meydana gelen son gelişmelere dair özet bilgiler verilmektedir. Bu konulardan bazılarına ilişkin daha uzun bir konuşma için bu yılki Google I/O etkinliğinde gerçekleştirilen 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 birçok benzer özellik ve mimaride yakınlaşmaktadır. Bunlar arasında bileşen tabanlı mimari, dosya tabanlı yönlendirme ve modern SSR desteği bulunur. Çerçeveler birbirinden öğrendiği ve en iyi uygulamaları benimsediği için bu yakınlaşma, ekosistemin olgunluğunu ve evrimini gösterir.

Aynı zamanda, bir dizi yeni trend (ör. sunucu bileşenleri ve ayrıntılı reaktivasyona yönelik farklı yaklaşımlar) bağımsız çerçeveleri birbirlerinden ayırt etmeye devam ediyor. Bu trendleri daha iyi anlayabilmek için her bir çerçeveyi birer birer ele alıyoruz.

Angular

Angular'ın son sürümlerinde sinyaller, ertelenebilir görünümler, NgOptimziedImage, zararsız sulama ve kısmi hidrasyon gibi çeşitli önemli değişiklikler yapılmıştır. Bazı önemli noktalar:

  • Sinyaller: Sinyaller, bir uygulamadaki durumu izlemek için birden fazla çerçeve (artık Angular dahil) tarafından kullanılan bir yaklaşımdır. Angular Sinyalleri, değişiklik tespiti sırasında yapılması gereken hesaplamaların sayısını azaltarak Sonraki Boyamayla Etkileşim (INP) dahil olmak üzere çalışma zamanı performansını iyileştirebilir.
  • Ertelenebilir görünümler: Ertelenen görünümler; belirli bileşenlerin, yönergelerin ve dikey kanalların yüklenmesinin ertelenmesini mümkün kılar. Örneğin, içerik görüntü alanına girene veya ana iş parçacığı boşta kalana kadar bir bağımlılığın yüklenmesini erteleyebilirsiniz.
  • NgOptimizedImage: NgOptimizedImage, Angular için en iyi resim yükleme uygulamalarının benimsenmesini otomatikleştiren bir resim bileşenidir.
  • Tahrip edici olmayan sıvı alma: Tahribatsız sıvı, sunucu tarafında oluşturulan Angular uygulamalarının DOM'u istemci tarafında yeniden derlendiğinde ortaya çıkacak titremeyi düzeltir.
  • Kısmi su içme: Angular ekibi yakında kısmi hidrasyonun geliştirici önizlemesini yayınlayacaktır. Kısmi sıvı olduğunda, tarayıcı varsayılan olarak sayfa görüntülendiğinde sayfanın hiçbir JavaScript'ini yüklemez. Bunun yerine, kullanıcı sayfayla etkileşim kurdukça belirli bölümler akışkan olarak sağlanır.

Astro

Modern bir statik site oluşturucu olan Astro, web geliştirme konusundaki yenilikçi yaklaşımıyla dikkat çekiyor. Performansa ve geliştirici deneyimine odaklanan Astro, birçok heyecan verici özellik ve güncelleme yayınladı:

  • Astro Adaları: Astro Adaları, geliştiricilerin sayfanın geri kalanından izole edilmiş etkileşimli kullanıcı arayüzü bileşenleri oluşturmalarına olanak tanır. Bu, verimli güncellemeler yapılmasını ve optimum performansın elde edilmesini sağlar.
  • Karma oluşturma: Astro artık daha fazla esneklik için statik site oluşturma ve sunucu tarafı oluşturmanın avantajlarını birleştirerek karma oluşturmayı desteklemektedir.
  • 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.
  • Geçişleri Görüntüleme desteği: Astro, View Transitions API için yerleşik destek sunarak sorunsuz ve sorunsuz sayfa geçişleri sağlar.
  • Astro Geliştirici Araç Çubuğu: Astro Geliştirici Araç Çubuğu, Astro uygulamalarında hata ayıklama ve optimizasyon için güçlü bir araç seti sağlar.

Tepki ver

Geçen yıl React Sunucu Bileşenleri'nin kullanıma sunulması, React bileşenleri için yeni bir yaklaşımı kullanıma sundu. O zamandan beri React ekibi, React Derleyici ve Sunucu İşlemleri özelliklerinin yanı sıra aşağıdakileri de içeren çeşitli yeni özellikler üzerinde çalışıyor:

  • Sunucu Bileşenleri: Tepki sunucusu bileşenleri, verileri getiren ve istemciye aktarılmadan önce sunucuda oluşturulan bileşenlerdir. Bu sayede, oluşturma işi sunucuya taşınır ve istemciye gönderilmesi gereken kod miktarı azalır.
  • React Derleyici: React Derleyici, bileşenleri otomatik olarak hatırlayabilen bir derleyicidir. Bu, gereksiz yeniden oluşturma sayısını azaltarak performansı artırır. React ekibi, geliştiricilerin herhangi bir kod değişikliği yapmadan React Derleyici'yi kullanabileceklerini söyledi.
  • Sunucu İşlemleri: Sunucu İşlemleri, istemciden sunucuya iletişimi etkinleştirir. Server Actions ile doğrudan React bileşenlerinizden çağırılabilen sunucu tarafı işlevleri tanımlayabilir, böylece manuel API çağrıları ve karmaşık durum yönetimi ihtiyacını ortadan kaldırabilirsiniz. Bu, özellikle veri değişiklikleri ve form gönderimleri gibi şeyler için yararlı olabilir.
  • Öğe Yükleme: Tepki bir süredir komut dosyaları, stiller, yazı tipleri ve resimler gibi öğelerin önceden yüklenmesi ve yüklenmesi için bildirim temelli API'ler üzerinde çalışmaktadır.
  • Ekran Dışı Oluşturma: React, Ekran Dışı Oluşturma üzerinde de çalışmaktadır. Ekran Dışı Oluşturma, "React'ta ek performans yükü olmadan arka planda ekranları oluşturmak için yakında kullanıma sunulacak bir özelliktir. Bunu, yalnızca DOM öğeleri için değil, React bileşenleri için de çalışan içerik görünürlüğü CSS özelliğinin bir sürümü olarak düşünebilirsiniz."

Remiks

Full-stack web çerçevesi olan Remix, geliştirici topluluğunda ilgi görüyor. Web'le ilgili temel bilgilere ve gelişmiş geliştirici deneyimine odaklanan Remix, bazı önemli güncellemeleri kullanıma sundu:

  • Remix 2.0 sürümü: Eylül 2023'te yayınlanan Remix 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 sunarak geliştirme derlemelerini daha hızlı ve iyileştirilmiş performans sağlıyor.
  • SPA modu: Remiks, üretimde bir JavaScript sunucusuna gerek kalmadan tamamen statik sitelerin oluşturulmasına olanak tanıyan SPA modunu kullanıma sundu. Bu, geliştiricilerin Remix'in dosya tabanlı yönlendirme ve otomatik kod bölme gibi güçlü özelliklerini kullanmasına olanak tanır ve statik site dağıtımının basitliğini korur.

Next.js

Mayıs 2023'te Next.js 13.4'ün kullanıma sunulması, özellikle React Server Bileşenleri, akış ve Suspense için kararlı destek sunmasını sağladığı için dikkate değerdi. Next.js, o zamandan beri yeni React API'leri (örneğin, Sunucu İşlemleri) için destek oluşturmaya ve Turbopack gibi girişimlerle geliştirici deneyimini yinelemeye devam ediyor. Öne çıkan diğer seçenekler şunlardır:

  • Uygulama Yönlendiricisi: Next.js 13.4 sürümünde kararlı hale gelen Uygulama Yönlendirici, Next.js uygulamalarında yönlendirmeyi yapılandırmanın ve yönetmenin yeni bir yoludur. Uygulama Yönlendiricisi, 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, Suspense ve Sunucu İşlemleri gibi yeni React API'lerini kullanmak için bir ön koşuldur.

  • Turbopack: şu anda deneysel olan) React'ın Suspense API üzerine inşa edilen sayfa oluşturma yaklaşımı. Kısmi önceden oluşturma, sayfayı statik yükleme kabuğu kullanarak oluşturur. Ancak kabuk, sayfa içindeki dinamik içerik için "delikler" bırakır ve bu içerik eşzamansız olarak yüklenir. Bu, önbelleğe alınabilir, statik bir sayfanın performans avantajlarını sağlarken aynı zamanda dinamik verileri sayfa içeriğine dahil etmeye devam eder.

Vue

Vue'nun en son sürümü olan Vue 3.4, çeşitli performans iyileştirmeleri içeriyordu. Vue şu anda aynı zamanda performans odaklı olan Vue Vapor üzerinde de çalışıyor. Bu alanda neler olup bittiğine dair birkaç önemli noktayı aşağıda bulabilirsiniz:

  • Vue 3.4 yayınlandı: Özellikleri arasında "iki kat daha hızlı ve daha hızlı SFC derlemesi olan tamamen yeniden yazılmış bir ayrıştırıcı ve yeniden hesaplama verimliliği artıran reaktivite sistemi yer alıyor."
  • Vue Buhar Modu: Vue, Vue Tek Dosya Bileşenleri ile çalışan isteğe bağlı, performans odaklı bir derleme stratejisi olan Buhar Modu üzerinde çalışıyor. Buhar Modu, şu anda Vue Derleyici tarafından üretilen koddan daha yüksek performanslı bir kod oluşturur. Buna ek olarak, Tüm bileşenlerde Buhar Modu'nun kullanılması, Vue Sanal DOM'a duyulan ihtiyacı ortadan kaldırır (bu da paket boyutunu küçültür).
  • Vue 2, EOL'ye ulaşır: Vue 2'nin kullanım ömrü (EOL) 31 Aralık 2023'te sona ermiştir. Ancak Vue 2 hâlâ yaygın olarak kullanılıyor: Vue npm paket indirmelerinin yaklaşık% 50'si Vue 2'ye yönelik.

Nuxt

Nuxt, Nuxt 4'ün kullanıma sunulmasına yakındır. Nuxt'ın geçtiğimiz yıl sıklıkla yaptığı çerçeve sürümlerine ek olarak Nuxt modül ekosistemini de yaklaşık 220 modüle çıkardı. Bu alandaki son gelişmelerden bazıları şunlardır:

Katı

Solid, meta çerçeve SolidStart'ın kararlı 1.0 sürümü için çalışıyor. SolidStart ayrıntılı reaktifliğe, izomorfik yönlendirmeye ve çeşitli oluşturma modlarını desteklemeye sahiptir. Bu sürümün öne çıkan özellikleri şunlardır:

  • Ayrıntılı reaktiflik: Solid'in reaktif sistemi hassas güncellemelere ve optimum performansa olanak tanıyarak verimli oluşturma ve durum yönetimi sağlar.
  • İzomorfik yönlendirme: SolidStart, geliştiricilerin hem istemci hem de sunucuda sorunsuz çalışan rotalar tanımlamasına olanak tanıyarak yönlendirme için birleşik bir yaklaşım sunar.
  • Esnek oluşturma modları: SolidStart; sunucu tarafı oluşturma, statik site oluşturma ve istemci tarafı oluşturma gibi çeşitli oluşturma modlarını destekleyerek geliştiricilere uygulamaları için en iyi yaklaşımı seçme esnekliği sunar.

İnce

Geçtiğimiz yıl Svelte ekibi, önemli olacak olan gelecek Svelte 5'in piyasaya sürülmesine odaklandı. Öne çıkan diğer seçenekler şunlardır:

  • Svelte 5 geliyor: Svelte 5, "Svelte derleyicisi ve çalışma zamanının yeniden yazılmasını" sağlamanın yanı sıra Runes kavramını da kullanıma sunuyor.
  • Runes duyuruldu: Runes, Svelte 5'te yakında sunulacak bir özellik. "Runes evrensel, ayrıntılı tepkilere yol açıyor... Rünlerde tepkime, .svelte dosyalarınızın sınırlarının ötesine geçer. Svelte 5'in tepkisi sinyallerle desteklenir. Ancak [diğer çerçevelerin aksine] Svelte 5'te sinyaller doğrudan etkileşimde bulunduğunuz bir şeyden ziyade, arka planda bir uygulama ayrıntısıdır."
  • SvelteKit 2 yayınlandı: SvelteKit, Svelte'ın meta çerçevesidir. Bu sürümdeki özellikler arasında yüzey yönlendirme ve Vite 5 desteği bulunmaktadır.

Chrome Kuzey ışıkları

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

Sonuç

JavaScript çerçeve ekosistemi, her bir çerçevenin kendine özgü inovasyon ve iyileştirmeleri sağlamasıyla birlikte hızlı bir şekilde gelişmeye devam etmektedir. İster Angular, React ve Vue gibi yerleşik çerçevelerin en yeni özelliklerini ister Astro, Remix ve Solid gibi yeni seçenekleri keşfetmek istiyor olun, gelişmelere ayak uydurabilecek heyecan verici gelişmeler var.

Geliştiriciler olarak bu gelişmelerden haberdar olmak, projelerimiz için bir çerçeve seçerken bilinçli kararlar vermemize yardımcı olur. Her bir çerçevenin güçlü ve benzersiz özelliklerini anlayarak proje gereksinimlerimize ve geliştirme tercihlerimize en uygun 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ı daha ayrıntılı şekilde incelemek için Google I/O'da eşzamanlı olarak yapılan konuşmaya göz atmayı unutmayın. İyi kodlamalar!