JavaScript şuan web üzerinde kullanılan en popüler dillerden biridir. Başlangıçta sadece web sitesi tasarımında kullanılıyor olsa da günümüzde uygulama geliştirmekte de sıklıkla kullanılmaya başlandı. Bazı JavaScript kodlamaları (Node.js) sadece Front-end değil Back-end tarafında da çalışmaya fırsat tanıdı. Tek bir kullanışlı dil bilen geliştiricilere hem uygulama geliştirmek hem de web sitesi tasarlama imkanı tanıması nedeniyle JavaScript kullanımı da gitgide artmaya başladı. 

Geçtiğimiz yıl Stackoverflow platformunda yapılan bir ankete göre, ankete katılanların %67’si, JavaScript’i en yaygın kullanılan dil olarak ifade etmişlerdir. Sonuç olarak birçok işleve sahip JavaScript Kütüphanesi ve frameworkler sayesinde programcılar bu esnek ve kullanışlı dili sıklıkla kullanıyorlar.

Ancak çok sayıda kütüphane ve framework olması nedeniyle seçim yapmakta zorluk yaşanabilir. Bu sebeple hangi JavaScript kütüphanesini kullanmalıyız bu yazıda anlatmaya çalışacağız.

blank

JavaScript Kütüphanesi Nedir?

JavaScript kütüphaneleri, bir web sitesi veya JavaScript tabanlı geliştirilmiş uygulamalara çeşitli işlev, fonksiyon ve nesneler kazandıran kod depolarıdır. Daha önce başka kullanıcılar veya sizin tarafınızdan her işlev için ayrı olarak hazırlanmış bu kütüphaneleri herhangi başka bir projede kullanabilirsiniz. 

Bir program oluştururken yazılacak kodlar, işlevlerine göre kısım kısım bir yerlere kaydedilerek daha sonra bir araya getirilebilir. Bu şekilde geliştiriciler her işlev için o kodları tekrar tekrar yazmak zorunda kalmaz ve bu kütüphaneler ile yeniden kullanılabilen kodlar herkese zaman kazandırır.

JavaScript kütüphanelerini Nasıl Kullanabiliriz?

JavaScript kaynaklarına ulaşmak çok kolaydır. “Head” elementi içine aşağıdaki kod dizisini yazın.

blank

Bu işlem o URL adresinde bulunan kodların size kopyalanmasını sağlayacaktır.

Kullanım Amacına Göre JavaScript Kütüphaneleri

Çok çeşitli amaçlar için oluşturulmuş birçok JavaScript kütüphanesi bulunuyor ancak biz bu yazıda en kullanışlı olanları yayınlayacağız.

Veritabanı

Veritabanı yönetimi önemli bir olaydır. Bu sebeple bunun için geliştirilen JavaScript kütüphaneler size büyük kolaylıklar sağlayacaktır. Bu kütüphaneler sayesinde karmaşık sorgular oluşturabilir, otomatik tablo oluşturabilir, veri senkronize edebilir ve daha fazlasını da yapabilirsiniz.

Kaynak Kütüphane: TaffyDB ve ActiveRecord.js

Animasyonlar

Web sitenizde güzel animasyonlar oluşturmak ziyaretçilerinizin ilgisini çekebilir. Animasyon eklemek JavaScript kütüphanesi ile oldukça kolaydır. Burada verilen kaynaklarla etkili ve güzel animasyonlar oluşturun.Kaynak Kütüphane: Anime.js JSTweener

Formlar

Form doğrulamak, senkronizasyon, alan kontrolü, dönüştürme düzenleri ve daha fazlası için JavaScript kütüphanesini kullanabilirsiniz. Formlar web sitelerinin değişmez elemanlarıdır. Başkalarınca hazırlanmış hazır formları JavaScript kodları ile web sitenize kolayca ekleyebilirsiniz.

Kaynak Kütüphane: wForms, LiveValidation, Validanguage, qForms 

