Some real world examples of Coffescript and jQuery

Posted on June 2, 2013 by Stefan Bleibinhaus

This post gives a short introduction to Coffeescript [1] and shows the use of Coffeescript and jQuery [2] ( UI [3] ) by some examples in my blogging software scablo [4] . The target audience for this post are developers who are interested in Coffeescript and want to see some simple real world examples of it. Familiarity with JavaScript and jQuery is expected.


1 An introduction to Coffeescript

" Coffeescript [1] is a programming language that transcompiles to JavaScript" [5] . The language was designed by Jeremy Ashkenas [6] , who is also known for Backbone.js [7] . Unlike Dart [8] , which aims to replace JavaScript, and TypeScript [9] , which is a superset of JavaScript, Coffeescript focuses on adding syntactic sugar to JavaScript enhancing the readability and requiring less code. Additionally Coffeescript adds some sophisticated features to the language like list comprehension and pattern matching. For someone experienced in JavaScript, the transcompiled code of Coffeescript is very predictable. The homepage of Coffeescript [1] gives great examples on how code will look like after being transformed into JavaScript. For this introduction, I have taken the introductory example of Objects from that page. Code snippet 1 shows the Coffeescript code, which is compiled to the JavaScript code seen in Code snippet 2.

Code snippet 1: A simple example of Coffeescript (Example taken from Coffeescript.org [1] ). The compiled JavaScript can be seen in Code snippet 2.
Code snippet 2: The compiled JavaScript code of Code snippet 1.

2 Coffeescript examples

The following code examples of Coffeescript show how I have applied the language to solve requirements in my blogging application scablo [4] . To get some context of the scripts, you can check out the javascripts folder [10] of scablo on github.

2.1 Prevent link default action

To prevent the default action of a link, you can bind an event handler to the "click" JavaScript event [11] and then prevent the default action [12] . In scablo [4] I am using this to ask the user for confirmation with a popup before performing any potential dangerous action. Code snippet 3 shows the code I am using, when the user wants to delete a post. When the link is clicked, a popup asks for confirmation and only triggers the action, if the user affirms his intention. Code snippet 4 shows the corresponding JavaScript.

Code snippet 3: Code in Coffeescript to ask the user for confirmation before triggering the action of a link (Example taken from scablo [4] ). The compiled JavaScript can be seen in Code snippet 4.
Code snippet 4: The compiled JavaScript code of Code snippet 3.
2.2 Positioning a bootstrap popover

I am using Coffeescript to make the admin login popover responsive by positioning it after it opens. You can try the positioning by resizing your browser window and clicking on the small lock on the right side of the footer to open the popup. The code I am using to accomplish that is shown in Code snippet 5. Basically, I am looking for the popover and check if it is shown, then I get some metric values of the page and the popover and take action, if the popover is too far on the right side of the page. I am relocating the popover by modifying its css left attribute [13] . Code snippet 6 shows the corresponding JavaScript.

Code snippet 5: A Coffeescript function to position a bootstrap popover [14] (Example taken from scablo [4] ). The compiled JavaScript can be seen in Code snippet 6.
Code snippet 6: The compiled JavaScript code of Code snippet 5.
2.3 Input field autocomplete

jQuery UI [3] includes an autocomplete option, which "enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering" [15] . I am using that in scablo [4] to suggest possible targets while the user is typing in the search field. You can try it out yourself by typing in "sc" in the search field shown on the sidebar. The code for that behavior is shown in Code snippet 7. Basically the code is adding the autocomplete behavior of jQuery UI to the #searchField. It starts to suggest after two letters are typed and loads the suggestions from the source /blog/quicksearch, which returns a list of fitting JSON objects with the attributes name, url and type. If a user selects one of those suggestions, they are redirected to the url of the item. The rendering of the items in the suggestion list is made according to their type, as pages and tags have different icons associated with them. Code snippet 8 shows the corresponding JavaScript.

Code snippet 7: Coffeescript code using jQuery UI's Autocomplete [15] for search suggestions while the user is typing (Example taken from scablo [4] ). The compiled JavaScript can be seen in Code snippet 8.
Code snippet 8: The compiled JavaScript code of Code snippet 7. The code also shows how Coffeescript is wrapping the code into a self-executing anonymous function to not pollute the global namespace.
comments powered by Disqus
Admin login