Journey of a Javascript Samurai S01 E02 [Compatibility, Transpilers, Polyfills]

In the previous episode, we talked about the relationship between Javascript & Java, Relationship between ECMAScript & Javascript, Javascript environments and their APIs and how they are different from the core Javascript language. We rounded up that episode with the Programming Paradigms used in Javascript It's a great one, trust me 🤞🏽. Check it out here 😉

Lets move 🚀

In this article, we will talk about compatibility in Javascript language with browsers. Our major highlights are

• What compatibility is and the types such as Forward and Backward compatibility
• What category of compatibility does Javascript fall into
• The tools used to handle compatibility problems between Javascript and the browser environment

What is compatibility

According to techtarget, compatibility is the capacity for two systems to work together without having to be altered to do so. In our case, the two systems involved are the Browser and the Javascript code we write.

Forward compatibility vs Backward compatibility

If we describe Javascript as a Forward compatible language, this means that when there’s a new addition to the Javascript language specification and we include the new syntax in our Javascript code, it should work in an old browser without issues. In very simple terms, old browsers should understand the new Javascript syntax. e.g async-await syntax should work in old browsers. On the other hand, If we describe the Javascript language as a Backward compatible language, then old Javascript syntax will always work in new browsers. I.e If a new version of chrome or firefox is released today, a syntax from an old Javascript specification like the var keyword should still work on the new browser.

What category of compatibility is Javascript

I thought Javascript is both forward and backward compatible, but it isn’t. Javascript is Backwards compatible (Old syntax works in new browsers ALWAYS). If a new feature is added to the language today and we include it in our codebase, an old browser will throw an error because it doesn’t support that feature yet. Not cool Javascript!!

As a programmer writing Javascript code, We always want to use the new shiny features of the language because most times they are always shorter and cleaner. We also don't want to tell users to download the latest version of chrome or firefox to make our application work properly for them. How do we ensure we can use the new, cleaner syntax without facing compatibility issues when a user with an ancient browser tries to use the application?

Transpilers to the rescue

For new and incompatible syntax, the solution is transpiling. A transpiler is simply a source-to-source translator. In our case, the new syntax is transpiled to old syntax to ensure that older browsers understand the syntax. The most common transpiler is Babel.

In the image above, the syntax on the left uses the ES2015 const keyword for variable declaration. Babel transpiles the code to the old var keyword as seen on the right. The old version is what we upload to the server so that all browsers(old and new) use our application without facing compatibility issues.

Sometimes, the problem is not Javascript

Sometimes the issue may not be the Javascript syntax, the Javascript environment may not support a certain API. I described the difference between Javascript syntax and Javascript environment API here. We may encounter an issue where a browser functionality is available in firefox but not in Internet Explorer, then we use A shim/polyfill to mimic the feature so we have something to fallback to for non supporting browsers.

Example

When performing DOM manipulation using ChildNode.replaceWith(), this is the regular syntax below

However, performing the same action on Safari or Internet Explorer 10+ and higher, a polyfill is required and here's what we have to do

It's a Wrap

Like always, thanks for making it this far. I appreciate it. The major points I need you to take away from this article are

• Compatibility is the capacity for two systems to work together without having to be altered to do so.
• Javascript is backwards compatible, not forward i.e old syntax will always work in new browsers.
• We can create the illusion of forward compatibility in Javascript (new syntax working in old browsers) by using a transpiler like Babel.
• When the issue is with the Javascript environment API and not the language, we make use of a polyfill instead of transpiler.
• Having a good understanding of the difference between core Javascript syntax and Javascript environment API as decribed here will help you understand if what you need is a polyfill or a transpiler.

Please reach out to me on LinkedIn or Twitter for questions, comments, and feedback. I would love to hear and learn from you too.

Keep learning 💪🏿.