JavaScript(13)---BROWSER COMPATIBILITY AND TRANSPILATION

BROWSER COMPATIBILITY AND TRANSPILATION

Notes: The version of JavaScript that preceded ES6 is called JavaScript ES5. 

Three reasons for the ES5 to ES6 updates are listed below:

• A similarity to other programming languages — JavaScript ES6 is syntactically more similar to other object-oriented programming languages. This leads to less friction when experienced, non-JavaScript developers want to learn JavaScript.
• Readability and economy of code — The new syntax is often easier to understand (more readable) and requires fewer characters to create the same functionality (economy of code).
• Addresses sources of ES5 bugs — Some ES5 syntax led to common bugs. With ES6, Ecma introduced syntax that mitigates some of the most common pitfalls.

Difference between ES6 and ES5 is that:

• In ES6, the let and const keywords were introduced. Because ES6 is predictably backwards compatible, a collection of JavaScript programmers developed a JavaScript library called Babel that transpiles ES6 JavaScript to ES5.

• In ES5, declared all variables with the var keyword.

Notes: The difference above can be use to convert within the two. Transpilation is the process of converting one programming language to another.

• Passing JavaScript ES6 code to Babel, which will transpile it to ES5 and write it to a file in the lib directory.

Type in terminal:

• Developers use npm to access and manage Node packages. Node packages are directories that contain JavaScript code written by other developers. You can use these packages to reduce duplication of work and avoid bugs.
• We use the npm install command to install new Node packages locally.  The install command also installs all of the dependencies for the given package.
• The babel-cli package includes command line Babel tools, and the babel-preset-env package has the code that maps any JavaScript feature, ES6 and above (ES6+), to ES5.
• EXAMPLES

EX:  Use npm with the -D flag to install the Babel command line package and add it to the devDependencies property in package.json.

$ npm install babel-cli -D

EX: Use npm with the -D flag to install the Babel preset environment package and add it to the devDependencies property in package.json.

$ npm install babel-preset-env -D

• The property’s value, "babel src -d lib", is a command line method that transpiles ES6+ code to ES5.
• babel — The Babel command call responsible for transpiling code.
• src — Instructs Babel to transpile all JavaScript code inside the srcdirectory.
• -d — Instructs Babel to write the transpiled code to a directory.
• lib — Babel writes the transpiled code to a directory called lib.
• The npm run build command will transpile all JavaScript files inside of the src folder. This is helpful as you build larger JavaScript projects — regardless of the number of JavaScript files, you only need to run one command (npm run build) to transpile all of your code.

What I learned today?

   Today's lesson was kind of tuff for me because it is about typing things into the terminal, and there is no hints for the terminal works. But I did learn a lot of important codes about how to convert a ES6 file to a ES5 file.

Overview of the lesson:

• ES5 — The old JavaScript version that is supported by all modern web browsers.
• ES6 — The new(er) JavaScript version that is not supported by all modern web browsers. The syntax is more readable, similar to other programming languages, and addresses the source of common bugs in ES5.
• caniuse.com — a website you can use to look up HTML, CSS, and JavaScript browser compatibility information.
• Babel — A JavaScript package that transpiles JavaScript ES6+ code to ES5.
• npm init — A terminal command that creates a package.json file.
• package.json — A file that contains information about a JavaScript project.
• npm install — A command that installs Node packages.
• babel-cli — A Node package that contains command line tools for Babel.
• babel-preset-env — A Node package that contains ES6+ to ES5 syntax mapping information.
• .babelrc — A file that specifies the version of the JavaScript source code.
• "build" script — A package.json script that you use to tranpsile ES6+ code to ES5.
• npm run build — A command that runs the build script and transpiles ES6+ code to ES5.

 What I'll be doing tomorrow? 

INTERMEDIATE JAVASCRIPT MODULES