Use and manage Front End Assets for Web

Question

I am a beginner and am currently developing a kind of cms using PHP. The number of libraries that we can potentially use in the front end is large. I have a question about properly selecting, managing and using front end asset libraries.

I don't think just including a bunch of front end libraries like this is the best approach:

<script src="library1" /></script>
<script src="library2" /></script>
<script src="library3" /></script>
// and soon..

What if we use, let's say 20 ? Is that good practice, declaring the script tags 20 times ?

What I do currently is use Assetic, a php library for managing assets. I create a dump file (and cache it) for each request to my application before loading a template. My controller (I use MVC) could be something like this:

function indexAction()
{
    // some logic

    $assetManager = $this->get('assetic'); // get assetic service
    $css = $assetManager->createAsset(array(
            '@bootstrap',
            '@jquery_ui'
             // and many other library
    ));

     $assetContent = $css->dump();

     // create asset url, dont mind about this
     $data['stylesheet'] = $this->createAssetUrl($assetContent);

    return $this->render('index-template', $data);
}

And in the template (index-template), I could put kind of:

<link href="<?php echo $stylesheet ?>" rel="stylesheet" type="text/css">

I do that in almost every controller to include a bunch of assets to view. But I am not sure if this is the best method. Are there any better practical method that I don't know ?

Answer 1

You might consider managing your frontend dependencies with some dedicated frontend tools. A common combination is using Grunt and Bower to manage your javascript and CSS files. A dedicated setup like this makes it easy to do things like define different tasks for development and production, so while developing you include as many scripts and styles as you need, but for the production build you include a minification and/or concatenation task to combine everything into one file.

Answer 2

First of all, using too many <script> tags that link to or refer to any other file is a bad practice. Because the more the number of link to external resources, the more will be your http request which will slow your website down.

When a site is launched to production environment, generally all the different css files are merged into one (keep in mind that, this is done only when everything is complete and you don't have to make that many changes to these files) and so is with the js files.

About the management of assets, I guess Laravel has the best assets manager at present.