8

I have a web-app built with react. In this app I also have some pages with jQuery code from an old version. Right now this is rendered server side and i have to load the entire ejs file with jQuery and jQuery-UI code in script-tags with its own navigation menu. (Almost 1000 lines of jQuery code)

This means that I have to build another nav-menu for these jQuery pages.

I would like to render this jQuery depended code in my "content div" so I can still use the react menu which uses react router. I would like to render it like a component. But I don't know if this is the best solution.

I have read many examples of how this could be done, but I don't know which of them to go for and I have been strugling to make them work

Like shown in this example: Adding script tag to React/JSX This example adds script tags in componentWillMount

Or with import and require like this example: How to add script tag in React/JSX file?

I couldn't make these solutions work without installing jQuery through npm.

I have not yet installed jQuery through npm because I know this will affect my bundle size for the rest of the application and I am only using jQuery for a couple of my pages. The user don't really need to load jQuery for the rest of the app

What do you recommend in a situation like this? What is the best solution for performance and user experience?

Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Koiski
  • 568
  • 2
  • 8
  • 23
  • do you need to have two way communication with these jQuery depended pages? If not, why not strip them down a bit, and load them through an iframe. Might not be the most performant solution, but its the simplest. – asosnovsky Nov 28 '17 at 14:33
  • I need to use some global variables from the react app, but the output is stored in the database through ajax and the API-endpoints written in node.js – Koiski Nov 28 '17 at 14:35
  • Btw the application uses a lot of drag and drop interactions with jquery-ui which i know can be resource-heavy through iframes – Koiski Nov 28 '17 at 14:38
  • is the communication one way? does the jquery app need to send messages back to the react app? or can the react app just load the jquery app with different params in the url? – asosnovsky Nov 28 '17 at 14:38
  • Yes the communication is one way, but the jQuery app cannot be loaded just through params in the URL. Right know i am getting a quite large array with objects from the react app – Koiski Nov 28 '17 at 14:42
  • 1
    if we are still using the iframe idea, consider using https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage – asosnovsky Nov 28 '17 at 14:43
  • 1
    here is a good tutorial on how to use it https://robertnyman.com/html5/postMessage/postMessage.html – asosnovsky Nov 28 '17 at 14:44
  • 1
    Thanks. I would like to see other solutions as well. I suspect that using an iframe can be resource-heavy – Koiski Nov 28 '17 at 14:58

1 Answers1

9

Take a look at react-async-component. Your component might look something like:

// SomethingWithJquery.js
import React, {Component} from 'react'
import $ from 'jquery'

class SomethingWithJquery extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    // ... as much jquery mess as you need
  }

}

export default SomethingWithJquery

And wrapper in separate file:

// SomethingWithJquery.async.js
import { asyncComponent } from 'react-async-component';

export default asyncComponent({
  resolve: () => System.import('./SomethingWithJquery')
});

Than you can use it as regular react component, react-async-component will load entire component in separate .js file on purpose under the hood.

Boris Zagoruiko
  • 12,705
  • 15
  • 47
  • 79
  • Looks promising, but the way you import jQuery means that I have to install jQuery through npm which means jQuery will really affect my bundle file? – Koiski Dec 03 '17 at 14:01
  • @Koiski as far as I know nope, it should add jquery to separate chunk with component. So jquery will be loaded only when user opens a page that contains this async component. – Boris Zagoruiko Dec 03 '17 at 17:47
  • With this approach, I am worried that direct DOM-manipulation with jQuery will screw up the virtual DOM react works on. Any insight about that? – Koiski Dec 06 '17 at 08:15