Skip to content
This repository has been archived by the owner on Sep 4, 2024. It is now read-only.

Frontend

Jump to bottom
MeisterSeSe edited this page Nov 10, 2023 · 14 revisions

This is the frontend page.

Why Vue.js?

Vue.js is a progressive and modern JavaScript framework for building high-end frontends. Out of the three most well-known and popular JavaScript frameworks - React, Angular, and Vue - Vue is the most recent one. We initially used Vue 2.6 for this project and later migrated to Vue 3. Developing this web app with Vue was significantly easier and more intuitive for us compared to our experience with React. Here are a few reasons why Vue was a better fit for our project:

  • States: In React, managing states within components required complex setups. In Vue, we adopted a component-wide store for global attributes and used JavaScript attributes for component-specific states. This simplified state management considerably.

  • Event Handlers: Vue's watch cycle streamlined event handling, eliminating the need for custom onChange handlers for form attributes in every component, as required in React.

  • Backend Requests: Communicating with the backend was made more efficient in Vue. We centralized methods for backend communication in the Vuex store. This approach allowed us to call these methods from any component without duplicating code ("single source of truth").

These changes, along with reduced import statements, made our codebase less bulky, more readable, and easier to understand.

However, Vue also has its challenges when compared to React, which has been in the market longer:

  • Testing: React offered more straightforward and out-of-the-box testing solutions compared to Vue.

  • Ecosystem and Documentation: React's longer tenure means it has a more mature ecosystem and extensive documentation, making it easier to find solutions and third-party packages.

Recent Updates and Challenges:

Our migration from Vue 2 to Vue 3 is now largely complete. Vue 2 will reach its end-of-life on December 31, 2023. The new Vue frontend has been refactored under the directory 'frontendVue3'. During the migration, many existing components were reimplemented. However, we are facing a challenge with the UI library Vuetify, which is in the process of migrating from version 2 to version 3. Certain components, such as the data table and skeleton loader, are still under development. You can find more information about this migration here.

In conclusion, despite the challenges, transitioning from React to Vue has significantly increased our productivity. Vue's natural and intuitive development process has made our frontend codebase more maintainable and user-friendly.

General Structure

The general structure of the frontend is shown below. We use an authentication-based system, where several subpages and functionalities are only available for logged in users. The Home, DSGVO, Register and Login pages are available without authentication. Families, Files and Tags can only be visited by authenticated users. In order to provide a recognition value to the user, all pages use a similar and minimal layout. When switching pages, only the relevant sections of the page reloads (dynamical routing). Every notification/message we want the user to see - like a "Upload successfully" or Error-messages - is pushed as a snackbar on the top right of the display throughout all (sub-)pages.

Routes

Frontend Routes:

  • Home: Landing page of the application. Frontend Route: /
  • Models: Overview page for models. Frontend Route: /models
  • Histories: Overview page for histories. Frontend Route: /histories
  • File Detail: Page displaying details of a specific file. Frontend Route: /files/:id/:slug
  • History Detail: Page displaying details of a specific history. Frontend Route: /histories/:id/:slug
  • Feature Model: Page for viewing a feature model. Frontend Route: /feature-model/:id
  • Collaboration: Page for collaboration mode. Frontend Route: /collaboration/:collaborationKey

user management

  • Login: Login form. Frontend Route: /login
  • Profile: User profile page. Frontend Route: /profile
  • DSGVO: Page with General Data Protection Regulation information. Frontend Route: /dsgvo

For corresponding backend functionality, please refer to Backend Endpoints.

FileUpload in Frontend Explanation

In our frontend, we offer four different options for uploading files:

  1. Single Upload: Allows users to upload a single file at a time.
  2. Bulk Upload: Enables users to upload multiple files simultaneously.
  3. Zip Upload: Provides the option to upload files in a compressed ZIP format.
  4. Private Upload: Allows users to upload files stored in the localStorage. These files are not visible to other users.

All uploaded files are currently licensed under the standard CC BY-SA 4.0 DEED license. Users have the option to upload files without providing additional information such as Families, Tags, or Description. Additionally, files can be uploaded as a Zip archive for convenience.

For Development: To display a public file in the FeatureModel table, it needs to be confirmed. During development, confirmation can be done through the admin page of the backend. Select the corresponding file, and check the box for 'Confirmed'. In the operational phase, confirmation could be handled via an email link.

DSGVO

The data privacy is purely written and contained in the frontend inside the DSGVO.vue.

Third Party Libs

  • axios: used for making REST-requests to the backend.
  • d3 and js-levenshtein: used to display feature model trees.
  • vuetify: UI-component library embracing the Material UI design tokens.
  • vue-router and vuex: libraries for routing and saving component-wide states.
  • jest-sonar-reporter: used for generation of the coverage report (which is used by sonarqube)

Tests

Unit and Component Tests

Unit And component tests are currently not implemented. We are waiting for the Vue3 upgrade of this project. After that it will be possible to use Vitest for this purpose.

E2E Tests

We use Cypress for end-to-end testing.

Preparing the system for cypress

Cypress will be executed on a local running system, this means you will have to do some preparations before starting cypress:

  1. Start the backend server (have a look at the backend chapter for setting this up), it's easiest to simply use my PyCharm settings. image
  2. Start the frontend via our npm command serve defined in the package.json. VSCode is able to list all commands nicely, and start them via click: image

Starting cypress

  1. Make sure the server is running on localhost:8000 and the client is running on localhost:8080.
  2. Start cypress via our cypress:open npm command.
  3. Cypress might say something like "no local cypress installation detected. Installing..." and exit. Simply execute the command again after that.
  4. In the Cypress interface select E2E test and then Chrome (I only tested with Chrome, might also work on other browsers).
  5. A new Chrome window should open, where you can select different test files to run. You can run each file manually by entering them in the Chrome window. If you want to run "all tests" you will need to create a "all test file" for that (example) and update it whenever you add new test files.

Cypress related issues and practices

Database garbage

Some of our cypress tests have the following flow:

  1. Create element in database (via python script)
  2. Let Cypress do something in the GUI
  3. Delete element in the database (via python script)

Whenever a cypress test like this fails it could lead to a "garbage object" in the database, because step 3 will not be executed. In the long term it might be wise to switch to an exclusive test database that can be often cleared without remorse (see also).

Don't run cypress in the production system

At some point in the future one or more instances of ddueruem-web will be available for public users. Never run the cypress test on such instances, because of two issues:

  1. The "garbage object" problem described above
  2. Some cypress tests will create temporary things like tags, or families in the live database. Should a user ever have the same tag or family that cypress uses it can lead to problems.

Cypress tests sometimes throwing server errors

Sometimes, especially if you just started cypress it will throw errors the first time you run some tests. Those errors usually contain the text failed because the command exited with a non-zero code.. Simpy re-run the tests by pressing R and it should work. Rarely you need to do this re-run two times.

ESLint

TBD

Clone this wiki locally