Designing widget 2.0 frontend architecture

[UnniKohonen]

A new frontend architecture needs to be designed for the suggestion widget 2.0. Vue 3 will be used as the frontend framework in the new widget. This task involves deciding on how Vue will be used as well as outlining the structure of the Vue application to ensure maintainability, and performance. Below are the steps that should be considered in this process.

• Gathering requirements from users
• Creating mockups of UI
  • Wireframes of UI structure (see here)
  • Static html version of UI (see here)
• Deciding how Vue is used (as a standalone file or by building embedded web components)
  • Prototyping both approaches and evaluating them
• Desinging the structure of the Vue application
  • Identifying necessary Vue components and their responsibilities
  • Defining data flow between components
  • Documenting the application structure in a UML diagram (see here)
• Defining backend integration
• Defining testing infrastructure (see Widget 2.0 testing infrastructure #149)
• Ensuring accessibility of all components (see Widget 2.0 accessibility #156)