Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone
In this part we will see how to setup coffeescript and how to organize your coffeescript files properly in the solution, (or the way I like to use it).Coffeescript is an easy way of writing javascript with less code and more sensible/readable way, at the beginning you may find it difficult to understand or sometimes you will feel it is so error prone, as it depends on indentation and whitespaces, but once you get familiarized with it, then you will realize how much time you could save by using it instead of writing javascript. I’m not going to explain the syntax of coffeescript as there are lot of good resources out there. http://coffeescript.org/ is one you should always have on your browser. I will not be explaining Backbone.js concepts either, but I will tell you how to use both of these to implement simple single page application.
A sip of Coffee with Laravel and Backbone - Book

Step 1 – Install Coffeescript Compiler

Install coffeescript compiler in your machine so that you can generate javascript from coffeescripts. Command line version of coffeescript is available as a Node.js utility, so you must install node.js and npm (Node Package Manager). Best place you can find how to install Node.js and npm would be here – https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager Once you have Node.js and npm install then install coffeescript globally (-g). sudo npm install –g coffee-script Now you can type coffee –v in order to check it is installed correctly and its version.

Step 2 – Organize Files

Next step is to organize coffeescripts in our project folder structure. I like to have them in a folder called ‘coffee’ in parallel with ‘js’ folder (so that someday when we have coffee supported browsers we only need to change links in HTML page to use them). So once we write coffeescript and compile, it will be output to ‘js’ folder, because at the end we have to use generated javascript files in the HTML pages not the coffeescripts. Let’s create new ‘coffee’ folder under ‘lbc/public’ folder. Then ‘base’ and ‘category’ folder inside’ ‘coffee’ folder

Coffeescript Folders

Coffeescript Folders

I will use ‘base’ folder to keep common coffeescripts that I might use in other coffeescripts. ‘category’ folder is to keep scripts relevant with ‘category’ page and its logic. Now we will create empty scrtipt files in these directories, ‘base.coffee’ and ‘category.coffee’ respectively, and then go to the terminal window and change the directory to ‘lbc/public’ and issue following command coffee –compile –output js/ coffee/ This will compile coffeescripts in ‘coffee’ folder tree and output same folder tree with generated javascripts under ‘js’. Now your folder structure should be as below.

Coffeescript Folders and Files

Coffeescript Folders and Files

Step 3 – Include Generated Javascripts in Blade Templates

Then will modify our blade templates to include these javascript files. Open ‘_main.blade.php’ file in editor and update ‘js’ section to include ‘base.js’. Since this contains generic javascripts that can be used by all other pages we keep it here.

Then open ‘category/index.blade.php’ file and update ‘js’ section to include ‘category.js’ link.

Note that we added new entry after ‘@parent’, to indicate that, we need this link to appear after all javascript links define in parent ‘js’ section. Otherwise when it executes ‘category.js’, there will be missing dependent scripts. Now I hope you understand the power of blade templates and its usage of @parent keyword. Now open ‘http://lbc.dev/category’ on browser and view it’s source or (F12 on chrome to open developer tools and then inspect elements) You’ will see we have our javascripts in correct order as below.

Verify Javascript Links

Verify Javascript Links

Posts of this series

Laravel, Backbone.js + Coffeescript Tutorial Part I – Introduction
Laravel, Backbone.js + Coffeescript Tutorial Part II – Setup
Laravel, Backbone.js + Coffeescript Tutorial Part III – Install Laravel
Laravel, Backbone.js + Coffeescript Tutorial Part IV – Database
Laravel, Backbone.js + Coffeescript Tutorial Part V – Data model
Laravel, Backbone.js + Coffeescript Tutorial Part VI – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VII – REST API
Laravel, Backbone.js + Coffeescript Tutorial Part VIII – Views
Laravel, Backbone.js + Coffeescript Tutorial Part IX – Coffeescript
Laravel, Backbone.js + Coffeescript Tutorial Part X – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XI – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XII – Backbone
Laravel, Backbone.js + Coffeescript Tutorial Part XIII – Backbone

Tweet about this on TwitterShare on FacebookShare on Google+Share on StumbleUponShare on TumblrShare on RedditPin on PinterestEmail this to someone