Bundler

Bundler to make developing code easier and scalable.

There is no weird code styles, because most of the configuration is as basic as it can be. A good example of this is by looking at the .prettierrc.json file.

Table of contents

• Bundler
  • Table of contents
  • Why use a bundler
  • Usage
  • Dev site
  • Choices
    • Rollup
    • Typescript
    • Eslint
    • Prettier

Why use a bundler

1. Scalable

   It is much easier to split the code up in files and components, and let the bundler combine/merge them into one file. Which makes it much more scalable.

2. No need for internet

   If someone uses Grafana on a different computer/server, and they are on the same network, they can still use the graphics used. Same for closed networks

   Since all the code is bundled together, the code don't need internet to use a module. E.g svg.js, vue, custom created modules (like format-si.ts used in this example), ETC

3. Reusable

   By making it component based, it's a lot easier to create a central location, like github and npm, for all the components and update them independently. This will remove the part where you have to try and find the code in a different project, and you can instead look for the component you need in the central location.

Usage

First you have to install the required dependencies

yarn install

Then you start the development script

yarn run dev

Go to http://localhost:5000. Change some code in ./src/on-init.ts, ./src/on-render.ts, and ./src/design/svg-data-inkscape.svg, and the website will update.

When the code is ready to be uploaded to Grafana, start the build script

yarn run build

Then go to /dist and copy the contents of the files to the corresponding options in the panel. (custom-properties.json to customProperties, ETC)

Dev site

src/dev-site is a folder where most of the configuration for the dev website is.

To add custom series go to src/dev-site/data.ts and add createSeries() in series.

Window has been used to get global variables like data, customProperties, ETC.

Choices

Rollup

rollup.js

Rollup.js The why

A good paragraph from "Why I use Rollup, and not Webpack"

Rollup also does something very different compared to the other bundlers. It only tries to achieve one simple goal: Bundle ES modules together and optimise the bundle. It doesn’t understand node module imports, it doesn’t know what to do with CSS, it certainly can’t understand images. Instead, rather than trying to implement what it thinks is the best way to bundle different type of assets, it leaves that entirely up to the developer to decide.

Typescript

Good quote from Typescript's website "By understanding JavaScript, TypeScript saves you time catching errors and providing fixes before you run code."

Some good articles

• How (and why) you should use TypeScript with Node and Express.
• The TypeScript Tax.

Eslint

Eslint is a JavaScript linter that enables you to enforce a set of style, formatting, and coding standards for your codebase.

It works great with typescript through the typescript-eslint.

Prettier

Prettier is used to have standard code style.