1

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?

Improve this question

4 Answers 4

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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.

Improve this answer

4 Comments

I like this! Also, one could use a similar approach for managing page specific CSS files.
Someone else recommended Carabiner but I suspect that means loading more code to do the same thing. Your approach appears to be more lightweight which may be preferable.
@MarcAudet Actually Carabiner combines, minify and cache your assets (JS/CSS) in your production environment. For performance, that's a lot better. You end up with less HTTP requests and smaller responses.
I opted for Carabiner in the end, for the cache and the minification. Thanks your for help though.
1

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.