logo

Changelog 24: CoffeeScript ☕

We shipped Coffescript ☕ allowing you to record CoffeeScript web apps and node scripts and then debug them in Replay DevTools.
profile photo
Jason Laster
Image without caption
We’re shipping CoffeeScript ☕ today! You can now record your favorite CoffeeScript web applications and node scripts and debug them Replay’s Time Travel Debugger.
CoffeeScript provides syntactic sugar for the class and extends keywords as well as static methods @. CoffeeScript also lets you drop those pesky parenthesis and slice, splat, and spread lists with convenient loop comprehensions. All of this magic is transpiled into readable ES2015 and debuggable with Replay Source Maps. Let’s take a look!
In this example, we’re paused in the createTodo immediately after our first todo was added. Notice how clean the code is. The if statement doesn’t even have parenthesis.
Image without caption
Progressing a bit further down, we can see our newly created Todo Model. Not only is it easy to hover on the value and see the model’s attributes and utilities, but we can also admire how clean CoffeeScript’s property syntax is on that line. Notice how we don’t need curlies to pass in key/values. Incredible!
Image without caption
If we look at the sourcemaps that CoffeeScript outputs, it appears that their maps are missing the original expressions which make it harder to see the relationship. This is understandable, given CoffeeScript is so new. And even without the complete mappings, we can see how readable the compiled code is. CoffeeScript does not just provide more readable original code, but they are careful to also output readable compiled code. Just try looking at the output of Babel.js sometime. Oof!
Image without caption
On a serious note, we didn’t do anything to make CoffeeScript work. We’ve invested in general Source Map support so that language features like JSX, TypeScript, and even CoffeeScript just work. It’s easy to forget, but CoffeeScript kicked off incredible innovation in 2009. We can’t wait to see what comes next!
Related posts
post image
This week we’re excited to share Elements Panel V3, which brings one second element loads.
post image
Today we’re excited to share an entirely new version of React DevTools which Brian Vaughn wrote from scratch.
post image
Today we’re excited to share the new time travel aware Full Text Search. The next time you search, you’ll notice that we’ve dimmed out the results which were not executed.
Powered by Notaku