🦴

Backbone.js

Web uygulamaları için yapı taşı sağlayan, modelleri, görünümleri, koleksiyonları ve yönlendiricileri ile öne çıkan hafif bir JavaScript kütüphanesi.

📅 2010
👤 Jeremy Ashkenas
📦 1.6.x
📄 MIT
Resmi Site → GitHub

Temel Özellikler

🏛️

MVC Architecture

Models, Views, Collections ve Routers ile istemci tarafı uygulamalara yapısal bir düzen getirir.

🌐

RESTful JSON

REST API'leri ile senkronizasyon (sync) işlemleri arka planda sorunsuz çalışacak şekilde tasarlanmıştır.

🪶

Minimal & Flexible

Sadece 7.6kb boyutunda, projenize yön veren hafif ama güçlü bir iskelet sunar.

⚡

Event-Driven

Özelleştirilebilir olay (event) sistemi ile nesneler arası haberleşmeyi oldukça kolaylaştırır.

🔧

Underscore.js Integration

Veri manipülasyonu için zengin fonksiyon setine sahip Underscore.js'in gücünden yararlanır.

🗺️

History API

Uygulama içi yönlendirmeler için hem Hash tabanlı hem de pushState özellikli yönlendirme (routing) desteği.

Avantajlar ve Dezavantajlar

✅ Avantajlar

  • Minimal ve hafif yapıdadır.
  • MVC kavramlarını öğrenmek için ideal bir başlangıç noktasıdır.
  • Herhangi bir şablon (templating) motoruyla uyumlu çalışabilir.
  • Üretimde kanıtlanmış, oturmuş bir mimari (no magic/black box).

❌ Dezavantajlar

  • Çok minimal olduğu için birçok özelliği elle eklemek gerekir.
  • Kullanım oranı gün geçtikçe azalmaktadır.
  • Boilerplate (gereksiz tekrar eden) kod yazımı fazladır.
  • Sanal DOM (Virtual DOM) bulunmaz, DOM manipülasyonu manuel yapılır, eski bir paradigmadır.

Backbone.js Demoları

1. Model & Olaylar (Events)

Bir Backbone Modeli oluşturup veriyi değiştirdiğimizde (set), olay dinleyicisinin (change event) tetiklenmesi.

Model bekleniyor...

const User = Backbone.Model.extend({
  defaults: { name: 'Misafir', role: 'Kullanıcı' }
});

const user = new User();

user.on('change', function() {
  console.log('Model değişti!', user.toJSON());
});

user.set({ name: 'Admin', role: 'Yönetici' });

2. Collection + View (Todo Listesi)

Backbone Koleksiyonu (Collection) ve Görünümü (View) ile basit bir liste yapısı.


const Todo = Backbone.Model.extend({ defaults: { title: '', completed: false } });
const TodoList = Backbone.Collection.extend({ model: Todo });
const todos = new TodoList();

const AppView = Backbone.View.extend({
  el: '#todo-list',
  initialize: function() {
    this.listenTo(todos, 'add', this.render);
  },
  render: function() {
    this.$el.html('');
    todos.each(todo => {
      this.$el.append(`
${todo.get('title')}
`);
    });
    return this;
  }
});

3. Yönlendirici (Router)

Hash (#) tabanlı navigasyon ile sayfalar arası geçişin simülasyonu.

Ana Sayfa Hakkında İletişim
Buraya route içeriği gelecek... 

const AppRouter = Backbone.Router.extend({
  routes: {
    '': 'home',
    'about': 'about',
    'contact': 'contact'
  },
  home: function() { render('Ana Sayfa'); },
  about: function() { render('Hakkında Sayfası'); }
});

Backbone.history.start();

4. REST API Senkronizasyonu

Koleksiyonların dışarıdan veri çekmesi (fetch) ve Backbone'un bunu modeller ile eşleştirmesi.


const PostCollection = Backbone.Collection.extend({
  url: 'https://jsonplaceholder.typicode.com/posts?_limit=3'
});

const posts = new PostCollection();
posts.fetch({
  success: function(collection) {
    console.log(collection.toJSON());
  }
});

Kullanım Senaryoları

Eski ve Büyük Web Uygulamaları

Mevcut birçok büyük ölçekli ve yıllanmış projede (örneğin eski Trello veya Soundcloud sürümleri) Backbone izlerine rastlayabilirsiniz.

jQuery Merkezli Projelere Yapı Kazandırmak

Yalnızca jQuery ile yazılmış spagetti kodları düzenlemek ve bir MVC düzeni kurmak için idealdir.

Hafif İstemci Uygulamaları

Yüzlerce kilobaytlık modern frameworklerin fazla geleceği küçük projelerde iskelet kurmayı sağlar.