CoffeeScript and Meteor 1.3: How to use modules, example Todos app

With Meteor 1.3 we now have access to ES2015 modules, a.k.a. import and export. Fortunately for CoffeeScript diehards like me, modules can also be used via CommonJS, a.k.a. require and module.exports. I’ve written some documentation explaining how to use modules in CoffeeScript.

I’ve also ported the official Todos app into CoffeeScript, to create a working demonstration of how to achieve various ES2015 things in CoffeeScript. You can see how to import and export other files of your own, and how to import Meteor packages and NPM modules. The example also shows how to work with class and super in CoffeeScript. The original .js files are left in the same folders alongside their .coffee equivalents, so you can compare them side by side.

As far as I can tell you can achieve any Meteor feature in CoffeeScript, even Meteor 1.3 ES2015 features like modules and class support, without needing backticks or mixing .js files into your project. Yes, I know, you can certainly achieve any Meteor feature in ES2015, but I still find CoffeeScript much easier to read and I’d rather stick with it if at all possible. For now, at least, it’s still possible.

9 Likes

thanks man this is just what I needed!

2 Likes

Good job, thanks! :slight_smile:

1 Like

Here’s another example I made, porting the Mantra spec’s React components to Jade-like Coffeescript ones https://github.com/TheAncientGoat/mantra-sample-blog-coffee - would be interesting to see if we could pull jsx from the compilation process entirely

4 Likes

This is very interesting. What packages or modules enable that syntax?

Did you try CJSX/coffee-react? How did it work (or not)?

No extra packages, only coffeescript (and coffeescript-loader for react Storybook), which is very beneficial IMO.

CJSX works if you use meteor-webpack, there are a few starter repos that use it, but I don’t really see the benefit it adds vs the cost of an extra babel loader especially due to

The only thing missing is Jade style #my-id.myclass == <div id="my-id" class="myclass></div> shorthand, but in React you don’t rely on that as much

Thanks for this, it will help me migrate. I much prefer to use CoffeeScript, which I find to be cleaner and safer than JavaScript and ES2015.
@GeoffreyBooth Can you update the broken link (https://github.com/GeoffreyBooth/meteor/blob/devel/docs/client/full-api/packages/modules.md#coffeescript-syntax). I’d really like to see that.
Thanks.

Hi @jazeee, what I wrote has been merged into the official Meteor docs:

3 Likes

It’s wonderful that CoffeeScript is moving forward and keeping up with things. It offers a lot of what ECMA6 does, plus even more luxuries. Things like unless and different iterators, better string interpolation. Very happy that I can use it with Meteor. Caffeinated Meteorites, FTW!!