"Enter"a basıp içeriğe geçin

Svelte Nedir? Diğer Frameworklerden Farkı Ne?

Last updated on 16 Haziran 2020

Svelte, geliştirme hayatımıza daha önce dahil olan Angular, React, Vue ve bunun gibi birçok SPA framework’leri gibi SPA uygulamalar oluşturulmasına izin vermektedir ama Svelte’nin kendi deyimiyle radikal arayüzler oluşturmak için oluşturulduğu belirtilmektedir. Svelte tüm işlemleri React, Angular ve Vue gibi Virtual DOM’lar üzerinden değilde direkt olarak DOM nesnelerinin güncellenmesini sağlayan bir framework’dür bundan dolayı oldukça hızlı olduğunu belirtmektedir ayrıca yine Svelte’nin kendi savunmasında diğer framework’lerin büyük iş yükünü tarayıcıya bıraktığını iddia ederek kendisinin işin büyük kısmını build time’da yaptığını belirtmektedir. Olabildiğince bütün yönleriyle diğer framework’ler ile olan farklarını grafikler sunarak paylaşmaya çalışacağım.

Svelte Nedir? Diğer Frameworklerden Farkı Ne?

Svelte Nedir?
Image: https://medium.com/@rauf.rahmancz/svelte-another-javascript-framework-compiler-3c50293fe388

Svelte’nin diğer framework’lere göre çok daha az kod ile çok daha fazla işler yapabileceğinizi belirtmeliyiz zaten bu anlattığımız iddialı durumları altta karşılaştırma kısmında onlarca framework ile yapılan test sonuçlarında detaylı olarak göreceksiniz.

Sadece az kod ile çok iş yapmak için frameworkleriniz’den vazgeçip yeni denizlere yelken açın demiyoruz tabi ki. Svelte’nin kendini diğer frameworkler den ayıran en büyük özelliklerinden biri makale girişinde belirttiğimiz gibi herhangi bir şekilde Virtual DOM’lar üzerinde işlem yapmıyor olmasıdır. Direkt olarak DOM nesneleri üzerinden güncelleme işlemlerini yapmaktadır ayrıca Vue, Angular ve React gibi framework’lerden bileceğimiz üzere projeyi build edip çıktı aldığımızda sadece yazdığımız kodlar build edilen dosyaya dahil edilmemektedir yazdığımız kodlar dışında framework’e ait bazı araçlar ile çıktılar oluşturulmaktadır ve bu ekstra araçlar aracılığı ile de yazdığınız kodlar son kullanıcıya gösterimi sağlanacak şekilde tarayıcı tarafında compile edilmektedir buda performans kaybına sebep olmaktadır. Svelte bu işi build aşamasında yapmaktadır.

Bu konuda sizinle bir içerik paylaşmak istiyorum altta Svelte’ye ait package.json dosyasının içeriğini göreceksiniz.

Üstteki kod blokları arasında dependencies kısmını göremiyoruz buda şu anlama geliyor basic olarak oluşturduğunuz bir svelte projesinde herhangi bir şekilde hiçbir bağımlılık olmadan kendi yazdığınız kod bloklarına ait işlemler ile alakalı farklı bir kod üretilmediğini farkedeceksiniz.

Not: İhtiyaç durumunda dependencies kısmına birçok şey ekelenecektir en basitinden http isteklerini yapabilmek için bir paket eklemeniz gerekecektir. Dependencies kısmında hiç bir zaman paketlerinizin olmayacağını söylemiyoruz ama ihtiyacınız dışında tarayıcı tarafında kodlarınız ekstra compile edilmeye ihtiyaç duyabileceği bir şey olmayacaktır.

Svelte kurulumu

Bu kadar svelte’den bahsettikten sonra o zaman Svelte kurulumunun çalışma ortamınıza nasıl kazandırabileceğinizi görelim. Svelte için herhangi bir ekstra CLI aracına ihtiyaç yoktur(tabi daha önce nodejs kurduysanız) eğer çalışma ortamınızda node, npm ve npx varsa başka bir şeye ihtiyaç olmayacaktır node ve npm araçları https://nodejs.org/en/ adresinden yükleyeceğiniz uygulama ile hazır olacaktır sonrasında npm üzerinden “çalıştırılabilir npm paketleri(exe,bat)” çalıştırmak için npx paketini globla olarak alttaki şekilde kurmalısınız.

