When working with various templating systems in different languages, I often find myself facing the same question. First and foremost,
The crux of the matter
I am looking to implement a sub-template that includes a specific UI component which may be displayed on multiple pages in different locations. This UI component relies on certain CSS and JS files.
I aim to handle CSS and JS resources correctly by optimizing them as much as possible - combining and minifying where feasible, and potentially loading them towards the end of the markup for improved page rendering speed.
So, when dealing with diverse UI components, headers, sidebars, etc., each requiring their own CSS and JS resources to function properly, what would be the most effective approach to manage them through a templating system for minimal and organized final markup?
About my current scenario
I am currently working on a sizable legacy PHP website, which seems to predate many modern development practices like MVC frameworks and ORM usage. In order to maintain functionality and make incremental improvements until a complete rewrite is feasible, I am striving to bring some organization to the chaos.
I decided to start with the views layer, utilizing TinyButStrong templates. While examples of their sub-templates can be found here, my inquiry pertains to a broader context.
Potential solutions considered
In a more structured framework, I could envision using something like $view->add_js($foo). However, given the current state of affairs where others are opting for full-fledged frameworks, I must navigate through the existing codebase diligently. The lack of consistent file organization makes manual implementation challenging.
My current approach involves manipulating <link> and <script> tags using DOMDocument just before outputting the view. While this solution feels somewhat unconventional, I wonder if there exists a more logical method considering the general nature of the issue.
Your insights and suggestions are greatly appreciated.