Browser Compatibility and Transpilation Intro to Browser Compatibility • Before updating your , there are security vulnerabilities and unsupported language syntax — hence, we have browser updates • As developers, we have to address the gap between new JS syntax and older JS syntax that web browsers recognize • Ecma International is the organization responsible for standardizing JS (they released ES6.) Once standardizing it, developers quickly adopted ES6, but web browsers still didn’t support the syntax, so there was a lot of browser compatibility issues. • We will cover caniuse.com and Babel in this exercise. • Caniuse is a website that provides data on web browser compatibility for HTML, CSS, and JS. • Babel is a JS library you can use to convert new, unsupported JS into ES5 recognized by most modern browsers Caniuse • Once we adopted ES6 syntax, most new browsers do support majority of the syntax; however, there are still certain features in ES6 not supported by most web browsers. Additionally, we can run into the issue that there are users who have not updated to the latest, ES6 supported web browser version. • In order to figure out what we can and can’t use, we can visit CanIUse.com to find browser compatibility information. • There, you enter in the ES6 feature you want to check, such as ‘let’, and see the percentage of browsers that recognize that feature. You can also see when each major web browser added support for that feature. What’s the Point? • So, if there are browser compatibility issues, why use ES6 in the first place? • Ecma decided to make these changes for the following reasons: • ES6 is easier to read. Also, its syntax is easier to understand. • It’s less buggy. A lot of ES5 syntax led to common bugs. With ES6, new syntax that mitigates some of the most common pitfalls were introduced. • It’s more similar to other programming languages. The syntax is closer related to other object-oriented programming languages. • To limit the impact of ES6 browser compatibility issues, Ecma made it so you can map ES6 code to ES5 easily. • For example, interpolation was introduced in ES6. Look at how much more difficult it is to interpolate in ES5. So clean, versus so ugly and complicated!

ES6: `You can make carbonara with ${pasta}, ${meat}, and a sauce made with ${sauce}.`

ES5: "You can make carbonara with " + pasta + ", " + meat + ", and a sauce made with " + sauce + “."; Transpilation with Babel • If you see the above example, it’s such a pain to manually convert from ES6 to ES5. You’re prone to errors and typos resulting in bugs, it takes a lot of time, and as the size of the JS file increases, it’s simply unsustainable to convert everything manually. • Introducing…Babel! JS programmers developed a JS library that transpiles ES6 JS into ES5. • Babel is a JS package. • Transpilation is the process of converting one programming language to another. Think of it like transposition in music — you’re moving the music into another clef, for another instrument, etc. It’s still the same stuff and sounds the same, but in a different “language.” init • This section is on how to set up a JS project that transpires code when you run ‘npm run build’ from a root directory of a JS project. • The first step is to place our ES6b JS file in a directory called src • We also need to setup our project to use the node (npm) — we do this to access and manage Node packages. • Node packages are directories that contain JS code written by other developers. We use NPs to reduce duplication of work and avoid bugs. • To set that up, run ‘npm init’ which creates a package. file in the root directory. • A package.json file contains info about the current JS project. This might include: • Metadata (title, description, authors, etc.) • A list of node packages required for the project (so if another developer wants to run your project, npm looks inside package.json and downloads the packages in this list) • Key-value pairs for command line scripts Installing Node Packages • We use the npm install command to install new Node packages locally. The install command creates a folder called node_modules and copies the package files to it. It also installs all the dependencies for the given package. • To install Babel, we need to ‘npm install’ two packages, ‘babel-cli’ and ‘babel-preset-env’.

$ npm install babel-cli -D This includes command line Babel tools $ npm install babel-preset-env -D This has the code that maps ES6 to ES5

• Install Babel with the following two commands: • -D instructs npm to add each package to a property called ‘devDependencies’ in package.json. • By adding the -D flag, we install the package and add it to the devDependencies property. .babelrc • Run touch .babelrc to create the file. This specifies the version of the JS source code. • We have to define the preset for the source JS file. It specifies the version of your initial JS file (ES6) so we can transpile it to ES5. • To specify that we’re transpiling code from ES6+, we add:

{ “presets”: [“env”] “env” instructs Babel to transpile any } code from ES6+ Babel Source Lib • The last step we need to do before transpiling our code is specifying a script in package.json that initiates the transpilation • There’s a property in the package.json file called “scripts” that holds an object for specifying command Lind shortcuts. • The “build” script is a package.json scrip used to transpile ES6+ code to ES5.

“scripts”: { Object “test”: “echo \”Error: no test specified\” && exit 1”, “build”: “babel src -d lib” } Command line method Property transpiling ES6+ to ES5 • Breaking down the command line method:

“build”: “babel src -d lib”

The Babel Transpiles code -D flag: write the Name of the command call to inside the src transpiled code directory for transpile code directory to a directory transpiled code