Photo by LOURDES CASTRO on Unsplash

Backbone.JS ile DOM Kullanımı -1

Bundan önceki yazılarda Template Engine(Mustache.js ve Handlebars.js) ile View nasıl oluşturulduğunu anlatmıştım. Şimdi işleri biraz daha geliştirerek Backbone MV* yapısını nasıl işlettiğini anlatacağım.

1. Giriş

Bu yazıyı daha önceden yazmış olduğum DOM API Kullanım Yöntemleri yazı serisinin bir parçası olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu şekilde bir yönteme başvurdum.

Öncelikle Backbone.js kendi yapısında Underscore.js ve JQuery kullanıyoruz. Ama önceki konularda anlattığım Template Rendering işleminden farklı olarak Backbone.JS Veritabanı ile CRUD işlemleri olan REST servisleri üzerinden UI haberleşen büyük ölçekte Web uygulamaları geliştirmek için tasarlanmıştır.

Bu yazımda Backbone.js temel işleyiş mantığından bahsedeceğim. Güncelleme ve veri akışının nasıl olduğunu anlatmaya çalışacağım.

2. Backbone.JS Neden İhtiyaç Var?

JQuery üzerinde birçok proje geliştirdim.

  • Trendocean projesi saf JQuery ve String işlemleri ile DOM oluşturma üzerineydi
  • Sigortacılık için yazmış olduğum Skorlama Motoru ve Editörü JQuery ve Mustache.js kullanıyordum.
  • UNDP kapsamında Türkiye Enerji Verimliliği Karar Destek Sistemini ve Tübitak Golgi Projesinin Web kısmında JQuery ve Handlebars.js kullanmıştım.

Tüm bu projelerde bileşen kapsamları belirlemek oldukça zor oluyordu, her bir sayfayı kendi içerisinde render kısmını yazıyor ve ortak kodları util sınıflarda topluyordum. Ama bu sistemler ölçeklenebilir yani birden fazla kişinin üzerinde çalışacağı projeler olmuyordu. Kodun her yerinde REST ile iletişim kuran async callback ve bu veriyi UI yansıtma işi veya UI’da kullanıcıdan gelen bilgileri alıp sunucuya iletme işlemleri vardı. Yani tüm bu kodlar tek bir JS içerisinde id üzerinden JQuery Selector işleyen karmaşık bir yapıda duruyor ve proje büyüdükçe işin içinden çıkılmaz daha karmaşık bir hale dönüşüyordu.

  • Daha sonra Thundra firmasında başladığımızda, proje zaten React -Redux üzerine başlanmıştı. Bizde bu yapıyı daha esnek olacak şekilde baştan yazarak devam ettik. Bu arada oluşan bir çok kütüphane ve bunların felsefesini yaşamadan direk React atlamış oldum. Bu yazılarda bu arada MV* olan kütüphanelerin gelişimi anlatmayı umuyorum. Backbone.js bunun ilk öncüsü olması açısından oldukça önemlidir.

3. Backbone.js Felsefesi?

Backbone.js veriyi Model yapıları ile soyutlar. Modeller oluşturulabilen, doğruluğu kontrol edilen, silinen ve sunucuya kaydedilen bir yapıdır. Herhangi bir zamanda Kullanıcı Arayüzünde(UI) bir aksiyon modelde bir değişiklik gerçekleşse bu model change eventi ile bunu View iletir. View kendisini renderler. Bu yaklaşımı ile sunucudan gelen veri sonrasındaki veriyi direk Id selector ile bulup DOM nesnesine aktarma işlemi gerçekleşMEZ. Bunun yerine değişimler Modeller üzerinde gerçekleşir ve View burdaki değişliği dinleyerek kendisini renderler.

Mevcut MVC yapılarından farklı olarak burada Controller yoktur bu değişikliği dinleme mekanizması direk View içerisinde gerçekleştirmektedir.

Böyle temel bir altyapının olması sizin Model/Collection ve Kullanıcı arayüzleri(View ve URL) tasarlamayı sizi zorlar. Siz bu yapıları tasarlayarak bu tek kod içerisindeki oluşan karmaşıklıktan kurtulursunuz.

4. Model,Collection ve — View Yapıları