Yazı tipleri

Web sitelerini daha çekici hale getirmek üzere bazı içerik türlerinde yazı tipi değişikliği yapılmak istenebilir Bu amaçla kullanılabilen JavaScript kütüphanesi de mevcuttur.Kaynak Kütüphane: typeface.js

Matematik ve Dize İşlevleri

Matematiksel ifadeler, saat, tarih gibi eklemeler bazen sorunlara yol açabilir. Örneğin bir tarih eklerken birçok biçim, eğik çizgi ve nokta kullanmak gerekir. Böyle karmaşık işleri kolaylaştırmak üzere JavaScript kütüphanelerini kullanmak akıllıca olacaktır.Kaynak Kütüphane: Date.js, Sylvester, JavaScript URL kütüphanesi

Grafiklerde Veri Görselleştirme

Veri görselleştirme performans ölçümlerinde, istatistik kullanımında ve görüntülemesinde kullanılır. Verileri çizelge ve grafiklerle sunmak daha kolay analiz edilmesini sağlar ve işinizle ilgili bilinçli kararlar alınmasında yardımcı olur.Kaynak Kütüphane: Chart.js, Apex Charts, Algolia Places

Görüntü Efektleri

Yine JavaScript kütüphanelerini kullanılarak görüntülere efektler ekleyip ön plana çıkmasını sağlayabilirsiniz. Aydınlatma, keskinleştirme, tonlama, bulanıklaştırma, kontrast ayarı, çevirme ve yansıtma gibi efektleri bu şekilde oluşturabilirsiniz.Kaynak Kütüphane: ImagineFX, Reflection.js

Kullanıcı Arayüzü ve Bileşenleri

Web sayfalarını daha duyarlı ve dinamik hale getirmek için ve DOM işlemlerinin sayısını azaltmak için JavaScript kütüphaneleri kullanılır. Bu işlem sayfa hızını arttırarak daha iyi bir kullanıcı deneyimi oluşturacaktır.

Kaynak Kütüphane: ReactJS, Glimmer.js

Bunlar en yaygın kullanım durumlarıdır bu kütüphanenin diğer kullanım amaçları şunlardır:

  • Klavye kısayolu oluşturma
  • İletişim kutusu oluşturma
  • Sayfa düzenlerini hizalama
  • Günlük kaydı ve hata ayıklama
  • Yuvarlak köşeler oluşturma
  • Veri alımı AJAX
blank

En Popüler JavaScript Kütüphaneleri

jQuery

jQuery MIT lisansına sahip ücretsiz ve açık kaynaklı bir yazılımdır. 2006 yılında John Resig tarafından New York’ta geliştirilmiştir. Hızlı, hafif ve zengin özelliklere sahip klasik bir JavaScript kütüphanesidir. 

HTML belge işleme, animasyon, geçiş işlemleri ve Ajax işlerini daha basit hale getirir. Son verilere göre tüm web sitelerin ¾’ ü  jQuery kullanıyor.

Özellikleri

  • Sözdizimi CSS‘ e oldukça benzediğinden yeni başlayanlar için öğrenmesi kolaydır.
  • jQuery hafiftir gzip küçültmek yalnızca 30 kb olur, ve AMD modülünü destekler.
  • Kolaydır ve minimalist bir API’ye sahiptir.
  • Eklentilerle genişletilebilir.
  • Chrome ve Firefox dahil olmak üzere birçok tarayıcı destekler.
  • Stil özelliklerini işlemek ve öğeleri bulmak için CSS3 seçicilerini kullanır.

Kullanım Alanları

  • Efektler olaylar ve animasyonlar yaratmak.
  • JSON ayrıştırma
  • Ajax uygulama geliştirme.
  • Ertelenmiş objelerin işlenmesi için asenkron işleme kontrolü sağlar.
  • Sizzle kullanarak, DOM’ da öğe seçimi sağlar. 

