Backbone İntroduction

Merhaba arkadaşlar, Backbone.js yazılarına hoş geldiniz Backbone nedir, nasıl kullanılır, niçin kullanılır gibi birkaç başlık giriş yazımızın konuları olucaktır. Vakit kaybetmeden başlayalım;

Hamd, göklerin Rabbi, yerin Rabbi bütün âlemlerin Rabbi olan Allah’a mahsustur.

Casiye/36

Backbone.js

Backbone single-page uygulamalar oluşturabileceğiniz küçük/hafif bir javascript frameworkudur. MVC(Model-View-Controller) design pattern merkezlidir. Uygulamaların standalone yapıdan çıkıp çok kullanıcılı sistemlere geçmesi ile yazılımın geliştirilmesini kolaylaştırmak adına frameworkler ortaya çıktı. JS için Backbone ve birkaç daha alternatif bulunmakta. Dom manipulasyonun zor oluşu, event handling mekanizmasının bazı noktalarda yetersiz kalması ve spagetti kodlar bu frameworkların ortaya çıkmasındaki etkenlerden birkaçı.  JS kodunuzu spagetti kod olmaktan çıkarıp genişletilebilir/değiştirilebilir/esnek bir yapıya geçirir. Aslında MVC yerine MV* de diyebiliriz Backbone için. Çünkü Backbone, Controller kullanmanız için sizi zorlamaz. Uygulamalar kendi kodlarını Controller gibi de kullanabilir. RESTful entegrasyonu ile database işlemleri kolayca yapılabilmektedir.

2015-03-18 11:25:38

MVC hakkında bilgi sahibi değilseniz buraya bakabilirsiniz.

 

Backbone.js Neler İçeriyor?

1 – Model

Her uygulama kendi içerisinde kullandığı dataları organize etmek isteyecektir. Birbiri ile ilişkili datalar belli bir model olarak kullanılır. Veriyi soyutlamak , gerçek hayattaki nesneler gibi düşünmek işlerimizi kolaylaştırmaktadır. Backbone, kendi modellerini oluşturmanızı ve yönetmenizi sağlar. Backbone, default olarak modelleri persist( kalıcılık/db , yakında JPA’da yazıcam insaAllah ) eder. Default olarak localStorage üzerinde modeller persist edilir. Ek olarak RESTful entegrasyonu ile server üzerinde de persist edebiliriz. Model üzerinde validasyon kontrolllerini de gerçekleştirebiliriz. Bir modelin, persist edilmeden önce doğruluğu belirlenmelidir. Yanlış bilgi adamı kalpten götürür . Backbone Model nasıl kullanırız bir bakalım;

Bir Person modelimizi oluşturduk. Bunun için Backbone.Model sınıfından extend ettik. Yeni tanımlanmış her model Backbone.Model üzerinden extend edilmelidir. Daha sonra Person modelimiz içerisine değişken, method, yapılandırıcı vs. yazacağız.

 

 

2 – Collections

Modellerimi gruplamaya yarar.  Ekleme/Çıkarma/Güncelleme/Bulma , sıralama, event handling, REST ile save etme/fetch etme gibi özellikleri vardır. Bir collections nasıl oluşturulur ona bakalım;

PersonCollection, Backbone.Collection sınıfını extend eder. Collection içerisinde add, remove, update gibi işlemler yapılabildiği gibi bu olayların dinlenmesi de gerçekleştirilebilinir.

 

 

3 – View

Javascript uygulamarında önemli bir problem olarak ortaya çıkmakta. UI elementleri değişen dataya göre handle etmek zor olmakta. Backbone, views ile html elementlerini soyutlar. Html üzerinde observers(gözlemleyici) rolü üstlenerek eklenen/silinen/değişen data’ya göre kendini data’ya göre yeniden render eder.

 

4 – Routers

Single page web application yazmak istiyorsak routers çok faydalı olucaktır. Eğer url, render olunacak view/views ‘ı belirleyecekse routers faydalıdır. Routers, request olunan url’e bakarak requeste özel codeları çalıştıracaktır ve belli view’ı render ederek kullanıcıya sunacaktır. Bir Routers tanımlayacak isek eğer en az bir tane route(rota, yön vs.) ve bunun map(eşleme) fonksiyonu routers da olmalıdır.

 Nasıl kullanırız?

Backbone kullanamabilmemiz için underscore.js ve jQuery’ye ihtiyacımız var. Bunların belli bir sırayla kod içerisinde yazılması gerekli.

Buradan Backbone.js dosyasını , buradan underscore.js ve buradan da jQuery dosyasını temin edelim.

js dosyaları şu sırayla sayfaya dahil edilmelidir.

  1. jQuery
  2. underscore
  3. Backbone

introduction.html

Giriş yazımız’da Backbone’nun ne olduğunu, niçin kullanılması gerektiğini ve bileşenlerinden basitçe bahettik.

Sonraki yazımda Backbone Model konusuna detaylıca değinicem.

Mutlu kalın , kodla kalın ve bol bol Çay için

~ Saygılarımla Alican Akkus.

 

 

1707 Total Views 3 Views Today