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:
scope.$watch(key, fn)to update the plugin when something changes
scope.$apply()in plugin callbacks to tell angular something might have changed, update any relevant two way bindings, and invoke any relevant expression bindings
scope.$on('$destroy', fn)to clean up
The same applies to React, but components instead of directives.
this.props.onWhateverin plugin callbacks
And I don't think Riot is relevant here.