React.js

React.js açık kaynak kodlu Front-end tarafında kullanılan bir JavaScript kütüphanesidir. Facebook mühendislerinden Jordan Walke tarafından 2013 yılında geliştirilmiştir. 

Önceleri Apache lisanslı olarak piyasaya sürülen React.js daha sonra MIT lisansıyla kullanılmaktadır. Hem JavaScript hem de HTML’i birleştiren JavaScript XML’i (JSX) destekler. Instagram, Facebook ve WhatsApp React kullanıyor.

Kullanım Alanları

  • Daha kolay hata ayıklama ve test etme.
  • Web uygulamaları ve etkileşimli siteler geliştirirken verimli ve kullanışlı arayüz oluşturmak için.
  • DOM’ a bir durum oluşturma ve onu yönetme için.
  • Mobil veya tek sayfalı uygulamalar geliştirirken temel olarak hizmet vermek için.

Data Driven Documents (D3.js)

Veriye dayalı belgeler (D3) veya D3.js, geliştiricilerin verilere dayalı belgelemek için kullandıkları bir JavaScript kütüphanesidir. BSD lisansı ile 2011 yılında piyasaya sürülmüştür. 

Kullanım alanları

  • Animasyonlu geçişler oluşturmak, olaylar boyunca karmaşık geçişleri sıralamak, CSS3 geçişleri gerçekleştirmek.
  • İşlevsel bir kodu geniş bir modül koleksiyonuyla yeniden kullanılabilir hale getirir.
  • Etkileşimli ve dinamik veri görselleştirme.
  • Verileri bir DOM’a bağlamak ve bunlar üzerinde veriye dayalı bir dönüşüm gerçekleştirmek için kullanılır. Örneğin bir sayı dizisi kullanılarak HTML tabloları oluşturabilir ve D3.js kullanarak bir SVG çubuk grafiği veya üç boyutlu grafik oluşturabilirsiniz.

Underscore.js

Underscore tipik programlama görevleri için çeşitli işlevler sağlayan bir JavaScript yardımcı kütüphanesidir. Underscore.js Chrome, Firefox ve Edge ile de uyumludur.

İşlediği verilere göre 4 farklı türde ve yüzden fazla işlevi vardır.

  1. Nesneler
  2. Diziler
  3. Hem nesneler hem diziler
  4. Diğer fonksiyonlar.

Kullanım alanları

Hızlı indexleme, JavaScript şablon oluşturma testi gibi özel işlemler yanında filtreler, haritalar gibi işlevsel yardımcıları da destekler.

Algolia Places

Algolia, sitenizde otomatik adres tamamlama kullanmanın kolay ve dağıtılmış bir yolunu sağlayan JavaScript kütüphanesidir. Kullanıcı deneyimini arttıracak son derece hızlı ve mükemmel doğruluktaki bir araçtır. Algolia Places OpenStreetMap’in açık kaynaklı veritabanından yararlanır.

Ülke veya şehir seçeceğiz zahmetsizce kullanabilirsiniz. Bir harita üzerinde gerçek zamanlı olarak bağlantı önerileri ile sonuçları hızlı bir şekilde görüntüleyebilirsiniz. Tüm sorgular otomatik olarak en yakın sunucuya yönlendirildiği için sonuçlar milisaniye gibi kısa sürelerde size sunulur.

Birden fazla girişi aynı anda doldurarak ödeme işlemlerini basitleştirebilirsiniz. Algolia yazım hatalarının üstesinden gelip sonuçları görüntülemeye yardımcı olur.

Kullanım alanları

  • Belirli bir konumu görüntülemek için oldukça kullanışlı haritalar eklemenize izin verir.
  • Formları daha verimli kullanmanızı sağlar.

Anime.js

