WebExpress 0.0.9-alpha – Modern resource management for JavaScript and CSS

The inclusion of JavaScript and CSS files in the WebExpress framework is being fundamentally modernized to improve modularity, maintainability, and performance in a sustainable way. Until now, these resources were integrated manually through the VisualTree structure. This approach no longer matches the open and modular architecture of WebExpress and increasingly complicates maintenance. In the future, all required resources will be added automatically to the HTML header when a plugin is loaded and removed just as reliably when it is unloaded. The defined order of files is strictly observed to avoid dependency conflicts and inconsistent runtime conditions.

A central aspect is the consistent consideration of dependencies between plugins. A plugin is loaded only when all declared dependencies are satisfied. When a plugin is unloaded, any dependent plugins are either deactivated or a warning is issued in order to maintain system stability.

To optimize performance in release mode, all JavaScript files of a plugin are concatenated in the specified order into a single file and then minified. This reduces load times and file size. The same procedure is applied to CSS files, provided no dynamic loading capability is required. In development mode, all resources remain included as individual files, which significantly improves debugging and traceability.

Four approaches were considered for implementing automatic resource management in the WebExpress framework. Each offers specific advantages for different scenarios. The first approach relies on manifest based management such as a resources.json or resources.xml file. All resources of a plugin are described centrally in this file with order, type, and optional dependencies. When loading a plugin, the manifest is read and the listed files are inserted into the header in the correct order. When unloading the plugin, the entries are removed. In release mode, the manifest can serve as the basis for bundling and minification. This approach provides high flexibility and central control.

The second approach follows the principle of convention over configuration. Standard folders such as assets/js and assets/css are expected in the plugin directory and their contents are included in alphabetical order. The sequence can be controlled with numeric prefixes in file names, for example 01-core.js or 02-helper.js. Bundling and minification in release mode are based on the directory structure. This solution requires little maintenance but reduces flexibility in complex dependency scenarios.

The third approach integrates resource management directly into the build process. A preprocessing script analyzes resources of all plugins, checks dependencies, and generates a central resource list for the header. In release mode a postprocessing script bundles and minifies the defined resources. In development mode inclusion remains granular. Changes to resources or dependencies are detected and applied automatically by the build process. This approach enables extensive automation and high performance but requires a suitably developed build infrastructure.

The fourth approach uses attribute based resource annotations in the source code and is considered the best choice for the WebExpress framework because it fits seamlessly into the existing logic and architecture. Inclusion of JavaScript and CSS files is automated and modular through the central IncludeManager. Resources are declared directly in the source code using attributes such as [JavaScript("file.js", Order = 1)] or [Css("style.css", Order = 2)]. When a plugin is initialized, these attributes are read via reflection and the defined resources are dynamically inserted into the HTML header in the specified order. Dependencies between plugins can also be declared via attributes and validated by the system. This tightly integrates resource management into development and removes the need for external configuration files. In release mode the IncludeManager bundles and minifies all JavaScript and CSS files of a plugin in the given order to optimize load times and file size. Delivery is handled through dedicated endpoints such as /include/js/{plugin} for JavaScript and /include/css/{plugin} for CSS. In development mode, inclusion remains granular so that each resource is included as an individual file and debugging and traceability are preserved. In debug mode, delivery continues to use existing asset endpoints.

After careful consideration, the fourth approach was selected as the best solution because it simplifies the development flow, increases consistency, and reduces maintenance effort without limiting the flexibility of the system.

The continued development of WebExpress thrives on community participation. Developers are invited to test the new include management, provide valuable feedback, and actively help shape future features. The GitHub repository is the central place to learn more, get involved, and shape the future of WebExpress together.