Utility kütüphanelerine son! JavaScript neyinize yetmiyor?

Oğuzhan Aslan
May 31, 2018 · 3 min read

Lodash ve Underscore, JavaScript yazarken utility kütüphaneleri olarak yıllardır bize yardımcı olmaktadır. Uzun bir süredir Frontend geliştiricileri tarafından yaygın olarak kullanılıyor.

Buraya kadar bir sorun yok. İhtiyacımız olan sorunları çok güzel çözüyorlar.

Ancak, günümüz standartlarını düşünerek hareket ettiğimizde, ECMAScript2015 [ES6] sayesinde zaten bu utility kütüphanelerinin sunduğu özellikleri, ek bir kütüphane kullanmadan JavaScript yazarak çözebiliyoruz.

Image for post
Image for post
Lodash

Bir zamanlar benim de yaptığım gibi, yıllardır süregelen alışkanlığınızı bozmak istemeyebilirsiniz. Zira ben de işlerimi hızlı bir şekilde çözebildiğim Lodash’i bazı eski projelerde hala kullanıyorum.

Lodash boyut olarak bakıldığında, aslında büyük bir ağırlık oluşturmuyor.

Ama performans arttırmak ve dependency azaltmak gibi faydalar olduğu düşünüldüğünde, bu kütüphaneleri bırakmanın doğru bir karar olduğunu göreceksiniz. Aşağıda yaptığımız benchmark testleride bunu gösteriyor.

Projemizin daha az dependency barındırmasını istiyorsak ve bu kütüphaneleri kullanarak yaptığınız işlemlerin daha hızlı çalışmasını istiyorsak, Lodash / Underscore’a ihtiyacımız olmayabilir.

Bu yazıda Lodash rakibi Underscore’a göre daha fazla kullanıldığı için Underscore ile herhangi bir karşılaştırma ve örnek olmayacaktır.

Performans

İyi bir kullanıcı deneyimi sağlamak, geliştirdiğimiz her uygulamada büyük bir önem taşıyor.

Bunu sağlamanın bilinen en ucuz yöntemi ise performanslı bir uygulama geliştirmek.

Image for post
Image for post

İlk aşamada sıklıkla kullandığımız metodların tam olarak ne işe yaradıklarını hızlıca öğrendikten sonra, native ve lodash performans sonuçlarını göreceğiz. Ardından lodash’de bulunan metodların JavaScript’te ki karşılıklarını anlatacağım.

Yapacağım karşılaştırmalardaki farklar, son kullanıcı üzerinde gözle görülür bir şey ifade etmeyebilir. Ama uygulamalarınız büyümeye başladığı zaman, bu tarz optimizasyonlar yapmaya ihtiyacınız olacak.

Ben yazıda yapacağım karşılaştırmalar için, measurethat kullanmaya karar verdim. İçerisinde yer alan diğer testlere de bakmanızda fayda var.

_.find vs find()

JavaScript’te find metodu callback olarak çalışıp, doğru bir değer döndürene kadar her bir index için callback fonksiyonunu çalıştırıyor. Eğer callback fonksiyonu çalıştığında eleman bulunursa elemanın değeri döndürülüyor. Eğer olumsuz sonuçlanırsa undefined dönüyor. Lodash’de ise karşılık olarak _.find() kullanılıyor

Test Sonucu:

Image for post
Image for post

🏆 Native kodumuz oyunu kazanıyor.

İlgili test: https://www.measurethat.net/Benchmarks/Show/3174/0/find-benchmark-test

Döküman:
Array.prototype.find()
_.find()

Bu metod ES2015 spesifikasyonunda standart durumdadır.

_.merge vs Object.assign()

Object.assign(), bir ya da daha fazla kaynaktaki nesneleri kopyalamak için sıklıkla kullandığımız basit bir metod. Lodash tarafında iki nesneyi kopyalayıp bir şeyler oluşturmak için ise, benzer olarak _.merge kullanabiliriz.

Test Sonucu:

Image for post
Image for post

🏆 Native kodumuz yine oyunu kazanıyor.

İlgili test: https://www.measurethat.net/Benchmarks/Show/3177/0/merge-vs-objectassign

Döküman:
Object.assign()
_.merge

Bu metod ES2015 spesifikasyonunda standart durumdadır.

_.includes vs includes()

includes() metodu bir dizinin herhangi bir elemanı içerip içermediğini kontrol eden yardımcı bir metoddur. Boolen olarak değer döndürmektedir.

Image for post
Image for post

🏆 Native kodumuz yine oyunu kazanıyor.

İlgili test: https://www.measurethat.net/Benchmarks/Show/3182/0/includes-vs-includes

Döküman:
Array.prototype.includes
_.includes

Bu metod ES2015 spesifikasyonunda standart durumdadır.

_.every vs every()

every() metodu bir dizideki elemanların, belirlenen bir koşulu karşılayıp karşılamadığını sorgular.

Image for post
Image for post

🏆 Native kodumuz yine oyunu kazanıyor.

İlgili test: https://www.measurethat.net/Benchmarks/Show/3087/0/lodash-every-vs-native-every

Döküman:
Array.prototype.every()
_.every

Yararlandığım Kaynaklar:

Maarifa UX & Consultancy

Kullanıcı Deneyimi (UX), Tasarım ve Frontend teknolojileri…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store