Web sitenize veya uygulamanızı animasyon eklemek için anime.js bulabileceğiniz en iyi JavaScript kütüphanelerinden biridir. 2019 yılında piyasaya sürülen üçlü ancak basit bir API ye sahiptir. Chrome, Safari, Firefox, Opera gibi çeşitli tarayıcılarla çalışır. Anime.js ile karmaşık animasyon yöntemleri daha kolay hale gelir.

Kullanım alanları

  • Anime.js kontrol işlevlerini kullanılarak olayları senkronize bir şekilde oynatın, duraklatın, tetikleyin, tersine çevirin ve kontrol edin.
  • Tek bir HTML öğesi üzerinde aynı anda birden çok zamanlamaya sahip katmanlı CSS dönüşümleri oluşturun.
  • Anime.js özellikler ve zamanlamalar üzerinde kullanılabilir.

Chart.js

Web siteniz veya projeniz veri analizi ile ilgili ise ve çok sayıda istatistik sunmanız gerekiyorsa charts.js mükemmel bir JavaScript kütüphanesi olacaktır.

Chart.js projelerinize zaman kaybetmeden güzel grafikler eklemenizi sağlayan esnek ve basit bir kütüphanedir, açık kaynak kodlu ve MIT lisanslıdır.

Yüklemesi hafif öğrenmesi ve uygulaması kolaydır. Temel çizelgeler ve grafikler eklemek için basit bir yoldur. Sayfaları daha etkileşimli bir hale getirmek için animasyon yeteneklerine de sahiptir.

Kullanım alanları

  • Seyrek veya karmaşık veri kümelerini logaritmik tarih saat veya özel ölçeklerle oluşturun.
  • Karışık grafik türleri yardımıyla farklı veri kümeleri kullanıldığında net görseller oluşturabilirsiniz.

FullPage.js

FullPage.js Tam ekran kaydırma siteleri veya tek sayfalık web sitelerini kolayca oluşturmaya yardımcı olur. Kullanımı basittir sitenize slider ekleyebilirsiniz. React fullpage, angular fullpage, vue fullpage gibi JavaScript frameworklerini destekler. Hem dikey hem yatay da kaydırma sağlayabilir, farklı boyutlardaki ekrana ve farklı tarayıcılarda çalışacak uyumlu tasarımlar oluşturabilirsiniz.

Kullanım Alanları

  • Tam ekran kaydırma siteleri oluşturmak için.
  • Tek sayfalık bir web sitesi oluşturmak için.

Masonry

Masonry harika bir JavaScript ızgara düzeni kütüphanesidir. Bu kütüphane sayesinde dikey alanlarda ızgara düzeninde yerleştirme sağlayabilirsiniz. Popüler WordPress fotoğraf galerisi eklentileri bu kütüphaneyi kullanır. Bir duvar inşa ederken tuğlaların yerleştirmesine benzeyen işlevi vardır. Bu sayede gereksiz boşluklar ortadan kaldırılarak web sayfasındaki alanlar optimize edilir. Düzen yapısından ödün vermeden öğeleri sıralayabilirsiniz. 

Kullanım alanları

  • Farklı görüntülü boyutlarına sahip resim galerilerini yerleştirmek.
  • Farklı uzunluklara sahip olsalar bile blog sütunlarını da aynı şekilde listeleyebilirsiniz.
  • Tasarım proje görüntüler için etkileyici görseller oluşturabilirsiniz.

Three.js

Three.js üç boyutlu tasarımlarınızı keyifli hale getirebilen bir JavaScript kütüphanesidir. Modern tarayıcılarda sahneleri oluşturmak için webGL kullanılır. Eğer İnternet Explorer 10 ve altını kullanıyorsanız başka CSS3, CSS2, SVH oluşturucularını kullanın. Farklı geometriler nesneler, ışık, gölge, yükleyiciler, matematik öğeleri ve dokular oluşturabilirsiniz.

Kullanım alanları

  • Geometrik bir küp, küre ve benzeri oluşturmak için.
  • Bir kamera veya sahne oluşturmak için.