logo

Changelog 24: CoffeeScript ☕

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!
post image
We’re excited to be shipping the React Events Timeline today! The next time you select a Click event in the Events Panel, you’ll seek to the component’s onClick handler!
post image
We’re excited to share three big Chrome updates today: Chromium 108, Elements Panel, and React DevTools!
post image
We’re excited to share that over the past six months we’ve increased our P50 Butter Score from a 30 to a 90. 43% of replays now start in 15 seconds and resolve requests in under 2 seconds.
Powered by Notaku