jQuery ile geliştirilmiş bir library’in Vanilla JS ile yeniden yazılması ve DOM, Event Listeners, Html Binding vs. bazı diğer notlar

Bu yazıda, bir envato like “jquery preview” library’sini jQuery’den Vanilla JavaScript’e nasıl taşıdığımı ve bu süreçte nelere dikkat ettiğimi ele alacağım.

jQuery ile yazılmış bir ürün önizleme library’sini Vanilla JavaScript’e dönüştürdüm. Dönüştürme işlemini tamamladıktan sonra, Vanilla JavaScript kodunu, orijinal jQuery eklentisinin bulunduğu Mehbub Rashid’in jQuery Envato Preview reposuna bir pull request olarak gönderdim. Bu pull request, repo sahibi tarafından memnuniyetle karşılandı ve yazdığım kod merge edildi.

jQuery’den Vanilla JavaScript’e Geçişin Önemi

jQuery, uzun yıllar boyunca web geliştiricilerine büyük kolaylıklar sağladı. Ancak modern web tarayıcılarının gelişmesiyle birlikte, Vanilla JavaScript (yani, herhangi bir kütüphane veya framework kullanmadan yazılan JavaScript) kullanarak aynı işlevselliği daha hızlı ve daha verimli bir şekilde sağlamak mümkün. Bu yazıda vanilla JS’e geçişte nelere dikkat ettim, bunların detaylarına değindim.

Pluginin Vanilla JavaScript ile Yeniden Yapılandırılması

Dönüştürme sürecine başlamadan önce, orijinal jQuery eklentisinin temel işlevselliğini ve yapısını anlamak önemli. Bu library, kullanıcı bir linkin üzerine hover ettiğinde, ürün hakkında detaylı bilgi gösteren bir önizleme penceresi oluşturur ve içeriği sunar. Orijinal eklenti, fare olaylarını (mouseover ve mouseout) dinler, ve bu olaylar yaşandığında, DOM’a dinamik olarak HTML ekler. Oluşturulan HTML içeriği, önizleme resmi, ürün adı, yazar, kategori ve fiyat bilgilerini içerir.

1. Event Listeners’ların dönüşümü

jQuery’de $(selector).on(event, handler) kullanımıyla kurulan event listeners’lar, Vanilla JavaScript'te element.addEventListener(event, handler) ile atanır. Bu, belirli bir DOM elementi üzerinde gerçekleşen olayları dinlememizi sağlar.

2. DOM Manipülasyonu

jQuery’nin kolay DOM manipülasyonu sağlayan metodları (append(), html(), attr(), vb.), Vanilla JavaScript'te document.createElement(), Element.innerHTML, Element.setAttribute(), ve Node.appendChild() gibi native metodlarla yer değiştirir.

3. Dinamik İçerik Oluşturma

Orijinal eklentide dinamik olarak oluşturulan HTML içeriğini, Vanilla JavaScript kullanarak document.createElement() ve Element.innerHTML ile oluştururuz. Örneğin, bir <div> oluşturmak ve içeriğini doldurmak için bu metodları kullanırız.

4. Ekran’ın belirli alanlarının kullanılması

Orijinal eklentide önizlemenin konumlandırılması için yapılan hesaplamalar, Vanilla JavaScript’te window.innerWidth, window.innerHeight, element.offsetWidth, ve element.offsetHeight kullanılarak tekrarlanır. Bu, önizlemenin ekran dışına taşmamasını sağlar.

5. Performans ve Erişilebilirlik İyileştirmeleri

Vanilla JavaScript kullanımı, sayfanın yüklenme süresi üzerinde olumlu bir etki yapar. Ek olarak, kodun semantik açıdan daha anlaşılır olması, erişilebilirlik ve SEO açısından faydalar sağlar.

Sonuç

jQuery’den Vanilla JavaScript’e geçiş, modern web geliştirme pratiklerine uyum sağlamanın yanı sıra, sayfa performansını artırma ve dış bağımlılıkları azaltma fırsatı sunar. Bu dönüşüm süreci, temel JavaScript bilgisini pekiştirmek ve daha temiz, bakımı kolay kod yazma becerilerini geliştirmek için önemlidir. Özellikle, olay yönetimi, DOM manipülasyonu ve dinamik içerik oluşturma gibi konularda derinlemesine bir anlayış kazandırır. Dönüştürme sürecinde karşılaşılan zorluklar, problem çözme yeteneklerinizi geliştirecek ve JavaScript üzerinde daha sağlam bir hakimiyet kurmamıza yardımcı olacaktır.

Orjinal Repo: https://github.com/MehbubRashid/jquery-envato-preview Pull Request: https://github.com/MehbubRashid/jquery-envato-preview/pull/1

Gelecek yazılarda görüşmek üzere.