FRONTEND KAPSAM

0 Kb JS Web Uygulamaları Geliştirilebilir mi ?

JS kullanmadan Web Uygulamalarının Geliştirilmesi konusunda 0KB JS şeklinde vızıltı ifadeler ve bu kavram çevresinde yeni Framework ler ortaya çıktı. Bu yazıda bu yeni mekanikler üzerinde duruyor olacağız.

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readJun 3, 2022

JavaScript’in her geçen gün popülerleştiği günümüzde 0 Kb JS konusuda nereden çıktı diyor olabilirsiniz. Bu konuda daha öncesinde Geleceğin Programlama Dili JavaScript Mi ? şeklinde bir yazıda paylaşmıştım. Bu yazıda tam tersi gelecekte bir çok şeyi daha fazla JS ile yapacağımızı yazmıştık.

Tüm bunlar olurken neden 0 Kb JS.. Burada bahsedilen durum Web Uygulamalarında Server Side Rendering ile Progressive Enhancement yöntemi ile tarayıcılara 0 Kb JS bundle göndererek form fonksiyonları ile işlemlerinizi HTML üzerinden yapabilmenizi kastediyorlar.

Progressive Enhancement Olayı Nedir ?

SPA uygulama kütüphanelerinde React, Vue, Angular gibi kütüphaneler ile geliştirilen Web uygulamalarında tüm işlem Root div içerisinde JS ile tüm sayfanın render edilmesi ile gerçekleşir.

Tabi doğal olarak JS bundle indirilmeden JS render edeceği veri hazır olmadan sayfanın çizdirilebilmesi mümkün değil.

Bunun yerine SSR(Server Side Rendering)ile sunucu tarafında sayfanın Form aksiyonları ile çalıştırılacak hale getirilmesi ve sadece ilgili HTML kısmının aktarılması ve bunun içerisinde parçalara ait JS dosyalarının ayrıca download edilmesi hedeflenir. Burada önemli olan konu kullanıcının sayfanın hazır olduğu dediği zamanın (Ready) zamanının klasik yönteme göre çok daha hızlı oluyor olması.

Örneğin E Ticaret Siteleri, Mobil Sayfalar, İçerik sayfaları için bunlar çok önemli gereksinimler. Örneğin Marko ile açılan bir sayfanın Partial Hydration görüntüsü ..

Temelde buralarda amaçlanan JS Client yani tarayıcıya aktarılırken ki kısmı ve zamanı ile ilgili yoksa 0Kb JS değil. JS nerede çalıştırılacağı ile ilgili..

Örnek Frameworkler

React Server Components

React tarafında daha hale geliştirilmekte olan React Server Components reklam kısmı artık bileşenlerin JS geliştirilip, bundle şeklinde Client aktarılıp burada Hydrate edilmesine gerek yok. Sunucu da bulunan render edilmiş bileşenleri uygulamamız içerisinde direk Virtual DOM entegreli kullanabileceğiz.

Tabi bu bir nevi 0 KB JS ClientSide gelmesi anlamına geliyor. React’ın anladığı Virtual DOM Meta parçacıklarının stream edilmesi anlamına geliyor.

Tabi tüm bunlar olurken geçen yazmış olduğum. Remix yazılarında Remix1, Remix2, Remix3 Ryan asıl problemin React Render tarafında olmadığını Uygulama geliştirme için paralel geliştirme yapısını koymak gerektiğinden bahsetti. Hatta React 18 ile ile gelen RSC, Streaming ve Suspense gibi kavramların bu asıl uygulamaya çalışma başlangıç süresini yeterince hızlandırmadığını aşağıdaki videoda gösteriyor.

Her neyse tüm bu yaklaşımlar veri sunucu veya edge üzerinden fetch edilip, JS ilgili Bileşenleri Sunucuda oluşturup, ClientSide daha hazır bir halde atmaları üzerine dayanıyor.

Bu sayede tarayıcıya MomentJS veya Lodash gibi kütüphanelerin aktarımı yapılmadan daha az JS bundle tarayıcıya gönderilerek web uygulamarının çalıştırılması hedefleniyor.

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.