Nebula.js 2.0 is here!

[Dipankar_Mazumdar]

Nebula.js Developers, version 2.0 is officially here!

Hello Qlik Community. 

This is Dipankar from Qlik R&D and today I am going to introduce the latest version of Nebula - version 2.0. Since the initial release of Nebula, the R&D team has been working on improving various capabilities within the library to help developers achieve more agility and robustness in terms of developing/embedding Qlik's visualization using Nebula. With the new version,  we take this a step further. 

What is Nebula 2.0?

Nebula 2.0 is a collection of the following items:

1. updated chart packages
2. Nebula CLI
3. Nebula API features
4. improved documentation

Let's talk about each of these items in some details.

Updated chart packages:

While nebula.js provides capabilities and APIs to build mashups and custom visualizations, it's primary purpose is often to display Qlik developed charts. These charts are available through npm under the @nebula.js scope. With the latest release, the focus is on streamlining the charts. Now, you can find an inventory of all the supported Nebula charts under the 'visualizations' library in qlik.dev - 

An interesting addition to the charts is the 'Package and core build' part. With Nebula 2.0, when you have multiple charts, using the "core" build can significantly reduce the overall size of your bundle, thus reducing the amount of code that needs to be downloaded every time and executed. Here is an example link that shows how to achieve this - https://github.com/qlik-oss/nebula.js-examples/tree/main/examples/simple-setup . We believe this can be very beneficial from a performance perspective.  

Nebula CLI:

Nebula 2.0 updates the robust Nebula CLI which is the main entry point for getting started with a nebula visualization, enabling a local development server, and building extensions and mashups. This version also streamlines the commands for usage. The four commands are listed below:

• nebula create - creates a new nebula visualization or mashup to get you started
• nebula serve - runs a nebula visualization with a local web development server
• nebula build - builds a nebula visualization bundle
• nebula sense - generates a nebula visualization to be used as an extension in Qlik Sense

Nebula API:

The Nebula API has some new functionality -

• useEmbed - this hook allows access to the Nebula instance inside a chart, to for example render a chart inside another or to use the field listbox.
• useKeyboard - this hook gets the desired keyboard settings & status to apply when rendering a visualization. Read more about this here.

You can also alter property definition for field-listbox now. See an example below that shows how to change sorting.

nebbie.field('[My Field]').then((s) =>
      s.mount(document.querySelector('.listbox'), {
        properties: {
          qListObjectDef: {
            qDef: {
              qSortCriterias: [
                {
                  qSortByState: 0,
                  qSortByAscii: 1,
                  qSortByNumeric: 1,
                  qSortByLoadOrder: 1,
                },
              ],
            },
          },
        },
      })
    );

Apart from these, Nebula 2.0 also exposes class names for embedded charts that allows for basic theming capabilities.

div.njs-cell {
    background: maroon;
}

p.njs-cell-footer, h6.njs-cell-title, p.njs-cell-sub-title {
    color: white;
}

button.njs-cell-action {
    color: white;
}

Improved Documentation:

Overall, Nebula 2.0 solidifies the official documentation throughout the Qlik Developer site. I particularly like the Specifics section for each of the chart that serves as a guide in getting started with understanding & developing the Nebula-based visualizations. Be sure to check it out.

Hope this post helps you leverage all the amazing capabilities of Nebula 2.0!!

We will curate and share a Nebula 2.0 playlist in Glitch soon for our developer community, so keep an eye out. 

~Dipankar

[rzenere_avvale]

Thanks @Dipankar_Mazumdar ! I'll be try the new release as soon as possible!

Riccardo

[Dipankar_Mazumdar]

Hey @rzenere_avvale sounds great. 

[dannyy81]

how do you declare "nebbie" variable?