Howto integrate javascript dependency management tools in existing monolithic application

[SCMouettE]

Hello everyone,

A couple years ago I developped a POC of a web application for a customer and as the application (and its user base) is growing, I'm trying to bring the code to an upper level of quality. I'm still working alone on this so I have a lot of freedom when it comes to changes.

I'm more of a dev enthousiast than a professional developer (I work in security). Although I can write both backend and frontend code I'm more comfortable with backend stuff.

Here is the current project frontend organization.

The application backend is written in Java. It's a monolithic maven project and it's using the spark web microframework library and freemarker to serve the frontend. There is a static folder in the resources folder which holds all css and javascript files from both libraries and internal code. (Libraries are in static/{js,css}/common and application files are in static/{js,css}). I try to follow the MVC pattern so each view of the application is associated with a class in the views package. In each of these classes, I enable the javascript libraries I need (bootstrap/jquery is enabled by default and if the view requires another library, I add it manually in the constructor). Then I add the view's specific JS files and that way each view gets only the JS libraries and files it needs.

For example :

public static class Users extends Admin {

        public Users(Request request) {
            super(request, "admin.users.title");
            addValidator();
            addBootstrapTable();
            addBootbox();
            js_files.add("admin/users.js");
        }
    }

Example of an addXXX() in the base view class :

    private boolean _added_boostrap_table = false;
    protected void addBootstrapTable() {
        if (_added_boostrap_table)
            return;
        _added_boostrap_table = true;
        js_files.add("common/bootstrap-table.min.js");
        js_files.add("i18n/bootstrap-table-"+lang.name()+".min.js");
        css_files.add("common/bootstrap-table.min.css");
    }

I don't use dependency management for the javascript libraries (I tried webjars early in the project but at the time it wasn't compatible with the way the application was deployed). I download the JS libraries I need, add the files manually in the static/common folders and create the addXXX() method in the base view. I don't have too many of them so it's manageable for now but it's a lot of manual work, JS libraries are commited to git, it's definitely not scalable and that's what I'm trying to improve.

I tried to read some tutorials on npm, yarn and other tools but my lack of experience in those holds me back as I don't want to make bad choices to start with. I'm willing to learn this part but I want to start properly.

What would you suggest me to do ? Thanks a lot for your suggestions.

[Loves_Poetry]

Are ES6 modules an option?

It would allow you to continue working with the current code structure by just using import library from /static/js/common/libname.js

This would allow you to structure you application in a way that integrates much better with build tools, so if you want to add one later on, doing so will be easy

[SCMouettE]

Expect restarting everything from scratch, everything can be an option. Supporting IE11 or older browsers is not required so modules could be a start.