HTML export v3 - archimatetool/archi GitHub Wiki

History

HTML export has been redesign accross the years:

  • HTML export v1 was a simple, one page export of the model content and should be concidered a POC. It was superseeded by v2 in 2014.
  • HTML export v2 is the current version (as of writing in 2019) and offers a UI similar to Archi itself with a model tree (top left), a preview of selected concept (bottom left) and the current view (right). A query tool has been added lately and is available on the "model purpose" page: image

HTML export v3

A new version (v3) is being developped and will address the following...

A more "modern" look (think material design or similar "flat" design):

A search engine:

A better query tool:

  • Will be still powered by AlaSQL
  • Will provide a better way to explore data (for example using DataTables): image
  • Will provide a way to reorganize data through pivot tables: image
  • Will provide a way to convert a pivot table to a chart: image
  • Will allow to save a report (query+presentation): a URL will be created with all needed information url-encoded

Deep links

It should be possible to bookmark a view or a concept

Export notes' content

It sould be possible to access the content of notes (to be able, for example, to copy/paste their content)

Encryption and password

It should be possible to have the content encrypted and readable only after password input.

Theme

It should be easy for an end user to choose between several themes (and maybe to create his own theme).

Software design and Technology stack

Single Page Application

The new report should be designed as a Single Page Application (SPA). The SPA should load the model content from a model.js file which is the (encrypted) JSON serialization of the (AlaSQL) database. Images (ArchiMate views, Canvas...) should be separate files (encrypted version of the base64 PNG).

Frameworks and libraries

Asof writing, the following frameworks and libraries are being evaluated:

  • Semantic UI or Bootstrap for the UI. Semantic UI requires jQuery which is also needed for both DataTables and PivotTable.js

    I personnaly (JB Sarrodie) don't think jQuery should be mandatory as it is now possible to work without it in most cases with recent browsers and frameworks. That being said, as several components rely on it, why not leverage it? (and, BTW, we like jQuery's API as we use a similar one with jArchi;-)

  • Bootswatch themes and especially "Materia" which (loosely) follows material design guidelines if Bootstrap is choosen for the UI.
  • DataTables with Sematic UI or Bootstrap integration.
  • PivotTable.js. CSS can be tuned a bit (this can be an inspiration)
  • jQuery has to be included because it is needed for both DataTables and PivotTable.js
  • jQueryUI has to be included because it is needed for PivotTable.js
  • A simple hash router like: Routie, Navigo router or Vaadin. Small frameworks like Backbone.js, Riot.js or Preact have been evaluated but are still too big and complex.
  • A simple template system like JsRender, EJS or the one included in Underscore.js. This is a prefered approach over simply binding some parts of the DOM to variables using DisplayJS. Note that the choosen template system shoujld support includes as this will be needed for headers and footer and in some other cases. Another option could be to use a template system which also provides HTML preprocessing (similar to Pug): this approach would simplify the markup and is less error prone.
  • Stanford Javascript Crypto Library for encryption