612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

I’m trying to figure out possibilities and reasons for my plugins to rework them to use backbone.

I’m new to backbone and whenever i see some starter tutorial or a little more advanced one, i still can’t really find the real benefit of using backbone.

Most people say because of the wonderful data models you can set up with it and you don’t have to manipulate the DOM with hidden input fields etc.

But then i see some invoice calculator example with like 50 lines of code and all it does is calculates the total of a couple of checkboxes with a price behind it. And the example is trying to set a point why to use backbone for webapps etc.

Most of my plugins are using things like dynamically adding values for whatever, done with jquery and sometimes putting in hidden formfields to save the data.

How is backbone better for such usage?

If anyone has some good links please share!

1466 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says

+1

108 posts
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • United Kingdom
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Referred between 1 and 9 users
  • Bought between 1 and 9 items
  • Has been a member for 1-2 years
designedbydash says

Pretty sure its main use comes in to play when creating complex JS apps. It provides the MVC concept in JS, in theory allowing for more structure and in turn making it easier to manage your app.

114 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 100 and 499 items
  • Referred between 50 and 99 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 2-3 years
nagaemas says

I’ve previously written my page builder with jQuery-UI widget factory, and just short before release there was the new WordPress submission requirements!

That was when I was moving my functionality into plugins when I realized that the code could have been better. I didn’t know much about Backbone at that time, just saw it used on the new WP media uploader and didn’t take time to understand it. It was when I was rewriting some functionality of my framework when I realized that the code of the new WP media uploader is very well structured. The code on first sight is very vague and unfamiliar, with all those underscores and function names I’ve never seen before.

It was a hard decision, but finally I decided to discard my previously, almost finished page builder and rewrite everything using Backbone and immediately fell in love with it! The code using underscore and backbone is very elegant and completely event based. No need to play with selectors and all, and the performance boost is really visible compared to the jQuery-UI version. For simple functionality, in my opinion Backbone is an overkill, but for complex apps, it’s really worth it :)

Also, some code of the new media uploader is completely re-usable and helpful to make JS apps on top of Wordpress. If you want some good examples of backbone, you can find it integrated into WordPress!

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

@nagaemas

Thanks for your reply.

The Visual Compiler plugin also uses backbone since a while and i’ve studies the plugin. Allthough the plugin works fine, i think it’s a way too big overkill of many many code and separate files, and now with backbone i couldn’t say it’s is any less.

Besides that, it’s still using ajax to for example save or load a template. Also, in previous versions it loaded the block settings page through ajax in a modal. Now all setting windows are put inside a script tag inside the DOM of the post page. Now the WP media uploader does the same thing, but that’s only for one window. The VC pagebuilder has like 30 modules, and is putting 30 blocks of code in the DOM, which are loaded with backbone inside the modal when changing settings.

Now, the ‘app’ itself is a bit faster while opening a settings modal, but the main page is 2 times as big to load in the first place. Doesn’t that matter? Wouldn’t it be better to just use ajax for such thing?

Also, you and others indeed say you don’t need to work with selectors etc. But what about this:

events: {
    "change #filter select": "setFilter" 
},

this.on("change:filterType", this.filterByType, this);

"click #add": "addContact" 

These are rules from some tutorial, but they don’t call these selectors, but isn’t it some ‘like’ selectors. If you create interaction you still have to connect elements to a certain action, it’s only written in a different way.

I’ve read this tut btw: http://net.tutsplus.com/sessions/build-a-contacts-manager-using-backbone-js/ – it’s good explanation i think since this is the first article that gave me a good view on how backbone is used and what it does.

I’m just kicking some rocks and throwing in some thoughts to discuss with btw :)

114 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 100 and 499 items
  • Referred between 50 and 99 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 2-3 years
nagaemas says

@nagaemas

Thanks for your reply.

The Visual Compiler plugin also uses backbone since a while and i’ve studies the plugin. Allthough the plugin works fine, i think it’s a way too big overkill of many many code and separate files, and now with backbone i couldn’t say it’s is any less.

Besides that, it’s still using ajax to for example save or load a template. Also, in previous versions it loaded the block settings page through ajax in a modal. Now all setting windows are put inside a script tag inside the DOM of the post page. Now the WP media uploader does the same thing, but that’s only for one window. The VC pagebuilder has like 30 modules, and is putting 30 blocks of code in the DOM, which are loaded with backbone inside the modal when changing settings.

Now, the ‘app’ itself is a bit faster while opening a settings modal, but the main page is 2 times as big to load in the first place. Doesn’t that matter? Wouldn’t it be better to just use ajax for such thing?

Also, you and others indeed say you don’t need to work with selectors etc. But what about this:

events: {
    "change #filter select": "setFilter" 
},

this.on("change:filterType", this.filterByType, this);

"click #add": "addContact" 

These are rules from some tutorial, but they don’t call these selectors, but isn’t it some ‘like’ selectors. If you create interaction you still have to connect elements to a certain action, it’s only written in a different way.

I’ve read this tut btw: http://net.tutsplus.com/sessions/build-a-contacts-manager-using-backbone-js/ – it’s good explanation i think since this is the first article that gave me a good view on how backbone is used and what it does.

I’m just kicking some rocks and throwing in some thoughts to discuss with btw :)

Hi,

I don’t know how Visual Composer works in the backend, but my page builder consists of only three JS files, and about only ten templates. I’m actually replicating the coding style and structure of the WP media uploader. Trust me, it’s really good although very hard to understand. You can check the wp.media.View class inside media-views.js, it’s better to use this class instead of Backbone.View when you’re extending the views as it already has the implementation for managing child views. WP 3.6 has also this class moved into the core wp-backbone.js script. This means backbone is the future of WordPress isn’t it?

For the modal windows instead of using multiple template files, you can just generate the forms HTML on the backend dynamically using settings array like usually used on metabox fields. Request it via ajax and append it to the modal window. Just define the type, std, etc. no need for multiple templates :)

For the events, just create a separate view for each button, and trigger an event when it’s clicked, that’s how it’s done on the media uploader for the left-side menu. I suggest to just study the media uploader thoroughly as it’s really a good learning source.

612 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Sold between 10 000 and 50 000 dollars
ChapterThemes says

Yes i also think backbone will become more and more important within WordPress. That’s why i’m checking out possibilities. By now i’ve read and watched a lot of tutorials and i’m getting the hang of it and i start to see how this could be of great use in very dynamic plugins etc.

What you say about generating the forms ( a.ka. templates ? ) through ajax sounds like a good idea. But do you then already send in the data or you return an empty form/template and let backbone fill it in?

And say your plugin/builder ( or whatever ) has for example 10 modules/blocks, you create a model and view for each module ?

Anyway, thanks for pointing out to the media-views.js , will be looking into it!

114 posts
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • Exclusive Author
  • Bought between 100 and 499 items
  • Referred between 50 and 99 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Has been a member for 2-3 years
nagaemas says

Yes, just checked WP 3.6’s new revisions page also uses backbone for the UI. Just fill the form on the server as it’s more reliable and faster.

Yes, the way I’m doing it is creating separate views for everything that can be rendered (buttons, list etc.)

by
by
by
by
by
by