How to use jQuery plugins in React, Riot 2.0

Question

I have a jQuery heavy app I'm in the middle of that has many jQuery plugins and I want to restructure the app, so I'm looking at different frameworks like Angular, React, Riot 2.0, etc.

I like React and Riot, but I can't figure out how I'd make your typical jQuery app (unmetered access to the DOM) into this new world of virtual DOM, etc.

Some of these components are complex and I wouldn't want to rewrite them all into the "VDOM way" and create another nightmare.

Does anyone have an answer to this? Maybe jQuery plugin heavy apps aren't suited, or is there a way to split/combine the UI using both, or maybe a React/Riot like framework that would play well with jQuery?

Answer 1

To access the DOM with jQuery inside a Riot 2.0 custom tag, you can use the mount event and this.root like this:

<my-custom-tag>
  <h3>Riot.JS Custom tag + jQuery plugin</h3>
  <p>My paragraph</p>
  <script>
    this.on('mount', function() {
      var $node = $(this.root);
      $node.find('p').html('updated by jQuery!');
    });
  </script>
</my-custom-tag>

I am not sure it is the "best practice" but it works with Riot 2.0.10 (Feb 19, 2015).

If the custom tag contains form or input elements, it's simpler, you can access them by their name property, you don't need the mount event:

<my-custom-form>
  <input name="email" type="text">
  <script>
    $(this.email).val('mike@worldcompany.com');
  </script>
</my-custom-form>

Answer 2

Riot 2.0 was released just 4 days ago so there are obviously no extensions yet.

But it's a good candidate to transform jQuery- based apps to the "modern world" with using custom tags or "components" in React community.

Custom tags lets you build reusable pieces of client side code with a less need for jQuery selectors and manipulation methods. And HTML and JS is less scattered on the file system.

And Riot 2.0 is designed to play well together with jQuery. You can freely use jQuery plugins together with custom tags so you can transform your app iteratively - one tag at the time if you like.

Answer 3

This is an excellent guide to wrapping DOM libs with React components:

https://github.com/rpflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

Answer 4

In angular someone has probably already recreated the thing you want. You use directives to either implement reusable components or wrap existing ones. To wrap a plugin:

• initialize in link (based on isolate scope)
• use scope.$watch(key, fn) to update the plugin when something changes
• use scope.$apply() in plugin callbacks to tell angular something might have changed, update any relevant two way bindings, and invoke any relevant expression bindings
• use scope.$on('$destroy', fn) to clean up
• See ui-bootstrap for examples and api design.

The same applies to React, but components instead of directives.

• initialize in componentDidMount (based on props)
• update the plugin in componentDidUpdate (based on props)
• call this.props.onWhatever in plugin callbacks
• clean up in componentWillUnmount
• See react-bootstrap for examples and api design.

And I don't think Riot is relevant here.

Answer 5

We had the same problem, i.e. turn a pretty big global jquery based admin frontend into nestable conflict free components - w.o much training effort for our partners - so riotjs was just ideal for us.

We agreed on the solution below (see also Michael Rambeau's answer) and are up to now quite content with that.

Via a mixin we give all our riot component tags this function:

var ComponentTagsMixin = {
  init: function () {
     //<other stuff needed in all tags>

     // jquery local to the vDom of this instance:
     $: function(selector) {
            // you could fail here if (!this.isMounted)                                        
            return $(this.root.querySelector(selector))           
     }          
}

```

and so, within the tags you simply turn $ into this.$. Example, jquery nestable:

$('#nestable').nestable(....)
$('.dd').nestable('expandAll');

into

this.$('#nestable').nestable(....)
this.$('.dd').nestable('expandAll');

and now this allows to have many of those components within the same page w/o conflict and local namespaces and data.

As already pointed out, this is only accessible after the tag is mounted, so run your stuff within an this.on('mount'...) block.

This works remarkably well with legacy jquery libs since they typically allow the user to redefine their Dom selectors for double run-ability within a page anyway.