npm install -g npx

Paketlerin kurulu olup olmadığını öğrenmek isterseniz alttaki komutları deneyebilirsiniz eğer alttaki komutlar sonucuda size versiyon değerleri dönülür ise sisteminize kurulu olduğunu anlıyoruz.

npm --v
6.9.0
node -v
v10.16.1
npx -v
6.9.0

npx paketinide kurduğumuza göre artık Svelte için örnek proje oluşturabiliriz. Alttaki komutlar ile Svelte örnek projesi oluşturabilir ve projeyi çalıştırabilirsiniz.

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

Eğer sizde benim gibi Typescript ile javascript kodlamayı tercih ediyorsanız o zaman üstteki npx komutunda kullandığımız sveltejs/template adlı template yerine pyoner/svelte-ts-template template’ini kullanarak Typescript üzerine inşa edilmiş seed projesini elde etmiş olursunuz ama örneklerimize sveltejs/template template’i üzerinden gideceğimizi belirtelim kişisel olarak uğraştığınızda yada proje geliştirmeye karar verdiğinizde typescript destekli template’e gözatmanızı tavsiye ederim.


Karşılaştırma

RealWorld Comparison
Image: Jacek Schae

Bu kısımda Svelte’nin performans konusunda hangi konumda olduğunu göreceğiz. Performans ölçümleri için açıkçası kendim bir efor sarfetmedim freeCodeCamp‘ın bu anlamda neredeyse bütün SPA frameworklerini karşılaştırdığı görselleri sizlerle paylaşıyor olacağım. Tesleri gerçekleştirirken Todo gibi basit uygulamalar üzerinden değilde Gerçek hayat örnekleri üzerinden testlerin yapıldığını söyleyelim ve kullanılan bu Gerçek hayat örnekleri içinde RealWorld adındaki repo’da yer alan hazır örneklerden faydalanılarak test sonuçkarı hazırlanmıştır. Sizde ihtiyaç duyarsanız front-end ve back-end olarak yer alan tüm diller ve framework’ler için aynı örneklerin farklı ortamlarda nasıl yazıldığı ve performans sonuçlarının nasıl olduğunu kendiniz test edebilirsiniz.

Performans

SPA Frameworks Performance

Üstteki sonuçları değerlendirirsek en yüksek puan alan framework’ler en iyi kullanıcı deneyimi sunan ve en hızlı çıktı veren framework’lerdir 90 ve üzeri bütün sonuçların yeterli olduğunu söyleyebiliriz.

Boyut

Buradaki boyuttan kasıt dosya boyularından bahsedilmektedir dosya boyutu karşılaştırmalarının compile edilmiş halleri üzerinden yapıldığını belirtelim. Ayrıca RealWorld örneği üzerinden aynı yapıya ve aynı sonuca ulaşmak için yazılmış kodlar olduğundan bir framework’de fazla diğerinde eksik kod olma durumu yok aynı sonuca ulaşılabilecek şekilde kodlama yapılmıştır.

SPA Frameworks Comprasion Size

Üstteki görüntüde en düşük değer en başarılı framework’ü belirtmektedir burada görebileceğiniz üzere Hepsi RealWorld uygulamasına sahip ama Svelte’nin çıktısı sadece 9.7KB büyük bir başarı.

Kodun Uzunluğu

Burada kodun uzunluğundan kastedilen aynı amaca ulaşmak için kaç satır kod yazmamız gerekiyor o zaman hemen alttaki grafiğe bakarak Svelte’nin ne aşamada olduğunu görüyoruz.

SPA Framework Comprasion Line Codes

Gördüğünüz gibi ilk 3 arasında girmeyi başaran Svelte ile az kod-çok iş çıkarabilirsiniz az kod yazdığınız için de haliyle dosya boyutuda dolaylı olarak etkileniyor bu durumdan.

Son olarak Svelte kurucusu olan Rich Harris‘in sunumuyla ortaya çıkan Svelte 3 tanıtım konferans video’sunu izlemenizi tavsiye ederim.


📚 İlgilenebileceğiniz Diğer Makaleler


📚 Kaynaklar


✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.

🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.

👋 Bir sonraki makalede görüşmek dileğiyle.

İlk Yorumu Siz Yapın

    Bir Cevap Yazın

    %d blogcu bunu beğendi: