FRONTEND KAPSAM
Svelte Nedir ? React, Vue vb UI Kütüphanelerinden Farklı Ne Yenilikler Vaadediyor ?
Svelte aslında 2 Sene öncesinin konusunu. Peki neden şu anda yazıyorum, Çünkü yeni yeni radarıma giriyor. Reactive Programming ile diğer sorunlu alanlara getirdiği çözümler gerçekten farklı bir bakış açısı içeriyor. Bu yazımda Rich Harris videolarından derlemeler ile konuyu anlatacağım.
Svelte diğer React,Vue UI kütüphaneleri gibi sizin kodunuz ile birlikte çalışan bir UI Kütüphanesi değildir Bunun yerine UI Bileşenlerini Reactive Programlama mantığı ile oluşturan bir Compiler’ dır. (Web Sitesi)
- Daha Az Kod Yazarsınız
- Daha Az Boyutlu ve Daha Hızlı Çalışan bir Kod Elde Edersiniz
- Az kaynaklı Smart Watch , Smart TV ve Embedded Device için uygundur.
1. NEDEN ?
Bir konuya girerken önce NEDEN sorgulamak gerçekten iyi oluyor. Nasıl yaptığı veya Ne yaptığından önce, Rich Harris neden rahatsız olmuşta mevcutta bulunan React, Vue, Angular vb… bir sürü UI kütüphanesi dururken yeni bir kütüphane yapmaya karar vermiş. Nedenleri kısaca özetlersek;
A. Gerçek Reactive Programlama ve Performans
1969 yılında Excel temelini oluşturan SpreadSheet programlama yöntemi olan Reactive Programming (Forward Referencing) yönteminin UI geliştirme açısından bir çok özelliği içerisinde barındırdırıyor.
SpreadSheet geliştirme hücreler üzerinden gerçekleştirdiği için formül hücrelerini etkileyen kaynak hücrelerden biri güncellendiğinde otomatik olarak ilgili alanları güncelliyor.
SpreadSheet bu özelliği hücreler arasındaki bağımlılıkları yöneterek gerçekleştiriyor.
SpreadSheet kullanımı MS Excel çok öncesine dayanıyor. O zamanın kısıtlı kaynaklarında ekrandaki sadece değişen kısmın tekrar render edilmesini sağlayan bu yöntem. Bir çok birbiri ile ilişkili veri gösteriminde muhasebe, stok vb… yazılımlarda ve uygulamalarda sıkça kullanılmıştır. Örneğin 1969 SpreadSheet, 1979 VisCalc veya 1983 Lotus serilerinde
Peki bu yöntemi yani sadece değişen hücre veya bileşenin renderlenmesi sağlatmak için Reactive Programming tekniklerini mevcut UI kütüphaneleri (Vue, React, Angular) bu yöntemi kendi yapılarında default olarak ne kadar barındırıyorlar ? Peki Reactive Programlama Nedir ?
The essence of functional reactive programming is to specify the dynamic behavior of a value completely at the time of declaration. (Heinrich Apfelmus)
Fonksiyonel reaktif programlamanın özü, bildirim anında bir değerin dinamik davranışını tamamen belirlemektir.
Özetle Reactive Programlama data akışını kontrol etmek için ilgili verileri dinleyip bunlardan etkilenen diğer veri yapılarını güncellemek üzerine daha performanslı çalışır.
Peki yine gelelim React, Vue benzeri UI kütüphaneleri DOM yapısına sıkça erişim performansı yavaşlattığı için bunu daha optimize ve geliştiricinin düşünmesini gerektirmeden sağlatmak için Virtual DOM’dan faydalanıyorlar. Peki Virtual DOM Nedir ?
React ve Vue render metodlarından dönen değerler ile basit bir gösterim ağacı oluşturur. Bu ağaç DOM değildir. Virtual DOM dediğimiz bu kavram React ara katmanda bu ağacı oluşturmasına güncellemelere göre update/delete etmesine ve buna bağlı DOM nesnesini en az değişikliği bulacak şekilde diff(fark) bulduktan sonra gerçekleştirir. React bu işleme reconcilation denir.
Yukarıdaki resimde Sanal DOM üzerindeki fark Kırmızı ile işaretlenmiş ve sadece o kısım Gerçek DOM üzerinde güncellenir. Bu 3 şeyi sağlamış olur.
- DOM’a daha az erişim sağlamak için arkaplanı düşünmeden yazılım geliştirme..
- Çoğu durumda performans kazancı…
- Ekranda sadece ilgili alan değişeceği için flick etme gibi sorunlardan kurtulma..
Peki React, Reactive Programming göre mi yazılmış. Hayır. İsmine aldanmamak gerekiyor React VDOM kullanarak ara bir Cache yapısı gibi düşünebilirsiniz. Ama ağacın yapısının çok fazla elemandan oluştuğu ve bunların sürekli güncellendiği durumda VDOM yapısı çok uygun olmaz çünkü diffing işleminin maliyeti giderek Performans pozitif yönde etkileyeceğine, negatif yönde etkileyerek zarar vermeye başlar.
Rich Harris Virtual DOM çalışmasını anlattığı aşağıdaki örnekte text değerinin Click düğmesine bastıkça artmasını nasıl gerçekleştiğini anlatıyor ve 2 konu üzerinde eleştirisi var.
- Her bir test değişikliğinde bileşendeki tüm elemanların baştan aşağıya değişti mi, değişti mi diye kontrol edilmesi…
- Her bir değişimde tüm fonksiyonun baştan aşağıya tekrar tekrar koşturulması..
Not: Burda bu bileşeni tasarlarken bu performans gereksinimlerini düşünüp text alanını Element yerine Bileşen olarak eklerseniz bu sorunu çözersiniz ama geliştirici default davranışı aşağıdaki şekilde kod geliştirmek olduğu için bir boşa kullanım söz konusu gerçekten.. Bu durum çok performans gerektiren uygulamalar veya zayıf kaynaklı cihazlar dışında pek problem olarak görülmeyebilir tabi.. React kütüphanesinde bunun yanında VDOM performansını daha iyi hale getirebilmesi için aşağıdaki özellikler ile VDOM Node Rendering yapmama, cacheleme, merge yöntemleri kullanılır.
- shouldComponentUpdate
- React.PureComponent
- useMemo
- useCallback
- ConcurrentMode (suspense …)
- React Server Components
VDOM olmadan yapmanın performans olarak çok fazla veriyi UIThread kilitlemeden gösterebileceğini savunuyor…
Desktop Yeteri Kadar Performanslı Değil mi ?
Desktop yeterli performans sağlayacak yapıda ama JS sadece Desktop ortamında değil Mobil ve iOT cihazlarda da aktif olarak kullanmaya başladık. Zaten WebAssembly gibi daha yapısal performans geliştirmelerin olmasıda bunun nedeni… Framework artık daha fazla kitle tarafından farklı farklı sorunları çözmek için kullanılması ve React, Vue, Angular geliştiricilerin bu taleplere karşılık verecek geliştirmeleri yapmaları.
B. Daha Kısa ve Öz Kod Yazabilme
Peki Reactive Programlama dediğimiz nasıl bir şey ? Aynı SpreadSheet olduğu gibi aşağıda b her zaman a +1 olsun a değişince b otomatik olarak güncellensin istiyoruz. Bu durumda bind/bound etme operatörüne ihtiyaç duyuyoruz. Bu UI bağlamında daha anlaşılır bir kod yazımı gerçekleştiriyor.
Yorum: Bind işlemi UI işlemlerinde Editör üzerinden Playground ortamlarda geliştirme işlemi için daha mantıklı iken, kod editörü üzerinden kodlama yaparken işleri biraz karmaşıklaştırabilir. Geliştiriciler async/await, promise, callback kavramlarına tam hakim değilken bir de bunun üzerinde auto binding üzerinden yapılması debugging işlemlerini giderek daha zor hale getirebilir.
Peki daha kısa kod yazabilmeyi neden istiyoruz. Çünkü daha kısa ve öz yazabilmek oluşabilecek hataların azalması anlamına geliyor. Bu azalma veya artma linear değil. Kod satır sayısına göre komplekslik arttığı için hata katlanarak artıyor.
C. Çalışan Kod Kısmında Gereksiz Kodların Gönderilmemesi
Bu bir yere kadar mümkün ama aynı Benzinli Arabalar da olduğu gibi bir yerden sonra bu optimizasyonlar bir yerde sınırlanıyor farklı bir çıkış noktası, farklı varsayımlar üzerinden ilerlemek gerekiyor yani Elektrikli Arabaya geçmek veya Tamamen Arabadan vazgeçmek gibi…
Kodumuzu daha hızlı ve performanslı çalıştırabilmek birçok yöntem deneyebiliriz.
- sayfa kaynaklarını küçük parçalara ayırıp bunları ufak parçalar halinde göndermek
- Web Worker ile bazı işlemleri paralel şekilde gerçekleştirmek
- WebAssembly ve Rust ile compile edilmiş kodlar Tarayıcılarda çalıştırma
Ama bunların hiç birisi gereksiz kodların silinmesi, client iletilmemesi ve kodun sadece gerekli kısmının çalıştırılmasının sağlanacağı performansı sağlayamaz.
D. Kod Geliştirirken Compiler Getirdiği Ekstra Avantajlar.
Bu kısım biraz TypeScript getirdiği avantajlar gibi düşünebilirsiniz. TypeScript nasıl kod yazımında JS Typed haline getirip ekstradan kontrolleri Compile zamanında gerçekleştiriyorsa Compiled zamanında HTML ile ilgili Accessibility kuralları işletilerek farklı uyarılar verilebilir
Style(CSS) in JS kavramlarını tek bir Compiler içerisinde başka ekstra framework kullanmadan halledebilme veya Animation ve Transition daha performanslı olacak şekilde CSS üzerinde gerçekleştirme gibi birçok işlemi kullanıcılardan soyutlayabilir.
2. NE YAPIYOR ?
Örneğin bir düğme bileşeni oluşturmak isteyelim. Ve bu düğme bileşeninin basınca ses çıksın. Bunu aşağıdaki kütüphaneler (WebComponent, React, Svelte) ile geliştirdiğimizde okunabilirlik, HTML yapısına benzerlik ve en az satır ile kod geliştirme açısından Svelte oldukça başarılı bir syntax yapısına sahip
Syntax açısından kod geliştirme olarak farklılıklar olsa bile React Hooks, Vue Composition API sonrasında kod syntax açısından çok dramatik farklar oluşuyor diyemeyiz. Çünkü React ve Vue bu yapıları kendi iç yapısına getirmeyi başardı.
Compiler-Centric Design Geniş Bir Çözüm Uzayı Sunuyor
Svelte asıl getirdiği yenilik syntax olarak yazım şeklinde değil, nasıl TypeScript ile JS ile ilgili bir takım problemleri Compile Time çözmeyi hedeflemiş ise, benzer bir yaklaşım Svelte içinde geçerli.
Örneğin React Çözüm uzayında VDOM, Hooks, JSX vb… birçok yöntem varken, PreReact ekstra kısıtlamalar ile kütüphane boyutunu çok daha küçük tutuyor.
Svelte VDOM yerine Reactive Programlama yöntemi ile kodu arkaplanda oluşturarak kodun içerisinde sadece gerekli kod parçalarını ve bunu optimize ve hızlı çalışacak şekilde kod üreterek gerçekleştiriyor.
Sadece UI üretmeyi Amaçlayan Bir Kütüphaneden daha Fazlası Builtin Geliyor.. Svelte JQuery örneğinden yola çıkarak bir kütüphanede AJAX, Transition, Motion vb bazı temel kütüphaneler svelte içerisinde hazır olarak geliyor ve sizin bunları kullanıp, kullanmamanız durumuna göre compiler bunu çalışacak kodun içerisine entegre ediyor..
3. NASIL YAPIYOR?
Svelte, diğer UI Kütüphanelerinde (Vue, React ve Angular) gibi kodunuz ile birlikte çalışan Framework olmak yerine Compiler yani yazdığınız kodu Reactive Programming ile çalıştıracak hale getiriyor.. Bunu yaparken ObservableHQ sitesinin çalışma mantığında SpreadSheet işletir gibi kodu satır satır işletmek yerine bağımlılıklarına göre tersten toplayarak roota kadar işletilmesini gerçekleştirir.
Svelte Compiler benzer şekilde kodu Compile ederken kodun içerisinde reactive deklarasyonlar ekleyerek kodun Reactive çalışmasını Observable — Listener mantığında çalışmasını sağlar.
NPM Trend Grafikleri
NPM trendlerine baktığımızda svelte diğerlerine göre daha düşük istatistiklere sahip olduğunu görebilirsiniz. Ama yinede rakamlar az değil.
JS State anketinde Memnuniyet ve İlgi alanında ilk sıraya yükselmiş durumda.. (Not: Kullanım ve Farkındalık alanında react ve vue daha üstte)
Benim kendi görüşüm özellikle JS sadece bilgisayar üzerindeki tarayıcılar da değilde. Embedded Device üzerinde de çalışmasını istediğimizde bize bu işler için daha performanslı UI geliştirme araçları gerekebilir. Bu kısımda WebAssembly ve Rust var ama, JavaScript kendi doğasından olan bir yapının daha çok şansı var. Bu yüzden ilerleyen zamanda Svelte'nin durumuna tekrardan bir bakmak lazım.
Referanslar
- Rich Harris: Futuristic Web Development (Eki20)
- Svelte Society Day 2020: Rich Harris: Frequently Asked Questions(May20)
- The Return of ‘Write Less, Do More’ by Rich Harris(Eki19)
- Rich Harris — Rethinking reactivity(Nis19)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara (DOM API Kullanım Yöntemleri) erişmek için bu linke tıklayabilirsiniz.
Bu yazının devamı veya yazı grubundaki diğer yazılara (Ürün ve Kütüphaneler) erişmek için bu linke tıklayabilirsiniz.
