Backbone.js – MVC Javascript library

1. Giới thiệu Backbone.js

Backbone.js là một thư viện javascript giúp triển khai cấu trúc của 1 ứng dụng web dưới mô hình MVC. Backbone.js cung cấp các thành phần cơ bản : Model, Collection, View, Events. Dữ liệu tương tác có thể truyền tới và xử lý bởi server dưới dạng RESTful JSON.

Các dự án và hệ thống tiêu biểu có sử dụng Backbone.js

– Document Cloud (http://www.documentcloud.org/public/search/)

– USA Today (http://www.usatoday.com/)

– WordPress.com () : sử dụng Backbone.js trong hệ thống thông báo

v.v…

2. Các thành cơ bản của Backbone.js

Model

Trong Backbone.js, Model là thành phần chứa dữ liệu và những logic tương tác xung quanh các dữ liệu đó: chuyển đổi, kiểm tra dữ liệu, tính toán thuộc tính, kiểm soát truy cập.

Các Model đều được mở rộng từ đối tượng Backbone.Model, chứa những thuộc tính và hàm cơ bản :

extend, constructor / initialize, get, set, unset, id, toJSON, …

Collection

Collection là tập hợp có thứ tự của các Model, được tạo thành bởi việc mở rộng đối tượng Backbone.Collection. Mỗi hành động tác động lên 1 Model trong Collection đều được Collection ghi nhận trực tiếp. Collection có các thuộc tính và phương thức mặc định : extend, model, constructor / initialize, models, toJSON, sync, kèm theo các phương thức có được từ thư viện Underscore.js.

View

Thành phần View trong Backbone.js không chứa mã HTML mà chứa những logic để hiển thị dữ liệu từ Model tới người dùng. Việc này thường được thực hiện bằng các template Javascript, ví dụ Underscore Microtemplates, Mustache, jQuery-tmpl.

Events

Event là mô dun có thể kết hợp với các đối tượng khác, tạo nên khả năng ghi nhận và kết nối các sự kiện tác động lên đối tượng đó.

Các phương thức cơ bản của Event : on, off, trigger, once, listenTo, stopListening, listenToOnce

Ngoài ra, thư viện Backbone.js còn một số thành phần khác như : Router, History, Sync.

3. Ví dụ sử dụng Backbone.js

Ví dụ cơ bản minh họa cho Backbone..js là Todo list, được  mô tả trên TodoMVC (http://todomvc.com/architecture-examples/backbone/) cùng với nhiều  Todo list cho các thư viện khác. Ví dụ này sử dụng LocalStorage để lưu trữ dữ liệu.

– Để kết hợp giữa Backbone.js và PHP, tác giả đã chỉnh sửa ví dụ Todos theo dạng client – server :

    + Client : Backbone.js

    + Server : PHP Slim framework + Redbean (tương tác với cơ sở dữ liệu)

    + CSDL : MySQL

– Code và các bước cài đặt chi tiết : https://github.com/trvinhlong/todos-backbone-slim

Tài liệu tham khảo:

http://backbonejs.org

http://addyosmani.github.io/backbone-fundamentals/

http://www.slimframework.com/

http://www.redbeanphp.com/