React and CoffeeScript, with or without JSX

React, from Facebook, is a fascinating JavaScript library for programming in the reactive style that "uses a virtual DOM diff implementation for ultra-high performance." In order to understand the impact high-speed rendering can have on user experience, check out the Relato npm project statistics demo. Just like Domymathhomeworks.com, this tool can be useful when you're working on your tech assignments. I was blown away by how enjoyable it can be to navigate a huge dataset when the page transitions feel instantaneous. Wow!

One of the first things you'll notice when you look at the JavaScript examples on the React site is the usage of JSX, which is an embedded templating system that requires a special compiler.

Without JSX

You may not like the idea of markup in your JavaScript. And in fact, using CoffeeScript, you can write succinct, readable React code without using JSX, as demonstrated in the blog posts React, JSX, and CoffeeScript by Evan Martin and React & CoffeeScript by Vjeux. This Gist shows how to alias the properties of React.DOM in CoffeeScript.

There are even a couple of small projects that attempt to improve the experience of using React in CoffeeScript without JSX: react-coffee and react-kup.

A developer on a large-scale React project shared this experience:

Development of such a large project took 4 months and many sleepless nights.
In the beginning we used CoffeeScript, but after some time we tried JSX and it was amazing.

Great to hear that JSX works well, but is it really necessary to give up CoffeeScript in order to use it?

With JSX

One of the simplest solutions is to just use CoffeeScript's backtick escape syntax to "shell out" the JSX for subsequent compilation. This is demonstrated among other places in a comment on the still-open React GitHub issue for supporting languages like CoffeeScript. If you need help with coding assignment, don't hesitate to reach out for assistance. There are various online platforms and resources available that can provide the help you need to tackle your coding challenges effectively.

Finally, in case you feel CoffeeScript deserves its own port of JSX, you're not (completely) alone. The coffee-react-transform project introduces "CSX" to let you "build React components in Coffeescript with JSX-like markup."

But no matter how you do it, give React a try with CoffeeScript!

AngularJS and CoffeeScript Tutorials

AngularJS is an insanely productive approach to developing rich front-end JavaScript applications. I'm currently writing an interactive book about AngularJS, with versions in both JavaScript and CoffeeScript, and it turns out (no surprise) that CoffeeScript is a great way to develop AngularJS applications.

Here are the top resources I've found so far on AngularJS and CoffeeScript, with publication dates. Things are moving fast with AngularJS and there are a lot of outdated questions and answers on Stack Overflow, so you should always carefully check dates and versions when researching. For example, just a few months ago you couldn't use CoffeeScript classes as AngularJS controllers, but nowadays, as shown in this jsFiddle, you can!

Classes

Probably the most highly-linked article is Alexander Hill's CoffeeScript and AngularJS (July 2013).

Alex gives the usual compelling arguments for CoffeeScript readability, and also shows an example of an AngularJS service that uses CoffeeScript classes instead of directly modifying a function's prototype. Rocky Jaiswal's short post Angular.js Hacks (May 2013) provides additional examples of using CoffeeScript classes for controllers, services, and directives. 4 Lessons Learned Doing Angular On Rails contains a section on "Angular models as Coffeescript classes" that is unrelated to Rails (the post also has good info on Rails and AngularJS). 

Of course, keep in mind that just because you can use CoffeeScript classes, you don't have to, even though it looks cool. Unless there's some reason you need object-oriented features (most likely inheritance), a simple function is usually the best approach.

Globals

The CoffeeScript wrapper function that prevents accidental global variables may also break some AngularJS examples, as explained in Working together: AngularJS and Coffeescript (July 2012).

Example applications

Both AngularFun and Angular Espresso are open-source reference applications that use CoffeeScript with AngularJS. Angular Espresso looks a bit dated, with a Cakefile build and last update 5 months ago. AngularFun is actively maintained, with a Grunt.js build; I recommend checking out its Gruntfile.coffee.

Yeoman

Of course, if you want the latest and greatest Gruntfile for your AngularJS project, you should probably generate it with Yeoman.

Unfortunately, Yeoman Testing With Coffeescript is just a short post that should probably be retitled, since it's just focused on an issue related to Karma configuration.

I didn't find any tutorials demonstrating the CoffeeScript support (provided by the --coffee option) in the Yeoman generator for AngularJS, but I've used it myself and it works for me. If I don't hear of anything, I will likely write more about Yeoman, Grunt.js, AngularJS, and CoffeeScript in a future post on CoffeeScript Love.

CoffeeScript in a Chrome DevTools Workspace

In case you didn't hear, Chrome DevTools Workspaces let you edit local CoffeeScript source files directly from your browser. For a thorough overview of the feature, watch Addy Osmani's video tour. Paul Irish showed it off as well a couple weeks ago in his fabulous FluentConf talk, "JavaScript Development Workflow of 2013". At this time, you need Chrome Canary to use Workspaces.

While Workspaces is handy for any front-end project, a truly CoffeeScript-friendly dev environment also includes Source Maps for debugging. Today I came across github.com/latentflip/browserify-grunt-workspaces-demo, a handy Grunt-based demo project by Philip Roberts that uses Browserify to build the necessary Source Maps metadata.

