practical solutions for effective open source development

IN one of the previous articles we talked about our first open source – Smartup Time Tracker. The system is needed for companies that want to keep track of working hours and organize hourly wages. In this article we will give an overview of its technical solution.

Check out Time Tracker you can follow the link. We are waiting for your contributions!

Time tracker is a client-server application with a REST api. The server is a monolithic Java Backend based on Spring. Frontend is a project based on version 3 of Vue. We didn’t use full-fledged JPA for database queries; we work with JPQL.

The technologies were chosen right away – they were guided by the speed factor, they wanted to get it done in three months.

Backend

JPA is the dominant specification on the market, but it was not suitable for us due to the slowness and complexity of the queries. At the design stage, it became clear that building reports would require heavy JOIN operations. With JPQL, we write the queries ourselves to provide flexibility and the ability to achieve more complex data structure, which JPA does not provide.

As the project expanded, aspect-oriented programming appeared on the backend. Since the project’s functionality was already quite large, and the introduction of notifications could complicate the business logic, it was decided to use aspects. Now aspects are used for notifications – to notify the user about various processes in the system.

This is similar to a filter: when a request passes a certain point, aspects check whether to respond to a method call. They intercept the execution of a method and add additional logic. All notifications in the system are triggered after the method has completed its work.

For example, the method calculates the user's hours and ends execution. Aspects detect that the action has completed and react to it by generating a notification to the user. We separated business logic (for example, counting and storing hours, adding users) and additional platform requirements (for example, notifications). This allows you to avoid cluttering the business logic with unnecessary details.

There is no need to change business logic to notify the user. You can simply build an end-to-end structure that will work outside of the business logic, taking data from it to pass on to the user. Thus, the business logic remains unchanged.

Frontend

In the frontend, Vue was initially chosen. The project is now moving to the Composition API.

Previously, Vue had the Vue Options API approach to writing components, and in the third version a more convenient method appeared, which is now most often used by companies. The new syntax has become more concise and readable. If you want details, there are official Vue documentationwhich describes the reasons for the Composition API.

You can write code using the old syntax, it also works. However, the new approach improves the readability and structure of the code without affecting performance.

Used in the frontend ant-design-vue component library. To quickly sketch out the project, we used a ready-made library of components. The interface has already been set – we substitute our data and get a neat design.

Over time, our CEO changed his requirements and wanted more complex tables to display data. The main tracker page is a completely redesigned version. These tables were not taken from the library; we created them ourselves. The same applies to tables of complex reports.

Previously, we had a manual system for confirming that editing of hours was blocked by the administrator. Now it’s done like this: the administrator selects the blocking date and can schedule it. The time is included in the configuration file; if desired, you can easily customize it for yourself. No manual editing was required. The standard time is 23.59 Moscow time

This is implemented using Spring and its task scheduler mechanism. We use a pool of threads that wait to start working. There is always only one thread waiting for a task to complete. Thus, if the user has scheduled several dates for blocking, only the closest one will be stored in RAM. The remaining dates will be downloaded from the database as needed.

Future plans include minor improvements to the notification system, as well as a new feature – allocation. It will allow you to plan the workload of employees on projects in the future. That is, it will be possible to distribute hours over the entire duration of the project and then compare them with the actually tracked time. This will make it possible to build reports to forecast income.

Conclusion

We believe that the chosen technical solution for development turned out to be successful. The use of a monolithic backend in Java and a Vue frontend provided the necessary flexibility, high development speed and ease of system support. This allowed us not only to quickly complete the project, but also to scale it in the future.

We continue to actively develop Time Tracker and invite everyone to cooperate and contribute to the project.

Download Smartup Time Tracker, leave your feedback and contribute to the development of our open source!