Evaluate New Frontend Library

Evaluate New Frontend Library

Assign
Date
Status
Completed

Why switch?

  • The current frontend is based on Wekan v3.19, currently latest Wekan is already v5.33 (at the time of drafting this page)
  • Official Wekan API is not that useful; eg. it can't clone entire board with custom fields, tags & so on
  • Wekan is based on Meteor framework that runs only Intel, efficient Arm64 chips will be the future
  • Meteor takes a LONG time to compile to a docker image

What are the key-concepts?

notion image
  • There are 4 types of boards: Overview (not Wekan), Triage, Investigation & Checklist (providing In-line guides to check on anomalies)
  • Various event-types & case are represented by cards
  • Anomalies are highlighted by tags with cards (eg. Unusual Process Sequence)
  • Case are identified by Hostname + RID of the OrientDB record
  • Cases are sorted with highest Case-score on top of each Severity Column within Triage Board
  • An Investigate Case board is cloned from this template board
    • notion image
      notion image
  • For each Anomaly-Tag, we dynamically add in-line guides links, which are named after the Anomaly within a Checklist board (that lowest node within the above diagram) to a Triage Case card
    • notion image

Why Wekan?

So this is one of those reason, you click a card & it opens up a nice side page with various fields that you can customise (hide / show):
notion image
  • By design, it support collaborative features eg. multi-user, comments, attachments, subtasks, checklists.. but we may not be using all of these features
  • Custom fields which allows you to create "sub-form", such that nodeJS controller can receive UI events (eg. selected) via Outbound webhooks
  • Manipulating the mongoDB n UI will reflect the changes, sometimes latency is quite high but most of the time, it is acceptable

Evaluation Approach

  1. Is it complex or tedious to setup?
    1. a. If tedious, drop & find another tool
      b. If easy, quickly create a mock-up with it & explore the next aspect...
  1. Does it offer API so that we can port whatever was done with Wekan to this new sub-system?
    1. a. Outbound webhook to signal UI events to our controller
      notion image
      b. Inbound from our controller to the sub-system to affect UI elements

Tools to Evaluate

Low / No-code Platform

https://tooljet.io - dont waste too much installing n what not.
https://github.com/ToolJet/ToolJet - self-host version of the above

ReactJS (one widely used framework)

https://storybook.js.org (useful beyond React framework, eg. VueJs etc etc)
The reason why I stick to Javascript is because all 3 aspects: frontend, backend & even OrientDB will be using the same language. It is challenging to find programmers nowadays!

Quick Prototyping or wire-framing

https://datablocks.pro not exactly UI, but wiring data-sets for processing is useful (eg. machine-learning analytics type of workflow, for your experience)

YJ's Documentation

Low / No-code Platform

ToolJet Evaluation

ReactJS

Storybook Evaluation
Builder Evaluation
📢
Note that for the tools below i.e. React UI libraries, it will not have built-in webhooks like Wekan. You will need to install and set-up external webhooks yourself e.g. https://www.npmjs.com/package/node-webhooks. I will be evaluating these libraries based on how simple/how useful it is.
React-Trello Evaluation
React-Kanban Evaluation
React-Native-Just-Timeline Evaluation
React-Event-Timeline Evaluation
Blocks Evaluation
OpenChakra Evaluation
Craft.js Evaluation
Laska Evaluation

Quick Prototyping/Wire-Framing

Justinmind Evaluation
Datablocks Evaluation
 
Overview of Evaluations
Tool
Simple to set-up?
Able to port work done with Wekan?
Comments
Yes
No
New tool, does not have relevant APIs/webhooks.
Yes
No
Catered towards creating and testing components.
Yes
Possible using built-in webhooks
Support webhooks that POST to the endpoint you provide every time content is published, unpublished, archived, or deleted.
Yes
Possible using external webhooks
Looks and functions similarly like Wekan. No built-in webhooks, so you need to DIY yourself.
Yes
Possible using external webhooks
Looks and functions similarly like Wekan. No built-in webhooks, so you need to DIY yourself.
Yes
Possible using external webhooks
Timeline UI to display events in chronological order.
Yes
Possible using external webhooks
Timeline UI to display events in chronological order. I feel that this is a better version of React-Native-Just-Timeline.
Yes
No
Still in early alpha.
Yes
No
Reminds me of storybook. Does not provide the necessary UI components to recreate what was done in Wekan.
Yes
No
Drag-and-drop UI library. Main issue is the lack of UI components to choose from. Most recent release is in beta version.
Yes
No
Does not have the necessary UI components to recreate work done in Wekan. Project has been discontinued since May 2020.
Yes
No
Has a lot of UI components to choose from. Has a steeper learning curve as compared to other UI tools/libraries. Main issue is that there is no built-in webhooks.
Yes
No
A tool used for processing/visualizing data. Does not fit the needs of our frontend.

Jym's Comments

https://youtu.be/GomEIA4aHAM how timeline is used. Also notice the high-level natural language approach at the beginning of the interface
notion image