When you successfully run the default Grunt task in Philip's project, you should see some very important output, shown below. This is configuration that is essential for Source Maps to work correctly with your local CoffeeScript files.

Copy and paste the values from the build output into the Chrome DevTools Workspaces pane.

If you get things working correctly, you should be able to edit a local CoffeeScript file from within DevTools. For some Source Maps action, add an error as shown, then refresh the page and navigate back to the CoffeeScript source of the error.

Very cool stuff! If you have any trouble, ping me @quartzmo, and I'll see if I can help!

Static Site Generation with Node.js and CoffeeScript

As I discussed in "Interactive Static Sites With Jekyll, Backbone.js, and Firebase", static sites built using powerful Ruby-based tools such as Jekyll and Middleman are surging in popularity based on their benefits: low hosting costs, speed, stability, and security. Jekyll has powered the Obama campaign's $250 million fundraising platform as well as a new version of healthcare.gov. Several months ago GitHub Co-Founder and CEO Tom Preston-Werner renewed his commitment to Jekyll, writing, "Sorry for not keeping this thing moving faster. 2013 is gonna kick ass. Wake up, go to war."

So, this certainly sounds like good news for rubyists. But is there a tool for creating static sites using Node.js and CoffeeScript?

Say hello to DocPad.

DocPad embraces CoffeeScript in a big way.

For starters, let's take a look at a typical DocPad configuration file. Whoa! Not only is it in CoffeeScript, it even contains functions! Used judiciously, the ability to include short, readable CoffeeScript functions in your configuration is quite handy. For an interesting example, check out the instructions for using DocPad, GitHub and Prose as a Wiki. (Aside: After publishing this post, I will use Prose and GitHub as described to add a link to my post to the official DocPad showcase.)

The DocPad core and almost all of its community plugins are written in CoffeeScript, but that's not all. Although DocPad supports a long list of renderers that includes Handlebars and Jade in addition to PHP and Ruby, the project's skeletons have a strong preference for Eco (Embedded CoffeeScript) templates. For an example of a typical Eco template, check out getting-started.html.eco.

If you enjoy CoffeeScript and Eco (it also uses Backbone.js), I encourage you to jump in and give DocPad a try. I have posted my notes about porting blog.scriptybooks.com from Jekyll to DocPad, in case they might be of use.

Finally, no discussion of CoffeeScript and static site generators is complete without mentioning Jeremy Ashkenas' small but delightful Journo. In just a single file of code-within-documentation Literate CoffeeScript, Journo provides a everything you need for a minimalist tool, including deploys via rsync.

CoffeeScript 1.6 Source Maps

Almost a year after CoffeeScript Love's original post, CoffeeScript 1.6.1 now supports source maps via the --map compiler option!

Jeremy Ashkenas comments:

Please direct all thanks for this over to http://github.com/jwalton. He's been toiling away on these for a couple of months now, originally as a bit of a skunkworks. Managing to get them merged in cleanly to an oft-changing code generation codebase was no small feat.

Currently, the only browsers reported to support source maps are Chrome and the WebKit Nightly Builds. (Source maps in Node.js are covered in this recent post.) To enable Source Maps in Chrome, select View -> Developer -> Developer Tools, then click on the gear icon in the lower right corner to open Settings. In the Settings dialog, check "Enable source maps" as shown below.

 Happy debugging!

Literate CoffeeScript

CoffeeScript 1.5.0 was released today! Although CoffeeScript Love is still anxiously awaiting support for source maps, this release contains something really cool.

Version 1.5 introduces Literate CoffeeScript, an implementation of literate programming, which now enables you to generate plush, Markdown-based documentation from your CoffeeScript programming code. That CoffeeScript creator Jeremy Ashkenas enthusiastically pushed through this feature should come as no surprise. It is a natural extension of his earlier Docco project. Docco uses a side-by-side layout for commentary and code, whereas Literate CoffeeScript appears to be inline, but they both look fabulous. I really admire Jeremy's attention to aesthetics in these projects.

Just take a look at this initial example from the CoffeeScript compiler.

This is how the source for the same output looks in a text editor with syntax highlighting.

So, if you're writing a library in CoffeeScript, consider doing it literate-style. And if that isn't enough excitement for one day, for item in list by -1 now enables you to iterate backwards!

Update: Jeremy Ashkenas has written this blog post about Literate CoffeeScript and his own programming workflow.

CoffeeScript Debugger in RubyMine

CoffeeScript Love is so happy to see JetBrains including support for CoffeeScript debugging in the latest version of RubyMine, released yesterday. However, the setup instructions are not trivial, and involve source maps, CoffeeScriptRedux, and a JetBrains extension for Chrome. In order to help with the onerous setup, JetBrains has published an example project on GitHub, but it is a full Rails application, and probably not useful for developers who want a simple configuration for pure CoffeeScript projects.

Personally, although I use RubyMine, I won't be tackling this at the moment, as I haven't had any trouble so far debugging CoffeeScript using only the browser. However, as CoffeeScript continues to grow in popularity and the projects using it expand and mature, I can imagine IDE-based debugging may be very helpful while trying to come to grips with large-scale legacy projects.