Why you should stop using Qlik’s Capability API
As a hardcore Qlik mashup developer, you probably have tried many different Qlik APIs. Among all of them, I bet capability API is the apple of your eye; it is at least for me. Since its release, it has no doubt been my №1 tool for visualization embedding. However, I think it is about time to say my saddest farewell.
Goodbye capability API.
Well, first of all, I would like to explain why I think the Capability API no longer works for me.
The primary reason is the Capability API is chunky. It wraps every single possible function into one js file. Most projects only leverage 20 percent of the functions. Using the Capability API imposes significant redundancy, especially during load time.
To me, another limitation for the Capability API is that it is loaded from Qlik server.
Most users take three steps to load a chart into a webpage:
Authenticate -> Load Require.js from Qlik -> use Require.js to load the Capability API. (#Tip: You can use your local instance of Require.js, to improve performance.)
The Capability API itself is a 3MB JavaScript file, which often takes significant time to initialise. And this delay is inevitable. Yuck!
The Capability API is too old. Its development was based on the first version of Angular.js, which was invented in the Stone age of the web programming world. Even though it is still usable, i̵t̵ ̵m̵a̵k̵e̵s̵ ̵m̵e̵ ̵f̵e̵e̵l̵ ̵o̵l̵d̵ ̵u̵s̵i̵n̵g̵ ̵i̵t̵, it is awkward to use together with newer frameworks like React.JS or mobile development.
I decided it’s about time to switch to enigma.js and nebula.js, both of which are open-source libraries from Qlik.
First of all, both enigma.js and nebula.js are available on NPM, which is a huge plus for me. Below is a graph explaining why.(TLDR: it is faster, lighter, and more flexible)
For me enigma.js and nebula.js together are perfect replacement for the Capability API. They are not only faster, they also don’t compromise functionality. Below is a list of all APIs in Capability API and their relevant counter-parts in enigma+nebula.
So that concludes the article, but that is not the end of it. Below is a list(very long) mapping all functions from the Capability API to enigma.js and nebula.js. Hope you find it useful.
Happy coding!
╔════════════════════╦════════════════════════════════╗
║ Root API ║ Enigma ║
╠════════════════════╬════════════════════════════════╣
║ callRepository ║ General http request ║
║ currApp ║ Global.getActiveDoc ║
║ getAppList ║ Global.getDocList ║
║ getExtensionList ║ Global.reloadExtensionList ║
║ getGlobal ║ Session.global ║
║ getThemeList ║ NA ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
║ openApp ║ Global.openDoc ║
║ promise object ║ angular listener ║
║ registerExtension ║ NA ║
║ resize ║ NA ║
║ sessionApp ║ Global.createSessionApp ║
║ sessionAppFromApp ║ Global.createSessionAppFromApp ║
║ setDeviceType ║ NA ║
║ setLanguage ║ NA ║
║ setOnError ║ angular listener ║
╚════════════════════╩════════════════════════════════╝╔═══════════════════════╦═══════════════════════════════════╗
║ App API ║ Enigma ║
╠═══════════════════════╬═══════════════════════════════════╣
║ addAlternateState ║ Doc.addAlternateState ║
║ back ║ Doc.back ║
║ clearAll ║ Doc.clearAll ║
║ close ║ Doc.deleteConnection ║
║ createCube ║ Doc.createObject ║
║ createGenericObject ║ Doc.createObject ║
║ createList ║ Doc.createObject ║
║ createTable ║ Doc.createObject ║
║ destroySessionObject ║ Doc.destroySessionObject ║
║ doReload ║ Doc.doReload ║
║ doSave ║ Doc.doSave ║
║ field ║ Doc.getfield ║
║ forward ║ Doc.forward ║
║ getAppLayout ║ Doc.getAppLayout ║
║ getAppObjectList ║ Doc.searchObjects ║
║ getFullPropertyTree ║ Doc.getFullPropertyTree ║
║ getList ║ Doc.getObject ║
║ getObject ║ Doc.getObject ║
║ getObjectProperties ║ GenericObject.getFullPropertyTree ║
║ getScript ║ Doc.getScript ║
║ getSnapshot ║ Doc.getSnapshotObject ║
║ lockAll ║ Doc.lockAll ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
║ removeAlternateState ║ Doc.removeAlternateState ║
║ searchAssociations ║ Doc.searchAssociations ║
║ searchResults ║ Doc.searchResults ║
║ searchSuggest ║ Doc.searchSuggest ║
║ selectAssociations ║ Doc.selectAssociations ║
║ selectionState ║ NA ║
║ setScript ║ Doc.setScript ║
║ unlockAll ║ Doc.unlockAll ║
╚═══════════════════════╩═══════════════════════════════════╝╔═══════════════════════╦═════════════════════════════╗
║ Global API ║ Enigma ║
╠═══════════════════════╬═════════════════════════════╣
║ cancelReload ║ Global.cancelReload ║
║ getAppList ║ Global.getDocList ║
║ getAuthenticatedUser ║ Global.getAuthenticatedUser ║
║ getProgress ║ Global.getProgress ║
║ getProductVersion ║ Global.productVersion ║
║ getQTProduct ║ Global.QTProduct ║
║ isPersonalMode ║ Global.isPersonalMode ║
║ off ║ remove angular listener ║
║ on ║ angular listener ║
╚═══════════════════════╩═════════════════════════════╝╔════════════════════════╦════════════════════════════════╗
║ Variable API ║ Enigma ║
╠════════════════════════╬════════════════════════════════╣
║ create ║ Doc.createObject ║
║ createSessionVariable ║ Doc.createSessionVariable ║
║ get ║ Doc.getVariableByName ║
║ getByName ║ Doc.getVariableById ║
║ getContent ║ Variable.getContent ║
║ setContent ║ Variable.setContent ║
║ setNumValue ║ GenericVariable.setStringValue ║
║ setStringValue ║ GenericVariable.setNumValue ║
╚════════════════════════╩════════════════════════════════╝╔══════════════╦═════════════════════╗
║ Bookmark API ║ Enigma ║
╠══════════════╬═════════════════════╣
║ apply ║ Doc.applyBookmark ║
║ create ║ Doc.createBookmark ║
║ remove ║ Doc.destroyBookmark ║
╚══════════════╩═════════════════════╝╔═══════════════════╦══════════════════╗
║ Visualization API ║ Nebula.JS ║
║ Field API ║ Doc.getField ║
║ Table API ║ Doc.createObject ║
║ Selection API ║ GenericObject ║
║ Navigation API ║ NA ║
║ Theme API ║ NA ║
╚═══════════════════╩══════════════════╝