3rd Party Libraries

Using jQuery and jQuery plugins is not an anti-pattern. On the contrary, it is welcomed and encouraged. AppRun embraces 3rd libraries and recommends you use them in your AppRun application development.

AppRun was designed to support 3rd party libraries in mind. The AppRun VDOM is resilient to allow other libraries to change to DOM.

You can embed a DOM element into JSX or use the JSX ref attribute.

Embed Element

It is straightforward to create a DOM element and modify it using the 3rd party library. The DOM element can be embedded into JSX directly. e.g., the example of using chart.js below. The chart.js example above also demonstrates using the unload function to destroy the Chart object.

export default class extends Component {
  state = {
    data: {
      /* ... */
    }
  };

  view = state => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    state.chart = new Chart(ctx, state.data);
    return (
      <Card header="Chart JS">
        {canvas}
      </Card>
    );
  };

  unload = state => {
    state.chart?.destroy();
    console.log('chart destroyed');
  }
}

Ref Attribute

The JSX ref attribute is a callback function called when the specific DOM element is rendered. The DOM element can be any element in JSX. e.g., the d3 example below. The d3 example also demonstrates using the mounted function to initialize the state as a Promise.

const map = (element, features) => { /*...*/}
export default class extends Component {
  state = {};
  view = features => (
    <Card header={<div id="map-text">D3 Map</div>}>
      <svg ref={el => map(el, features)}></svg>
    </Card>
  );
  mounted = () =>
    new Promise((resolve, reject) => {
      d3.json('./world-110m.json', (error, topo) => {
        if (error) throw reject(error);
        const features = topojson.feature(topo, topo.objects.countries)
          .features;
        resolve(features);
      });
    });
}

Combing component life cycle events and embedding DOM and the ref attribute provides a convenient way to use 3rd party libraries in the AppRun application. You can find out more from the following examples.

Bootstrap Admin Dashboard

The bootstrap admin dashboard uses the Bootstrap layout. It also uses jQuery DataTables and FullCalendar and chart.js and D3.

CoreUI Admin Template

Another example is using the CoreUI for AppRun application.