jsPlumb best javascript MVC implementation recommendation

[anthony vialleton]

Hello,

In order to make the best choice for my project, I need to know what is the best MVC javascript framework to couple with jsPlumb 1.5.5 (jQuery) to do the easiest and the most robust implementation in order to handle all business logic and a clean code division.

My choice will be made regarding these well-known frameworks :

1) AngularJS

This Stack post refers to a way to separate jsPlumb graphic code with AngularJS controller code (using a custom AngularJS service to handle jsPlumb logic) :

https://stackoverflow.com/questions/17573534/using-angularjs-and-jsplumb-use-jsplumb-functions-in-angularjs-controller

And there is a simple implementation example here :

https://github.com/mrquincle/jsplumb-example

2) Ember.js

I found this Stack post, referring to an issue (solved) :

https://stackoverflow.com/questions/12549494/using-jsplumb-in-an-ember-js-application

3) Backbone.js

I just find one sample very very ligthweight example but nothing else..

I got some informations about these 3 frameworks thanks to this helpful link : 

https://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/

I need to know what should be the best approach to make an heavy and clean front-end full-js application to couple with jsPlumb.

From my point of view, AngularJS is the best choice today, but I want to understand if it's possible with this framework, to add some new HTML elements on the fly and to bind them a AngularJS business logic ?

Thank you.

[Simon Porritt]

Your choice of framework is going to be a personal choice; I couldn't comment on the relative merits of each of the things you've mentioned here. Obviously Backbone is less of a "framework" than the other two, and in fact I think Angular like to say they're not a framework, they're something else, I can't remember what.

I know from first hand experience working on the commercial version of jsPlumb that the asynchronous nature of Angular's template rendering can introduce complications when you're trying to render nodes and then connect them: they may not actually be in the DOM when you expect them to be. This is a fairly common problem, judging from the number of hits you get when you google it. Proposed solutions - from Angular people - tend to be of the form "you're not doing it Angular enough", and posted solutions tend to be of the form "I put in a hacky timeout that makes me feel sullied but I did it anyway and moved on".

I haven't looked in any detail through the links posted about Angular solutions. I think from memory in the one on Github the author actually forces a call to `digest`; this is supposedly a not very Angular thing to do.

[Ben Felda]

I am using JSPlumb with AngularJS on www.techforcepro.com.  The left video shows the jsplumb portion in action.  My model is three objects, a container object with an array of endpoints objects, and a connection object.  The containers are in a repeater and are directives.  The endpoints are also in an repeater and are also directives where they made jsplumb endpoints, which is the angular way.  The connection saves the endpoint and midpoint values, color, thickness, as well as the id's of the source and sink.  Connecting on load is done in the parent controller, which is against the angular way, but ehh.  I do have to put a timeout in of 500ms to allow time for the endpoints to become instantiated before calling the connect function.  I haven't used any other framework, so I can't say what is better.

With angular, model manipulation that happens outside of angularjs scope requires a digest to be called for the action to bind to the model.  This is done in JSPlumbs handlers.  Integrating the two was pretty easy.

[anthony vialleton]

Really thank you for posting your personnal issue about this, I understand that there are some workarounds to understand how to do a good implementation of jsPlumb and Angular but the community seems to be there so it's a good support ;)

[Ben Felda]

Angular is very friendly to external plugins.  Just keep the plugin restricted to link functions inside the directive and it'll all start to make sense.  The rest of angular, (services and controllers) are for view model manipulation, and shouldn't have anything that touches the dom.  I do have to refactor mine to get the code out of the controller.  Inside of a directive, the link function takes an element object which is a jquery object of the dom element.  This object is what you apply JSPlumb functions to.  Feel free to message me directly if you have any questions.  There are great Angular communities, and a great JSPlumb community, but the combo is a bit difficult to come by.  Find a good blog on using JQuery plugins in angular and that will give you a good start.

[anthony vialleton]

Ok I see, so in your Angular service your passing jQuery objects to manipulate the DOM in order to externalize jsPlumb code from Angular controller ?

--
You received this message because you are subscribed to a topic in the Google Groups "jsPlumb" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jsplumb/Eab9xMJqmEc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jsplumb+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ben Felda]

Nope.  In the angular directive (not service).  I don't have a jsPlumb service, but I could.  Services are good for abstracting common functions out of the controller, and keeping objects alive site wide as services don't get destroyed.  Most functions exposed in the jsPlumb documentation will manipulate the dom though, and belong in directives.  That said, you technically can put your jsPlumb code in the controller to get everything working using jquery selectors.  The issue introduced here is jquery selectors will search the whole dom.  When you use directives, your code is scoped to that directive.  Inside the link function in the directive, the the element parameter passed in is already a jquery object so you can manipulate it right away.  

[anthony vialleton]

Yes, I understand, you are doing like this jsPlumb and AngularJS implementation : https://github.com/mrquincle/jsplumb-example/tree/master/angular 

It works fine but in order to get a very clean code convention I would suggest to get in touch with a Service instead of doing everything in my controller ;)

Thank you.

[Ben Felda]

Actually, that code is pretty clean.  The controller is only calling jsPlumb once in the redraw function to disconnect everything, which is something the author possibly couldn't avoid.  The controller is setting up the library of objects that will be the data behind the plumbing.  At the bottom are all of the directives that are doing the dom manipulation.  Moving objects and functions to a service really depend on the application, if you want them to be singleton instances, or available to other controllers.

--