4

USECASE: I am starting with a project which involves a lot of client side scripting. It is similar to a mini CMS where user can drag and drop html components. Somewhat similar to this. Now I am in a situation where I have to choose a MVC framework for defining the components that the user will be working on. (performing operations like drag, resize, delete etc).

Now the problem I am facing is,in choosing a framework which would be easy to learn and implement. I have the basic knowledge of Javascript and jQuery and have been using it for some time,but no experience with MVC.

My research from past 2 days says backbone.js is good to start,but I would like comments/suggestions over the flexibility it gives on handling html components and DOM elements. How can I store the initial content of the HTML components? (Outer boxes and structure).

Also, how can I handle multiple components of same type? Generating Id's dynamically is an option, but it becomes difficult to manage multiple elements with dynamic ids. Is there any other way they can be handled?

Which framework would it be easy to handle events on these components?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
KillABug
  • 1,414
  • 6
  • 34
  • 69

4 Answers4

7

i use backbone for a web app which involves dragging and dropping, and i use jquery ui to implement the drag and drop features. They integrate pretty well imo, when you want to implement a droppable backbone view, for example

render: function(){
    var $el = this.$el,
        over = false,
        origWidth;


       if (!this.$el.is('.ui-sortable'))
            this.$el.sortable({
                revert: false,
                axis: 'y',
                placeholder: 'placeholder',
                items: '.load-order',
                containment: this.el,
                receive: this.onOrderDrop,
                over: this.onOrderOver
                out: function(e, ui){
                    // Resize back to original width
                    if (over && ui.helper)
                        ui.helper.stop().animate({width: origWidth}, 'fast');
                    over = false;
                }

update:

with backbone views, you have a skeleton html structure which is then incremented with backbone views. Each view has a template which is rendered with model data you can read more about it at Backbone Essentials

also i made a small todolist to demonstrate draggable event with backbone
http://www.github.com/joaoxsouls/todolist

Om Shankar
  • 7,989
  • 4
  • 34
  • 54
jxs
  • 457
  • 4
  • 9
  • Oliveira Thanks for the inputs.Can you tell me how can I store the initial html that will load when the application loads?i.e I have a text component so its structure would be `
    (Other editor features)
    `,where will it be initially stored and called when I click on the menu or drag it on the canvas?Also,how can I handle multiple components of same type?Generating Id's dynamically is an option,but it becoms difficult to manage multiple elements with dynamic ids.Is der any other way they can be handled?     – KillABug Dec 07 '12 at 12:25
  • If you can just look at http://app.imcreator.com this link,it will help you understand my problem better.
    Thanks again     – KillABug Dec 07 '12 at 12:32
  • @Oliveira So,each component that I want to use will be a view at the beginning and for multiple components of same type multiple views would be created.Have I got you right??If possible can you point me to any example?Thank you for the help till now. – KillABug Dec 07 '12 at 14:00
  • yes, there are a lot of examples from backbone, as you can search, there's even a site comparing various js mvc frameworks on a todo list app [todo MVC](http://addyosmani.github.com/todomvc/), i myself when learning backbone developed a todo app https://github.com/joaoxsouls/todolist – jxs Dec 07 '12 at 14:04
  • Oliveira I am working on the examples but not got an idea exactly how my use case would get solved as it is a complex system.I was hoping for a few more replies.I will definitely accept it once I am sure I am in a good position with the solution suggested.Hence I just upvoted for now.In a day or two you get the acceptance.Even I don't like to keep open threads.Thanks – KillABug Dec 09 '12 at 01:36
  • If you can point me to an example which has some drag and drop feature,it would help me a lot to understand the flow as I am a bit new to javascript and backbone,I am finding it difficult to start coding! Thanks – KillABug Dec 11 '12 at 04:34
  • 1
    i can make an example for you, will post it when i have time – jxs Dec 11 '12 at 17:26
  • João Oliveira That would be definitely very helpful!! Thanks for your help.I am finding it a bit difficult architecting the app,as I am doing it for the first time,Your example and insights would definitely help. – KillABug Dec 11 '12 at 18:19
  • Have you tried working on the example you said earlier?If possible please let me know if you can send it to me,as I am a bit stuck over this. – KillABug Dec 21 '12 at 05:44
  • 1
    sorry, i did not forget, but i just haven't had time, starting today i will have more time and i'll do it – jxs Dec 21 '12 at 10:54
  • Thank you for your prompt reply and thanks for your gesture of helping.I would be awaiting your reply over it. – KillABug Dec 21 '12 at 11:05
  • yo sorry for the delay, here it is,https://github.com/joaoxsouls/todolist, basic draggable event, if you need anything just ask – jxs Dec 27 '12 at 04:12
  • Thanks for giving your time,but I am looking at some thing much different.The link I had added earlier [link](http://app.imcreator.com),this is something I want to achieve using some framework,but I am helpless right now due to lack of knowledge about such frameworks.Learning is taking time and hence I wanted some help to store a component HTML separate and perform similar events.If you can help me on it,it would be good.Sorry if I am asking too much,but still a newbie working hard to learn quickly! – KillABug Dec 27 '12 at 12:22
  • sorry, i don't understand what you are asking, but my example is very 101, and it's the beginning for the link you show. If you can't follow from it, you should read more about javascript and backbone, by the way you can accomplish dom data binding with the data attribute – jxs Dec 27 '12 at 14:34
3

Why do you want to use BackboneJS?

If its not a necessity, and you simply want a drag drop interface, you might want to look at this: http://omshankar.kodingen.com/engine-1.73/
The JavaScript has been minimised only to make it single line. Functions and variables are all intact, which in Chrome can be seen by clicking on {} in Sources

If its an extreme necessity, you can definitely have drag drop in backbone. Only thing is that you might have to initialize a drag drop again in the item's render function, every time its called.
Regarding having an HTML structure, outer box and components, make your HTML the way you want. It can be done. A sample Backbone application: http://omshankar.kodingen.com/exp/backbone-html5-dd/

It also has a drag-drop, but that's dragging image files from your OS into browser, not of your relevance

If you want to store HTML, you can do via local storage, or have that simply in your HTML file. Apply/Make Backbone view only to those parts that are dynamic

Om Shankar
  • 7,989
  • 4
  • 34
  • 54
  • Thank you for the inputs.Yes its not a necessity,it can be achieved using jquery.But,I had referred a [website](http://imcreator.com) for what I am trying to achieve.Its a complex system and I belived some MVC kind FWrk would help me to simplify it.Also,I went through some inheritance patterns like _class.js_ and they look good to work in my scenario.Could you please help me in going about it to implement the inheritance pattern.I would just like to know how can I separate the common events(like close a box) be separated.They would be functions,but calling them using `this` keyword – KillABug Dec 29 '12 at 04:24
  • To call a function with `this` keyword, it would be like changing the context - `bindCtx = function(fun, self){ return function(){ return fun.apply(self, arguments); }; }; `. Backbone gives you templating also, with MVC. For a simple `class` based solution, [my-class](https://github.com/jiem/my-class) would be most simple with a lesser learning curve. To separate common events should not be the only thing forcing you to choose Backbone, imo – Om Shankar Dec 29 '12 at 18:21
  • Its not,I had to make a choice to use a framework to make the development cycle easy.I am not limited to `backbone.js` but some research online suggested it is one of the best to pick.But,later I learnt about [class.js](http://ejohn.org/blog/simple-javascript-inheritance/) written by an awesome google guy and this seems to be very flexible to implement `inheritance` using `this`. I am still learning it and exploring possibilities to make the development process as simple and smooth as possible.Although I am not that experienced as well to architect it,hence seeking some help – KillABug Dec 31 '12 at 07:06
1

I suggest Angular JS? It has great binding and directive features.

Farshid Zaker
  • 1,960
  • 2
  • 22
  • 39
  • Can you add some more info on the queries I mentioned like how can I initially store the HTML and call it on some event? – KillABug Dec 07 '12 at 12:04
1

AngularJS is great, especially if you couple it with something like ConversationJS:

https://github.com/rhyneandrew/Conversation.JS

I'm not a big fan of how "spaghetti" angular feels, and Conversation allows you to decouple quite a bit of it without changing the way it works. It makes the code base quite a bit cleaner.

Andrew Rhyne
  • 5,060
  • 4
  • 28
  • 41