ES6 may 'break' your Rails app

ES6 has a lot of features that make it fun to work with when it comes to writing code on the front end, but sometimes it may be tricky. Take a look at how you can break your production deploy with a simple string interpolation.

Good ol’ JS strings

We’re all used to the string concatenation like

console.log("The A variable value is: " + variableA);

It works perfectly fine, and will probably still work like that for years. But wait, we have ES6 string interpolation, we don’t have to type all these + signs anymore, cool!

ES6 string interpolation

We know that with ES6 we use the backticks instead of quotes and put the variable between curly braces after $ sign:

console.log(`ES6 is soooo cool, the value of A is ${variableA}`);

Works perfect, give me a beer!

Rails 3.2 assets pipeline

Rails 3.2 is quite old, but it’s not a dead version of this framework. Obviously, we have some newer ones, but I know a lot of projects still successfully running on Rails 3.2. Now try to use ES6 string interpolation with the old assets pipeline.

RuntimeError: SyntaxError: Unexpected character '`'

That’s the result of running the rake assets:precompile task. Worth to know before merging some minor changes to master :-)