Is Babel used to produce backward or forward compatible Javascript code?

Question

I have been reading through a book called You don't know JS and one thing that I can't wrap my head around is the concept of backward compatible and forward compatible Javascript.

From what I understand:

1. Backward Compatible: Once something is added to Javascript specification, it would never become invalid JS in future
2. Forward Compatible: Including a new addition to the language in a program would not cause that program to break if it were run in an older JS engine

Javascript is backward compatible and not forward compatible. This means that while including new feature in a program might break the program (forward compatible), Javascript engines would support older syntax forever in future (backward compatible).

To solve a problem of forward compatible issue, developers use transpilation and polyfills to convert new syntax to an older syntax supported in older Javascript engine.

So if transpilation is used to convert code into forward compatible code, does that mean Babel is used to solve forward compatibility issue and not backward compatibility issue?

This comes from the official doc in Babel website:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

I must have missed something and need some clarification on how to think through this.

Edit 1

I thought it would be helpful to quote parts of the book here:

Typically, forwards-compatibility problems related to syntax are solved by using a transpiler (the most common one being Babel (https://babeljs.io)) to convert from that newer JS syntax version to an equivalent older syntax.

Developers should focus on writing the clean, new syntax forms, and let the tools take care of producing a forwards-compatible version of that code that is suitable to deploy and run on the oldest-supported JS engine environments.

Answer 1

A brief history: In 1995 Netscape, which was the leading browser at that day, hired Brendan Eich to create the first version of javascript (he managed to build it in 10 days). This version was originally called Mocha, in 1996 they changed the name to LiveScript and then to Javascript, with the plan to attract Java developers (at this point in time Java was very famous among developers). The same year Microsoft released Internet Explorer and their own Javascript called JScript (mainly for marketing reasons). In 1997, with the internet growing they understood that they could not continue with two same languages so they went to an independent standard organization called ECMA to help them. The last one released ECMAscript 1 which is the first standard of the language. In 2009 they released ECMAscript 5 (ES5) with a lot of new features. In 2015 they released ECMAscript2015 or ES6 which was the biggest update ever. After that ECMA decided to release new standards in an annual cycle.

So after that, we are ready to see what is backward compatibility and what is forward compatibility. If you copy a piece of javascript code from 1997 and put it in a modern web browser, with a modern javascript engine it will still work. That's because today's browsers are able to understand code written 20 years (THAT'S BACKWARD COMPATIBILITY) ago due to the fundamental principle baked in javascript which is DON'T BREAK THE INTERNET. More specifically the rules of this principle are

1. old features never removed
2. instead of new versions of the language we have a new incremental update
3. websites works forever

Let's imagine now that somehow we are on 2910, what will happen if we take a piece of javascript code and try to run it on today's web browser? It will not run BECAUSE the browser does not understand code from the feature. Another example, what will happen if we take a piece of code written today and try to run it on a browser from 1996? The same as above, it won't run. This is why javascript is not forward compatible.

So, how we can use modern javascript today to solve that issue?

Because not all users have up-to-date answers to answer this question we need two scenarios.

1st scenario during development: in this stage, we build locally on our computer so we make sure we use the latest version of javascript. In that way, we have always the latest features of javascript.

2nd scenario on production: when we finish with the development we deploy the the application on the internet so it can run on the user's browsers. This is when problems arise because we can't control which version of the browsers users use. The solution to this problem is to convert modern javascript versions to ES5* (which is the major change) using a process called transpiring and polyfing. We can achieve that by using a tool called Babel.

*ES5 is fully supported by all browsers, that's why we use it as a target you can see that here

Answer 2

I believe your confusion is rooted in the mixing of the forwards- and backwards-compatibility terms for both the operating environment or language, and individual scripts themselves.

In the You Don't Know JS doc, the writer is describing the implementation of the language as whole as being backwards compatible, in the same way that many video games released for early generations of consoles (such as PlayStation and XBox) are able to played on their more recent successors (PlayStation 2 and XBox 360) due to the console (and its architecture, operating system, etc) being backwards compatible. When applied to JS, this means that a browser implementing a newer version such as ECMAScript 2015+ will fully support code written using an older version.

Babel, on the other hand, is referring to the code itself, and being able to create a backwards compatible version which can be run on older browsers, for example. To expand on the example above, this would be akin to being able to process an XBox 360 game through some engine (i.e. Babel) and have it give you a fully functional game to play on your original XBox. This is clearly a much more difficult problem, but is required due to JS not being forward-compatible.