Demessifier GUI

Demessifier GUI is a minimalistic GUI framework for Vue.

Philosophy

• Aims to contain everything that could be needed to create a GUI for an application in Vue.
• As little customizations as possible - aims to provide the default look and feel of the used browser. The goals are to provide a well-known UI of the user's device and (in the future) to look only as outdated as the browser does.
• As little dependencies as possible.
• Covered by tests and type checks.
• If there are multiple equivalent choices for implementation of a feature, the first applicable from this list should be selected: HTML, CSS, another declarative approach, TypeScript, JavaScript.
  • If there is a way of doing it with what modern browsers natively provide, don't use dependencies for it and don't code it yourself.
  • If there is a way of doing it in plain HTML, don't use nunecessary CSS or JS or dependencies.
  • If there is a way of doing it declaratively, don't code.
  • Of course, there are exceptions, but keep them at the minimum. Valid reasons for an exception are (huge difference in) developer experience or (noticable difference in) user experience. (Don't confuse user experience with GUI.)

License

Project setup

• Install dependencies
  • NodeJS LTS
    • Windows: winget install -e --id OpenJS.NodeJS.LTS
  • npm-run-all2
    • NodeJS: npm install -g npm-run-all2
  • pnpm - NodeJS: npm install -g pnpm

Workflow

• Before committing, execute npm run checklist to run all tests and build
• When testing local changes in an app that depends on this package, one of the following is necessary after doing the changes here:
  • With building the package
    • Here:
      • Run npm:pack-development
    • In the app, switch to the local package by executing:
      • npm remove @demessifier/demessifier-gui to remove the package you have
      • Wait for a few seconds
      • npm install ../demessifier-gui/auxiliary/demessifier-demessifier-gui-0.0.0-development.tgz to install the package
  • More dynamically
    • Here:
      • Run build
    • In the app, switch to the local package by executing:
      • npm install ../demessifier-gui
  • Switching back to the npm-distributed package
    • In the app:
      • npm install @demessifier/demessifier-gui