Giới thiệu về backboneJs

Giới thiệu về backbone Js

Trong quá trình phát triển web application, ban đầu, chúng ta đều tập trung vào phát triển backend, và hiện này, đã có khá nhiều framework cho backend ra đời như Yii, Zend, Spring, Truct, ROR.... Tuy nhiên, để quyết định việc thành công của một trang web còn phải kể đến thành phần không thể thiếu frontend. Vì thế, đã có một loạt framework nhằm cải thiện tốc độ của phát triển frontend như angularJS, JQuery, Bootstrap... Trong bài viết này, tôi tập trung giới thiệu về backboneJs, là một framework frontend, đồng thời trả lời các câu hỏi:

1. BackboneJS là gì?
2. BackboneJS bao gồm các thành phần chính nào?
3. So sánh giữa BackboneJS và AngularJS

I. BackboneJS là gì?

BackboneJS là một framework được xây dựng bằng javascript, phục vụ cho việc phát triển frontend. Framework này được xây dựng theo mô hình MV (Bởi vì nó chỉ có controller), và điểm nổi bật của nó là Sync, nó cho phép đồng bộ dữ liệu giữa client và server chỉ với phương thức save(). Ta chỉ việc khai báo endpoint, và gọi phương thức save() là được. Mà không cần phải sử dụng ajax ở khắp nơi nữa.

II. Thành phần chính của BackboneJS

Các thành phần chính của backbonejs bao gồm Model, View, Router.

Model Là định nghĩa của một object trong trong backbone bao gồm các các thuộc tính và các phương thức liên quan. Một điều đặc biệt trong model là chúng ta không cần thiết phải khai báo trước tất cả các thuộc tính của object này, việc thêm thuộc tính của một object thông qua các phương thức của nó!

Cấu trúc khai báo model:

var model_name = Backbone.Model.extend({
    defaults: {
        //khai báo giá trị mặc định của attribute
    },

    initialize: function(){
        //Phương thức contructor của object
    },

    myMethod: function(){
        //Phương thức của object
    }
  });

Ngoài những phương thức được khai báo ra, model của backboneJs còn bao gồm hai phương thức set và get mặc định được viết dưới dạng:

    object.set({attribute_1: value_1, attribute_2: value_2,...});
    object.get("attribute_name");

Ngoài ra, model của backbone hỗ trợ chúng ta kiểm tra giá trị được nhập vào thông qua khai báo validate:

    validate: function(attribs){
        //Kiểm tra điều kiên
        //return giá trị lỗi!
    }

và được sử dụng

    object.set({..., }, {validate : true});

xử lý trong model khi lỗi xảy ra

    initialize: function(){
        this.on("invalid", function(model, error){
          //Xử lý khi lỗi
        }
    }

Ngoài việc bắt sự kiện khi xảy ra lỗi, backbone còn hỗ trợ việc bắt sự kiện khi thay đổi giá trị của một object

    initialize: function(){
        this.on("change:#{attribute_name}", function(){
          //Xử lý sự kiện
        }
    }

ngoài việt viết ở trong phương thức contructor của object, còn có thể viết thêm hàm của chính object đó

    object.on("change[:attribute_name]", function(){
        //Todo something
    })

View tuy không phải là một phần trong ứng dụng của chúng ta, nhưng nó hỗ trợ model việc hiển thị dữ liệu cho người dùng thông qua giao diện bằng cách sử dụng các Javascript template. Phương thức render() của view có thể được sync với sự kiện change() của model mà không cần refresh toàn bộ trang, đây là một điểm mạnh của backbone.

Để taọ mới một view, chúng ta chỉ đơn giản khai báo theo cấu trúc:

    Var model_name = Backbone.View.extend({
        el: <phần_tử được_xác_định_trên_html>,
        render: function( event ){
        var template = _.template( <template>.html() );
        this.$el.html(template);
        return this;
        },
        events: {
            "submit <tên_phần_tử>": "<phương_thức>"
        },
        <phương_thưc>: function( event ){
            //todo
        }
    });

khai báo template

<script type="text/template" id="<tên_template>">
    //Content
</script>

Để thực hiện render, ta coi nó như một phương thức của object. Routers Routers trong backbone được sử dụng để quản lý trạng thái của trang web và kết nối các ứng sự kiện thông qua Url. Chúng được sử dụng thông qua pushState và History API của trình duyệt. Để định nghĩa một routers, chúng ta thực hiện như sau:

var router_name = Backbone.Router.extend({
    routes: {
        "state" : "method_name",
        "*other" : "defaultRoute"
    },
    method_name: function(){
        //Todo something
    },
    defaultRoute: function(other){
        //Todo something
    }
})

tiếp theo, chúng ta cần khởi tạo Backbone.history, nó sẽ tự động xử lý các sự kiện hashchange trong ứng dụng, đồng thời sẽ tự động xử lý các định tuyến được xác định và kích hoạt callback khi người dùng yêu cầu. Việc kích hoạt history của backbone chỉ đơn giản bằng cách thực hiện như sau:

    Backbone.history.start();
    Router.navigate();

đồng thời, chúng ta khai báo .navigate() trong phương thức để cập nhập URL. Nếu như không muốn thực thi phương thức, ta thực hiện như sau:

    method_name: function(factor){
        //Todo something
        this.navigate("extent_url/" + factor);
    }

nếu muốn thực thi phương thức này, ta chỉ cần thêm true

    method_name: function(factor){
        //Todo something
        this.navigate("extent_url/" + factor, true);
    }

Vì Backbone thiếu controler, do đó khi làm việc nhiều, chúng ta sẽ nhận thấy có sự nhập nhằn, vì các thao tác làm trong controler giờ được trải rải rác vào model và view. Tuy nhiên, điểm cộng của nó cũng khá nhiều, ví dụ như việc khai báo một view hay như khai báo và xử lý các sự kiện khá đơn giản, bên cạnh đọ, việc đồng bộ trực tiếp giữa model và view là một điểm cộng nổi bất của framework này.

Trên đây, bài viết đã giới thiệu backbone và các thành phần cơ bản của backbone. Trong phần tiếp theo, tác giả sẽ giới thiệu về build một ứng dụng Restful bằng backbone, và một số khái niệm nâng cao. Ngoài ra, có thể tham khảo ở http://backbonejs.org/ hoặc book Developing Backbone.js Applications

Cảm ơn mọi người!