Lets move 🚀
- What compatibility is and the types such as Forward and Backward compatibility
What is compatibility
Forward compatibility vs Backward compatibility
var keyword should still work on the new browser.
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.
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.
Keep learning 💪🏿.