Frontend Development
Before the integration of Vue.js, the project did not have a framework for frontend development. As a result, a complex and non-transparent project structure was established. Vue.js is a progressive framework for building the user interface. It uses a virtual DOM and works with single-file components that put all code from HTML to CSS to JavaScript in one file, making the code cleaner, leaner and easier to understand. Dynamic bundling makes it possible to store HTML, JavaScript and CSS in separate files - nevertheless, the principle of a closed component applies here. Normally, all three components are written to one file. Small components have the advantage of being testable, maintainable and easy to extend. These components therefore follow the principle of Separation of Concerns. This principle means that responsibilities are strictly separated. This ensures that the component can be used universally. For further information we recommend looking at the Vue.js Homepage.
The advantages and therefore the reason for using Vue.js in this project are listed below:
- Existing interface connection with yFiles
- Good documentation with best-practice examples
- Does not require additional languages such as TypeScript or JSX
- Modular and slim design
- Flexibility: Gradual integration of the existing project
- Good performance
- Tooling (Vue CLI, Vue DevTools for Chrome)
- Large and lively community for problem solving
- Teaching at the HTWG, easier access for follow-up projects
It is necessary to integrate the Vue CLI setup. The application is now separated into different single-file components that use Vue events to communicate different interactions. The Installation Guide explains how to set up the Vue CLI.
The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. We start our project in the frontend directory with "yarn run serve" to open our localhost.
For build management we use Yarn. All scripts and dependencies can be found in the package.json file.
In this diagram, you can see the structure of the frontend, its dependencies and functions.
For unit tests in the frontend we use Jest, a lightweight framework used by Facebook. yFiles needs its own testing environment, because regular unit tests with Jest are executed in Node and use JSDOM to simulate a browser environment. Unfortunately, JSDOM is not yet mature enough to work with yFiles, therefore we also use a Puppeteer environment. Unit tests in this environment can only be executed by stubbing/mocking yFiles. However, you can run integration/acceptance tests for yFiles components together with Puppeteer and a remote browser. The tests are executed by starting the application and running "yarn run serve-integration tests" followed by "yarn run test:integration". For testing Vue components, a specific Jest module is needed. Vue files consist of different kinds of code, such as HTML and JavaScript. These two specific testing setups prevent that Vue and yFiles can be tested at the same time (for now). yFiles needs a specific environment for testing and Vue needs specific Jest modules, which causes import and execution error while testing.
The following items are required for development:
- A working installation of Yarn (Installation Guide)
- An IDE that fully supports Yarn and Jest, for example IntelliJ or WebStorm