Backbonejs some notes

Look at this answer to this question: Understanding the internal structural dependencies of MVC in Backbone.js

You really don’t need to spend so much time with the architecture – it’s a framework that can either be used to help put together using simple OO constructs or an event-based design. You basically have ONLY 4 sets of classes (so to speak)

  1. Models – that store actual data that you need to store/manipulate and sync with server in a restful fashion (using JSON/ajax)
  2. Collections – to help you store a list of models and use the wonderful underscore.js to help iterate over it using various operations to make your life A LOT easier
  3. Views – Helps separate concerns. You restrict the rendering operations to this class and also use it to act as a “controller” – to capture events and perform operations on the model. Or to listen to a model’s or collection’s events so as to update the view when the underlying model changes.
  4. Router – Based on the url fragments you can choose to ‘route’ your applications logic – loosely speaking. Based on your url fragments you can choose what functions to invoke so you effectively ‘route’ to the right set of methods based on your logic.

And this is a good slides to visualize the backbonejs.

Some comparison with angularjs

To show how compact Angular code is, here is a full Angular App:

<input ng-model=”variable”>{{variable}}

That is all needed to auto-update your input variable on the right.
You can easily upgrade it by replacing {{variable}} by any Angular expression, for instance {{variable * 2}}.

If I need to do it in Backbone, I would have to create a template and put it into a separate script tag, then create Backbone Model and attach it to Backbone View, then define my rendering method in the View, and then set up event listener to update the model upon key press, and finally, another event listener to re-render the view upon model change! And further, any expression logic you have to implement yourself.

Some comparison with React

And this is a good an hour youtube Backbonejs tutorial 

<!DOCTYPE html>
<html>
    <head>
        <title>I have a back bone</title>
    </head>
    <body>
        <button id="add-friend">Add Friend</button>
        <ul id="friends-list"></ul>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
        <script type="text/javascript">
            (function ($) {
                Friend = Backbone.Model.extend({
                    //Create a model to hold friend atribute
                    name: null
                });

                Friends = Backbone.Collection.extend({
                    //This is our Friends collection and holds our Friend models
                    initialize: function (models, options) {
                        this.bind("add", options.view.addFriendLi);
                        //Listen for new additions to the collection and call a view function if so
                    }
                });

                AppView = Backbone.View.extend({
                    el: $("body"),
                    initialize: function () {
                        this.friends = new Friends( null, { view: this });
                        //Create a friends collection when the view is initialized.
                        //Pass it a reference to this view to create a connection between the two
                    },
                    events: {
                        "click #add-friend":  "showPrompt",
                    },
                    showPrompt: function () {
                        var friend_name = prompt("Who is your friend?");
                        var friend_model = new Friend({ name: friend_name });
                        //Add a new friend model to our friend collection
                        this.friends.add( friend_model );
                    },
                    addFriendLi: function (model) {
                        //The parameter passed is a reference to the model that was added
                        $("#friends-list").append("<li>" + model.get('name') + "</li>");
                        //Use .get to receive attributes of the model
                    }
                });

                var appview = new AppView;

            })(jQuery);
        </script>
    </body>
</html>
Advertisements

4 comments

    • LEON · July 14, 2015

      Yeah, it is a good start guide. With Spring 4, providing REST api with spring mvc is easier since we could have non-xml spring context. Also the @RestController let you not have to specify ResponseBody. What’s more ,the Gson http message converter is available for se/deserialization.
      As for backbone, it is so lightweight, i currently still found Angular more convenient for now in our projects. 🙂

      • sudha · August 6, 2015

        Yes you are right Leon, I too want to learn Angular.js…I have heard from a lot of people that Angular.js is a simple framework and very easy to learn as well 🙂

      • LEON · August 7, 2015

        Yeah, Angularjs is easy to start with, but there is some learning curve when it comes to digest loop, promise, directive scope/transclusion .etc. Have fun 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s