DOM API USAGE SERIES
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.
4.1 Model — View
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.
4.2 Collections — View
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
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
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.
