Skip to main content

Using CDN bundle

Via CDN we provide a code as ECMAScript modules (ESM) which has shared chunks between different widgets.

Let's consider next boilerplate for our widget integration, where we have an empty div for widget and CSS styled with height and width.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>dxFeed widget</title>
    <style>
      #widget {
        height: 600px;
        width: 800px;
      }
    </style>
  </head>

  <body>
    <div id="widget"></div>
  </body>
</html>

Traditional approach​

In traditional approach all package code is accessible under some namespace. All our packages share same namespace called DXFeed.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>dxFeed widget</title>
    <style>
      #widget {
        height: 600px;
        width: 800px;
      }
    </style>
    <script src="https://path-to-cdn/widgets/radar.js" type="module"></script>
  </head>

  <body>
    <div id="widget"></div>
    <script type="module">
      const { newRadarWidget } = DXFeed

      const dependenciesConfig = {
        /* .. */
      }

      const container = document.getElementById('widget')
      const widget = newRadarWidget({
        element: container,
        providers: dependenciesConfig,
      })
    </script>
  </body>
</html>

ESM Module import approach​

In this approach we can import code similar as you work with NPM modules.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>dxFeed widget</title>
    <style>
      #widget {
        height: 600px;
        width: 800px;
      }
    </style>
  </head>

  <body>
    <div id="widget"></div>
    <script type="module">
      import { newRadarWidget } from 'https://path-to-cdn/widgets/radar.js'

      const dependenciesConfig = {
        /* .. */
      }

      const widget = newRadarWidget({
        element: container,
        providers: dependenciesConfig,
      })
    </script>
  </body>
</html>