Modern JavaScript framework’lerinin nasıl çalıştığını, bir tane yaparak öğrenmek

Modern JavaScript framework’lerinin çalışma mantığını anlamak

• Kendi JavaScript framework’ünü yapmayı denemek, öğrenmeye yardımcı olur.
• "Modern JavaScript framework’leri", React sonrasında ortaya çıkan framework’leri ifade eder.
• Bu framework’ler React’ten ilham almış olsa da, benzer yönlerde evrilmiştir.

Modern framework’lerin özellikleri

• DOM güncellemeleri için reactivity kullanılır.
• DOM render etmek için template cloning kullanılır.
• <template> ve Proxy gibi modern web API’leri kullanılır.

Reactivity

• React’in reaktif olmadığı sıkça söylenir.
• Modern framework’ler performansı önceliklendiren push tabanlı bir reaktivite modeli kullanır.
• Proxy kullanılarak, durum her değiştiğinde DOM’un güncellenmesi sağlanır.

DOM ağaçlarını klonlama

• <template> etiketiyle HTML bir kez parse edildikten sonra tamamının hızlıca klonlanması verimli bir tekniktir.
• Bu yöntem çeşitli JavaScript framework’lerinde kullanılır.

Modern JavaScript API’leri

• <template> ve Proxy, reactivity sistemi kurmaya yardımcı olan API’lerdir.
• Tagged template literal’lar kullanılarak HTML template API’si basitleştirilir.

Reactivity kurma adımları

• Durum yönetimi ve durum değiştiğinde DOM güncellemelerini tanımlayan reactivity, framework’ün temelini oluşturur.
• Proxy ile durum değişiklikleri algılanır ve queueMicrotask ile güncellemeler verimli şekilde yönetilir.

DOM render etme adımları

• html fonksiyonu kullanılarak DOM ağacı oluşturulur ve verimli şekilde güncellenir.
• Tagged template literal’lar ile HTML template’leri yazılır, WeakMap ile HTML parse işlemi optimize edilir.

Reactivity ile DOM render etmeyi birleştirmek

• createEffect kullanılarak duruma göre DOM güncellenir.
• Durum değiştiğinde metnin otomatik güncellenmesi sağlanır.

Sonraki adımlar

• DOM render sistemini geliştirmek için çeşitli yollar vardır.
• Amaç, template’i yalnızca bir kez parse etmek ve binding’leri yalnızca bir kez kurarak güncellemeleri en aza indirmektir.

GN⁺ görüşü

Bu yazıdaki en önemli nokta, modern JavaScript framework’lerinin temel kavramlarını ve nasıl uygulandıklarını anlamak; ayrıca gerçekten kendi framework’ünü yapma deneyimi üzerinden öğrenmektir. Bu yaklaşım, özellikle başlangıç seviyesindeki yazılım mühendisleri için framework’lerin iç işleyişini anlamaya ve bunu pratikte denemeye imkân vererek ilgi çekici ve faydalı bir öğrenme deneyimi sunabilir.

[GN⁺]

Hacker News görüşü

• İlgilenenler için, konuya dair temel bir anlayış kazanmak adına şu kaynaklar öneriliyor:

  • Artımlı hesaplama: Wikipedia bağlantısı
  • Kendini ayarlayan hesaplama: Umut A. Acar’ın makalesi
  • JaneStreet’in artımlı hesaplamaya girişi: blog bağlantısı
  • Web ve artımlı hesaplama: blog bağlantısı
  • Kendini ayarlayan DOM: blog bağlantısı
  • Kendini ayarlayan DOM ve diff alınabilen veri: blog bağlantısı
  • Rado Kirov’un artımlı hesaplama taslağı: Part 1, Part 2, Part 3
  • Reaktif UI için birleşik bir teoriye doğru: Raph Levien’in yazısı

• React hakkında yanlış anlaşılmalar ve gerçekte nasıl çalıştığına dair açıklamalar:

  • Durum güncellendiğinde React, tüm sanal DOM ağacını değil, yalnızca ilgili bileşeni ve onun alt bileşenlerini yeniden oluşturur.
  • useMemo, yeniden render etmeyi engellemez; bu görevi React.memo üstlenir.
  • React’in "push-only" olmamasının nedeni güncellemeleri tamponlamasıdır.
  • Signals’ın avantajı, framework’ün DOM’un hangi özelliğinin yeniden render edilmesi gerektiğini bilmesi anlamına gelir; ancak bu tek başına reaktivite demek değildir.

• Svelte hakkında olumlu değerlendirmeler ve kullanım örnekleri:

  • Svelte derleyicisinin oldukça esnek olduğu ve Svelte şablonlarını özel şekillerde işleyebildiği belirtiliyor.
  • Svelte ile Svekyll’in (statik blog aracı Jekyll’in bir klonu) geliştirildiğine dair deneyim paylaşılıyor.

• Reaktif framework’ler üzerine farklı bakış açıları:

  • Solid gibi reaktif framework’ler için tanıtıcı kaynaklar paylaşılıyor.
  • solid-js’in reaktivitesini anlamak için bir web renderer/framework yazma deneyimi anlatılıyor.
  • React’i doğrudan uygulayarak öğrenmeye yönelik kaynaklar öneriliyor.

• React’in reaktivitesi üzerine soru ve tartışmalar:

  • React’in nasıl "reaktif" hale getirilebileceğine dair sorular soruluyor.
  • Artık daha fazla JS framework geliştirilmemesi gerektiğini savunan bir görüş de yer alıyor.

• Frontend framework deneyimi yüksek kişilere yöneltilen bir soru:

  • Render işlemleri için effect-system desteği sunan framework/kütüphaneler hakkında soru soruluyor.