CODEWITHSUNDEEP
javascriptperformancecodeigniter
Dave Clarke
Dave Clarke

Reputation: 2696

Placement of JS script in CodeIgniter

I'm fairly new to CodeIgniter and developing a couple of sites at the moment. I'm sure people may have diferent opinions on this but a general consensus and explanation as to why, would be useful.

When developing without frameworks such as CI, you tradionally put the various JS operations (listeners, jQuery calls etc) in the footer of the page.

With CI, the norm is to include a common footer & header, but if we then put all JS, for all pages, in this footer we're calling things that aren't needed on each page.

What's the best way to get around this / set this up?

Upvotes: 1

Views: 2627

Answers (4)

Maxime Morin
Maxime Morin

Reputation: 2008

I don't have any experience with it, but for my next project, I'm probably going to try Carabiner.

From the GitHub project :

Carabiner manages javascript and CSS assets. It will react differently depending on whether it is in a production or development environment. In a production environment, it will combine, minify, and cache assets. (As files are changed, new cache files will be generated.) In a development environment, it will simply include references to the original assets.

Carabiner allows you to do something like 

// add a js file
$this->carabiner->js('scripts.js');

// add a css file
$this->carabiner->css('reset.css');

in your controller to add css or js files and then you output them in your header or footer with 

// display css
$this->carabiner->display('css');

//display js
$this->carabiner->display('js');

I did implement something similar in the past, but this library looks promising with a lot less effort than building my own. I would definitively check it out, if I were you.

Upvotes: 4

Marc Audet
Marc Audet

Reputation: 46785

Many of the websites that I build are not that busy and the priority is ease of maintenance. For these cases, I just load all the scripts that I need, usually jQuery core and related plug-ins for image rotators and so on.

My view is that once the home page is loaded, the scripts get cached so the extra weight does not really affect the site performance all that much (especially for lower traffic sites).

However, a bigger problem has to do with jQuery actions that vary from page to page. In CodeIgniter, I use nested views in a template-type of approach to rendering pages. I often find myself putting in page specific jQuery actions in a <script> tag after my page content section, but before my footer section. Not quite the best but at least my jQuery actions are close to the relevant page elements (usually forms). Ideally, I would create a javascript file specific to each page and load it from the relevant CodeIgniter controller. I usually do this as part of refactoring from version 1 to 2 once the website/application has stabilized.

As an aside, I am much more concerned about keeping my CSS files organized and modular. My CSS tends towards chaos a lot more quickly than my JS files.

Take-Away: If you have a busy site and performance is critical, build in page-by-page script loading into your controllers and maintain a JS file for each page in addition to the global JS file (and similarly for CSS).

If your site is less busy, just load all the scripts and CSS files in the primary page template (or the common header and footer files) as needed.

Having said that, I would rather spend few minutes coding things right and avoiding having a major mess to deal with two years down the road when a major site upgrade is requested.

As professionals, we strive to improve our skill sets and deployment strategies, but not every website project will be perfectly executed since all budgets are finite and time is limited. At the end of the day, we get paid when the work is done, even is not 100% perfect.

Upvotes: 1

Ayman Safadi
Ayman Safadi

Reputation: 11552

Using an application framework is no excuse to compromise your front-end code. Whoever told you that "With CI, the norm is to include a common footer & header" is a lazy developer.

What I've done in the past is something like this:

MY_html_helper.php

<?php
function js($js)
{
    $js_base_path = '';

    if(is_array($js))
    {
        foreach($js as $script_src)
        {
            if(strpos($script_src, 'http://') === false && strpos($script_src, 'https://') === false)
            {
                $js_base_path = base_url() . 'js/';
            }

            echo "<script src=\"{$js_base_path}{$script_src}\"></script>";
        }
    }
    else
    {
        if(strpos($js, 'http://') === false && strpos($js, 'https://') === false)
        {
            $js_base_path = base_url() . 'js/';
        }
        echo "<script src=\"{$js_base_path}{$js}\"></script>";
    }
}
?>

CONTROLLER

// many scripts
$this->load->view('_footer', array('js'=>array('whatever.js', 'plugin.js')));

// or a single script
$this->load->view('_footer', array('js'=>'jquery.cycle.lite.js'));

VIEW

<?php
if(isset($js))
{
    $this->load->helper('html');
    js($js);
}
?>

<script src="/js/script.js"></script>

Goes without saying, but feel free to customize it to suit your needs.

Upvotes: 2

JeffJenk
JeffJenk

Reputation: 2665

I would say there are a few things you could do. You could have a number of different footers linking to different scripts and change the footer link (footer-home.php or footer-about.php for example) in your controller. Then just keep general script links in your header.

You could also author personal scripts for specific pages and just include them in the body part of the page (home.php or whatever you are squeezing in between the header and footer).

I suppose it would depend on how heavy the scripts are and how often they are being used.

Upvotes: 0

Related Questions