🌎 Preplanning: Is Three.js performant while the jQuery library lives nearby?

Questions
, ,
1

My plans are to use jQuery within the interface I’m developing not within Three.js development directly.

What experience(s) have you had with using the jQuery Library while running Three.js?

  1. Is using the jQuery library bad practice?
  2. Will I eventually tear out jQuery and go back to pure vanilla JS?
  3. What side-effects could occur while using jQuery?
  4. Anything else I may be missing?
2

  1. Why should jQuery be bad practice? Basically it just makes dealing with the dom easier, but is a rather bare/loose library instead a structured framework for UI. Most “widgets” and libraries are rather encapsuled and a lot has to be hardcoded, it depends on the scale of your project, but there are also more structured frameworks based on jQuery. The size of the library itself isn’t relevant as well as long as you don’t need to maxopt the loading speed.

  2. As mentioned it depends on the scale, i personally wouldn’t use it aside from demos, small hacky things.

  3. As long as you don’t start any css selections like $('#health').text(player.health) in a render loop :grimacing: there is no big difference, and most functions of jQuery basically wrap just very basic things into functions to chain calls. Such as $element.text('Hello') is the same as $element[0].textContent = 'Hello'. You rather save code for various tasks.

2 Likes
3

It is the simplicity of jQuery in developing certain problems faster than pure vanilla javascript.

For instance: https://codepen.io/francisco/pen/drbHq

I’m blown away by the sortable() method so simple but what havoc am I bringing to the Three.js library by using these stripped down methods for only interface development?

Again not using sortable() directly with Three.js.

4

I don’t really see how this should be related to THREE, but the jQuery realm uses the dom for application structure instead the other way, so if you would sort a list of children of a Object3D you would have to synchronize that with the actual array.

1 Like
5

Aah yes DOM I forgot, jQuery is independent from Three.js

I was thinking somehow the presence of jQuery would do something crazy to the Three.js engine.

Understand the loop if I query over lots of things that is a potential threat.

Yeah not doing any Object3D manipulation, I have a taxonomy(classification engine) i’m running along side the Three.js engine - an independent interface from the 3D engine

6

I don’t think this should be a problem — using two frameworks that both want to control the DOM together can be a challenge (e.g. jQuery + React), but threejs doesn’t touch the DOM.

jQuery is a bit “less cool/modern” than other libraries for managing the DOM these days, but not bad practice, and certainly not incompatible with three.js.

2 Likes
7

Great to hear jQuery is a viable option, thank you!

Have been thinking of using React, I know this is getting off of topic. But I think our readers might run into this same problem.

Now hearing jQuery doesn’t play fairly with React is a bummer.

So I probably should be thinking of using JSX than jQuery?

https://www.quora.com/Is-it-a-bad-idea-to-use-React-and-Jquery-together

8

I don’t have personal experience with the jQuery/React combination but generally any DOM-manipulating framework…

  • react
  • jquery
  • angular
  • d3
  • vue
  • backbone
  • …

… will cause some headaches when used alongside another DOM-manipulating framework, unless you’re very careful how you use them. For D3 in particular there are best practices to get around those issues, but for the others I’d suggest just picking one, especially if you’re just getting started on a new project.

Related: https://discuss.reactjs.org/t/jquery-with-react/683/14

2 Likes