Genelde UI Ekranları ya bir nesnenin güncellenmesi veya bir tablo/liste halindeki nesnelerin yeniden oluşturulması, silinmesi veya güncellenmesi üzerinedir.

  • Model — View : Tek bir model , kullanıcı arayüzü ilişkisini tanımlarken
  • Collections — View: Birden fazla model (Örneğin kullanıcılar, ürünler vb) ile kullanıcı arayüzü ilişkisini tanımlar.
image from https://backbonejs.org/

Model View ilişkisini incelediğimizde View olan herhangi bir değişiklik önce Model’e daha sonra sync ile REST üzerinden DB ve tekrar Model ve bu değişikliğin View yansıtıldığını görebilirsiniz.

Modelin Sorumlulukları;

  • Sunucu ile iletişim Sync Mantığı
  • İş mantığı ile verinin orkestra edilmesi
  • Veri üzerindeki değişikliği bir event olarak yayınlanması.

View Sorumlulukları;

  • Verideki değişiklik event dinleyip arayüzü tekrar render etmek.
  • Kullanıcı etkileşimini dinleyerek bu değişiklik isteklerini modele aktarmak.
image from https://backbonejs.org/

Elinizde bir model listesi var ise. Bir kitap listesi, kullanıcı listesi vs . Bunlar için Collections yapısı tanımlanmıştır. Yeni model oluşturma, listenin yüklenmesi, bir modelin silinesi, güncellenmesi vb işlemleri içerisinde barındırır. Ayrıca model içerisinde gerçekleşen olayları iletmesi amacıyla bir proxy görevide görür.

5. REST API ile Etkileşim

Bunun için backbone sitesinden aldığım şu. API Entegrasyonu için books API geliştireceğim. (Başka bir yazı içerisinde)

GET  /books/ .... collection.fetch();
POST /books/ .... collection.create();
GET /books/1 ... model.fetch();
PUT /books/1 ... model.save();
DEL /books/1 ... model.destroy();

Burda 2 farklı Get işlemi gerçekleştirilir. Bu 2 farklı fetch işleminin sonucunda Array Of Model veya tek bir tane Model nesnesi döner.

[{"id": 1}] ..... Collection listesini döner
{"id": 1} ....... Model objesini döner.

Tabi her zaman sunucunda dönen değer istenilen veri formatında olmayabilir bu durumda parse metodu kullanılarak dönen verinin içerisinden istenen kısım alınarak Collection nesnesine doldurulabilir.

6. View Rendering

image from https://backbonejs.org/

View kullanıcı etkileşimlerini yönetmek ve bu doğrultuda bu etkileşim bilgilerini modele iletmekten sorumludur. Model’den gelen değişimlerden sonra View tekrar render eder.

Rendering kısmında HTML, SVG veya Canvas oluştururken kullanılacak Rendering yöntemlerinde Underscore Template veya React içerisinde kullanılacak Virtual DOM yapısının kullanılıp , kullanılmayacağını geliştirici karar verir.

7. Routing

image from https://backbonejs.org/

Zengin içerikli web uygulamalarında ilgili uzantılardan sonunda olan # hash sonrası değişiklikler URL değişikliği olmadan aynı sayfa içerisinde kalmayı sağlar. Yani sunucuya gitmeden sadece ClientSide yeni JS yükleyerek sunucudan yeni AJAX call ile sayfanızı Render edebilirsiniz. Bu size SPA (Single Page Application) özelliği kazandırır. Bu konuda da hem Backbone ile hemde Backbone olmadan bu sistemin nasıl yapılabileceğini ilerleyen yazılarımda anlatacağım. Bu sistemin bir ilerisinde Require, AMD ile tüm JS tek seferde sunucunda çekilmesi yerine parça parça çekilmesi, bunun bir ileri seviyesinde de Webpack devreye alarak bu işlemlerin nasıl kullanıcının kontrolüne gerek kalmadan yapıldığını anlatmaya çalışacağım.

Neyse bu yazıda sadece Backbone.Router URL uzantılara göre View Rendering ve Modeli nasıl etkilediğini görebilirsiniz.

Bir sonraki yazımda Backbone kütüphanesinin temellerini oluşturan Event, Model, Collection, View, Router, History, Sync modülleri üzerinde örnekler ile duracağız.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

Referanslar

--

--

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