jsPlumb and ReactJS

[Arthur Kovacs]

I saw in the tests that jsPlumb get really clogged (pun totally intended :)) ) when adding more elements.

For our app the top limit would be like 1000 drawn element with different connections between them. 

What I was wondering, is it possible to pass what jsPlumb is doing through ReactJS's shadow DOM rendering ?

That would increase performance for lots of elements and connections in my opinion.

Is it possible?

Thanks guys,

Arthur

[Simon Porritt]

It's true that current versions of jsPlumb get a little bogged down with a lot of elements.  In 1.7.0 - the next release - I've put a bit of effort into reducing the number of page reflows that jsplumb causes when painting. I've managed to bring the load test page, on the default settings, down from ~1.7 seconds to about 350ms. That page really only tests connections, though, so I added a page that puts 1500 elements into the DOM and then adds endpoints to each of them, and with the various enhancements I've made I got the time taken down quite considerably on that one too. I haven't finished tinkering with it yet. I'm sure there are more enhancements I can make.

I don't know a great deal about ReactJS but I do know that I will never make jsPlumb depend on it, ha.  Are you talking about the shadow DOM, though, or are you talking about fragments?  I once did an experiment in which I created a document fragment and added everything to that, in the load test, and only added the fragment to the DOM itself when everything was done. I expected it to be much faster but it was in fact slower.  Not having the time to investigate I had to leave the reason for that as a mystery, but in the back of my mind is the notion that I should go back and investigate.

[kovacs.ar...@gmail.com]

Hey Simon, 

I wasn't talking about jsPlumb depending on ReactJS for functioning, it was more like a general question if someone has used in conjunction with ReactJS, I might've expressed myself badly :)

I was referring to the virtual DOm and if we can tell jsPlumb to render everything through ReactJS for a better performance. Also used in conjunction with Angular :)

Now that I got you here I have a few questions: 

Do you maybe have a milestone date set for 1.7.0 ?

Will the API change a lot in the new version?

And do you have some thoughts on custom shapes, not only rectangles (div's), I mean a more complex svg shape ( an electrical resistance maybe ) and how can you put the connectors on it. In this current iteration I've thought about placing an svg shape inside the div and moving the connectors relatively with CSS inside the said div to align on shapes edges, but it isn't that practical.  

At the moment the team I'm in, we're reviewing multiple diagram/schematic frameworks for an application that will have a module for this. 

Thanks Simon, have a really good day,

Arthur. 

—
Sent from Mailbox

On Thu, Sep 11, 2014 at 4:58 AM, Simon Porritt <si...@jsplumbtoolkit.com> wrote:

It's true that current versions of jsPlumb get a little bogged down with a lot of elements.  In 1.7.0 - the next release - I've put a bit of effort into reducing the number of page reflows that jsplumb causes when painting. I've managed to bring the load test page, on the default settings, down from ~1.7 seconds to about 350ms. That page really only tests connections, though, so I added a page that puts 1500 elements into the DOM and then adds endpoints to each of them, and with the various enhancements I've made I got the time taken down quite considerably on that one too. I haven't finished tinkering with it yet. I'm sure there are more enhancements I can make.

I don't know a great deal about ReactJS but I do know that I will never make jsPlumb depend on it, ha.  Are you talking about the shadow DOM, though, or are you talking about fragments?  I once did an experiment in which I created a document fragment and added everything to that, in the load test, and only added the fragment to the DOM itself when everything was done. I expected it to be much faster but it was in fact slower.  Not having the time to investigate I had to leave the reason for that as a mystery, but in the back of my mind is the notion that I should go back and investigate.

--
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/qEitbut0Mfw/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.

[Simon Porritt]

Oh right, I see...the virtual DOM is another thing altogether.  I should look into that a little more.

No set date for 1.7.0 yet, although it should be soon. As it is - on the `dev/1.7.0` branch - it passes all the unit tests, but I still need to run it in a few integration environments I've got, to ensure nothing subtle has broken.  Also, like I said, I think I can squeeze more performance out of it.

Nothing will be removed from the API in 1.7.0, but it is no longer supporting YUI or MooTools as the underlying library. jQuery is still supported, but I recommend to people to use Vanilla jsPlumb as it is faster and has more features (multiple element dragging, multiple scopes).

jsPlumb currently has the concept of `perimeter` anchors:

http://jsplumb.org/doc/anchors.html#perimeter

which perhaps go a little way to covering what you need, but are likely not fully featured enough. There are two enhancements to these that I've had in my list of things to look at for a while - firstly, allow a user to specify a custom shape, via a path consisting of a list of [x,y] locations. Secondly, I thought it might be quite cool if you could just tell jsPlumb that the anchor should follow some SVG `path`. This seems to me like it could be very useful.  I've held off on this one in particular because I still, up until 1.7.0, have to support VML (for IE8). But the next major release after 1.7.0 will be 2.0.0, and it will only support browsers that have SVG (IE9+, and everyone else).

Lastly, since you're evaluating frameworks/libraries, it would be remiss of me to not mention that I am on the verge of releasing what I think is a really cool wrapper around jsPlumb...it has data binding and layouts and a proper graph as a data model underpinning everything.  It isn't free, though. But it is awesome! (jsPlumb as you know it now - the view layer, basically - will always remain MIT licensed).