Timmerz Timmerz - 7 months ago 78
jQuery Question

How to use jQuery plugins in React, Riot 2.0

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?


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.