practical solutions for effective open source development
IN one of the past articles we talked about our first opener — Smartup Time Tracker. The system is necessary for enterprises that want to keep records of the working day and organize hourly payment. In this article, we will provide an overview of its technical solution.
Get to know 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 on Spring. The frontend is a Vue project of the third version. We have not started using full-fledged JPA for requests to the database, we work with JPQL.
The technologies were chosen immediately – they were guided by the speed factor, they wanted to make it in three months.
Contents
Backend
JPA is the dominant specification in the market, but it was not suitable for us because of the slowness and complexity of the requests. At the design stage, it became clear that heavy JOIN operations would be required to build the reports. With JPQL, we write the queries ourselves to provide flexibility and the ability to retrieve more complex data structures that JPA does not provide.
As the project expanded, aspect-oriented programming appeared on the backend. Since the functionality of the project was quite large, and the implementation of messages could complicate the business logic, it was decided to use aspects. Aspects are currently used for notifications – to inform the user about various processes in the system.
It’s like a filter: when a request passes a certain point, the aspects check to see if the method call needs to be responded to. They intercept the moment the method is executed and add additional logic. All messages in the system are triggered after the method has completed its work.
For example, the method calculates the user’s hours and completes the execution. Aspects detect that an action is complete and respond to it by creating a message for the user. We separated the business logic (e.g. counting and saving the clock, adding users) and additional platform requirements (e.g. messaging). This makes it possible not to pile up the business logic with unnecessary details.
No need to change the 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 to the user. Thus, the business logic remains unchanged.
Frontend
Vue was initially chosen for the frontend. The project is currently transitioning to the Composition API.
Previously, Vue had a Vue Options API approach to writing components, and in the third version, a more convenient way 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 documentationWhere the reasons for the appearance of the Composition API are described.
You can write code using the old syntax, it also works. However, the new approach improves readability and code structure without affecting performance.
It is 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 is already set – we substitute our data and get a neat design.
Later, our CEO changed the requirements and wanted more complex tables to display data. The main page of the tracker is already a completely redesigned version. These tables are not taken from the library, we made them ourselves. The same applies to the tables of complex reports.
Previously, we had a manual system to confirm that an administrator had blocked editing of the clock. Now it is done like this: the administrator chooses the blocking date and can schedule it. The time is entered in the configuration file, if desired, it can be easily customized. No manual editing required. By default, the time is set to 23:59 Moscow time
This is implemented using Spring and its task scheduler mechanism. We use a pool of threads that are waiting to start. There is always only one thread waiting to execute a task. Thus, if the user has scheduled several dates for blocking, only the closest one will be stored in RAM. Other dates will be downloaded from the database as needed.
Further plans include small improvements to the notification system, as well as a new feature – allocation. It will allow you to plan the loading of employees for projects in the future. That is, it will be possible to distribute the clock over the entire duration of the project and then compare it with the actual time spent. This will enable you to build reports for revenue forecasting.
Conclusion
We believe that the chosen technical solution for development turned out to be successful. The use of a monolithic Java backend and 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!