If there is one thing that has always irked me about Javascript and PHP is that there is a complete lack of forced structure. This of course has it advantages to developer who are new to the world of PHP/Javascript/HTML etc, making it easy to jump into a language and start learning quickly. But there are huge disadvantage that don’t even become apparent to someone with a background like mine (I started learning development on my own out of a PHP for Dummies book) until you start looking at a compiled language like Objective C.

What does any of that have to do with Codekit? Once you get use to the idea of being able to break your project up into resources that get imported and referenced as needed, it becomes a little daunting to think about the mess a large Javascript project can become. Unless you spend the time to properly organize yourself you’ll quickly be looking at a 1k+ line single Javascript file that becomes a headache to try an maintain. Or you’ll have a folder full of resource, and since Javascript isn’t compile, a ton of browser requests to go along with all those resources.

That’s really at the hear of what CodeKit does so well. What drew me into using CodeKit in the first place was the easy support for Less and Sass. What kept me using it rather than any other command line tool was it’s awesome support for Javascript includes. I’m able to organize all the javascript element for this website into nice and small files that are easy to maintain, but at the end of the process I’m only dealing with 1 request back to the server for my Javascript, and 1 request for my CSS. I structure my javascript on my personal machine like this:

site
|____resources
|       |___ trees.js
|       |___ leaves.js
|       |___ daycycle.js
|       |___ pikachoose.js
|       |___ fancybox.js
|____functions.js

Each of the files in the resource folder holds a separate part of my site’s functionality such as the leaves on the portfolio page or the shadows/trees that are drawn in the header. Each of these snippets of code are self contained, but more importantly only give me access to the tools I’ll be using (functions for drawing items like a tree) rather than execute the entire process. I rely on my functions.js file to handle all the logic behind calling these methods.

My functions.js file starts off with a //@codekit-prepend “resources/trees.js”,”resources/leaves.js”,”resources/daycycle.js”; After everything is pulled into the one file I then start my jQuery logic in a document ready call just like any other jQuery file, but all the functions I want to reference are now easily accessible with only 1 request made by the browser!

One little snafu I had that was cleared up by developer @bdkjones was commenting out the CodeKit prepend statement. CodeKit does not remove this line, so unless you comment it out you’ll receive a syntax error when the browser attempts to load your Javascript. CodeKit pulls in the corresponding files and depending on your settings will also minify them reducing the server load even more.

I also apply this same type of organization to my CSS styles. Since the big hype right now is responsive design, stylesheets are starting to get larger and much more complex. I use the Less compiler in CodeKit to help ease this burden. I can take my 3 stylesheets and combine them down into one minified stylesheet. I keep the style broken out by screen size, fullsize.less for the standard styles, phone.less for lower resolution specific items, and print.less (still a work in progress) for printing.

Well CodeKit may not replace all the needs I have, it does make my day to day development a ton easier! If you haven’t check it out yet you can at http://incident57.com/codekit/ for the next couple weeks until it officially launches in the App Store. It’s a free beta, but should be available for around $20 when it launches officially. I’m a tightwad when it comes to development tools, but this is $20 I will gladly spend as soon as I can.