Disclaimer: This article is pretty old.
I'm just amazed how brilliant jQuery and CoffeeScript are working together. JQuery promises "write less, do more", but with the clean syntax of CoffeeScript you can be even more concise!
Here is a quick example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>jQuery meets CoffeeScript</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script type="text/coffeescript">
show_message = (msg) ->
$('#message').hide().text(msg).fadeIn(2222,
-> $('#message').append('!')
)
$ -> show_message "world"
$('#message').click -> show_message "you"
</script>
</head>
<body>
<h1>hello <span id="message"></span></h1>
</body>
</html>
Here you see it running. Just click "world" to fire the click event.
hello
Just have a look to the JavaScript version:
var show_message = function(msg) {
return $('#message').hide().text(msg).fadeIn(2222, function() {
$('#message').append('!');
});
};
$(function() {
show_message("world");
});
$('#message').click(function() {
show_message("you");
});
Happy coding!
Posts
Frontend development is getting really nice again, now that we got all those great preprocessors (HAML, SASS and CoffeScript ftw)!
ReplyDeleteIts cool that you don't even notice, that CoffeeScript is preprocessed. You just need to include http://jashkenas.github.com/coffee-script/extras/coffee-script.js as js source and write your CoffeeScript in a <script type="text/coffeescript"> tag. So it just works with any static html page :)
ReplyDeleteCool. I'm looking forward to using CoffeeScript inside my html pages at some point.
ReplyDeleteyou should add that one should preprocess coffeescript to JS at deployment time (or at least server side against mtime of the file). coffeescript client side processing is not production intent as far as Im aware.
ReplyDeleteHey Anonymous!
ReplyDeleteYou are totally right. It is not recommended for serious use.
But it works quite well and is a great starting point to get in touch with CoffeeScript.
Thanks for the post Arbo. Referenced your clear example a couple of days back (clientside coffee script)
ReplyDeleteawesome, thank you !
ReplyDeleteHi good example, I'm starting with jQuery and now CoffeeScript, could you help me understand this lines in your JS code?
ReplyDelete$(function() {
show_message("world");
});
What are you doing there? wouldn't it work just calling show_message("world"); What does that wrapping do?
Thank you
hey ACBC,
ReplyDeleteits just the document ready handler of JQuery.
Check this out
cheers,
Arbo
loved your post.. bec simples are betters
ReplyDeleteIt seems to be quite valuable to know much about JQuery and the scripts it work with.It was very informative to know all these.Thank you !
ReplyDeleteweb design company
Awsome !! THANX !
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteSoon after reading this I started digging CoffeeScript and jQuery, and now I started a blog with tutorials on both: coffeequery.blogspot.com
ReplyDeleteI'm not a huge fan of coffeescript for examples such as this. If all you're doing with coffeescript is using it as a translator for javascript, but nearly all your work is in jquery - it's a lot of hassle (learn a new language, learn how to compile it for production.etc.) for very little gain. If however, you're doing full-stack javascript development (which is possible these days utilising things like nodejs, expressjs, spinejs/sammyjs.etc.) then the benefits really starts to show.
ReplyDeleteSeeing a full server-side development done in coffeescript is actually very nice.
Good article however, arbovm - I can see this being very useful to many people :)
No extra merit can be seen with the Coffeescript version from this example because there are still many parentheses remained after the method. It is said that Coffeescript is not good at the chain rule.
ReplyDelete