XBRL Taxonomy viewer (Nessie)

Met behulp van de API is het mogelijk om delen van de NT (Nederlandse Taxonomie) te ontsluiten in een ander formaat dan XBRL XML. We gebruiken de in de taxonomie aanwezige presentation en mogelijke tabellen om de entrypoints te renderen. Er kan worden ingezoomd op de onderdelen van de taxonomie zoals extended linkroles, concepten, labels referenties en de verschillende netwerken.

Vue en Quasar

De viewer is geschreven in javascript. Om niet het wiel opnieuw uit te vinden heb ik besloten om gebruik te maken van twee frameworks, op elkaar gebouwd. De motor is Vue. Naast React en Angular een vaak gebruikt framework wat ons o.a. routing en reactivity geeft.

Om ook de visuele componenten van het begin af aan eenvormig en betrouwbaar te hebben heb ik Quasar als componentleverancier gekozen.

De source is te vinden op Gitlab - Nessie-quasar

SPA, Electron, PWA

Quasar kent drie manieren om een applicatie te maken van de code. Dat zijn Single Page Application (SPA), Electron (desktop applicatie/mobiel) en Progressive Web App (PWA). Wij gebruiken momenteel alleen de SPA methode en serveren Nessie via het web. Maar je kan er dus ook een executable mee maken en die ter download aanbieden :wink:.

Builden en deployen

In /app/nessie-quasar staat een makefile waarin de instructies staan om de PWAte builden en deployen.

make nessie

Achtereenvolgens: - checkout van de master-branche (to be sure!) - git pull (if this fails, git pull -F) - quasar build # dit verzamelt alle code (javascript, css) en schrijft die weg in de build directory (./dist) - als laatste wordt de inhoud op de webser gezet.

Ontwikkelen

Wanneer je zelf aan de slag gaat om te ontwikkelen zal je quasar moeten installeren. Ik zou Quasar-CLI methode aanraden. Dit haalt Vue en andere onderdelen op en je kan snel aan de slag. Als dat gelukt is clone je de git repository naar je lokale machine en typt:

quasar dev

Dit zou een webserver moeten starten op poort 8080 van je machine. Ook probeert Quasar je browser te openen en de index te laden. Om direct succes te hebben zal er ook een API server actief moeten zijn op localhost en luisteren op poort 8000. Je kan deze instellingen wijzigen.

ontwikkelconfiguratie

Quasar maakt naast Vue ook gebruik van webpack, het zwitserse zakmes voor javascript webontwikkeling. Zo is webpack de webserver tijdens ontwikkelen, houdt het je bestanden in de gaten en ververst de browser als je een sourcefile opslaat die je in de browser aan het bekijken bent.

Ook kan het als proxy fungeren, om op die manier de productie-server te emuleren.

In quasar.conf.js staat de volledige configuratie, quasar schrijft de delen die voor webpack bedoeld zijn vervolgens naar webpack-configuratie. De huidige configuratie voor de server:

    devServer: {
      https: false,
      port: 8080,
      open: true, // opens browser window automatically,
      historyApiFallback: {
        index: '/',
        disableDotRule: true
      },
      proxy: {
        '/api': {
          target: 'http://localhost:8000',
          pathRewrite: {'api': ''}
        },
        '/openapi.json': {
          target: 'http://localhost:8000'
        }
      }

Hiermee emuleer je op localhost de nginx server van productie. (dus quasar fungeert als webserver voor alles en alle requests voor /api gaan naar je lokale python API-server)

De ontwikkelomgeving is nu zo ingericht dat de API server op localhost draait, Full-stack development. Je kan ook gebruik maken van de productieserver voor de API. De requests naar de API gaan allemaal via axios. De configuratie voor de plugin staat in src/boot/axios.js

De alternatieven staan becommentarieerd in dat bestand.