The Necessity of Bundlers and Transpilers Review

David Joseph Katz
A free video tutorial from David Joseph Katz
Software Engineer
4.4 instructor rating • 19 courses • 230,471 students

Lecture description

Understand the reasons why bundlers and transpilers for JavaScript and React applications are necessary.

Learn more from the full course

React JS Web Development - The Essentials Bootcamp

Bootcamp on the React.js essentials. Gain a strong foundation of the core concepts, and build exciting and useful apps!

10:33:13 of on-demand video • Updated August 2019

  • Learn React the right and learn best practices.
  • Dive into the React engine, and learn how it works under the hood.
  • See how React fits in the big picture of web development.
  • Learn how to build applications from scratch.
  • Cover the crucial concepts of bundling and transpiling, and create frontend application build systems.
English Hi. Let's discuss the necessity of bundlers and transpilers. Wshen it comes to react development bundlers and transpilers are at the core. We need them to take our nicely formatted react code and transform them into documents that the browser can understand. We explored these concepts their code previously by configuring our React start a project to use passable in there which had transpiling abilities through babel. Now let's look at the big picture of how these bundlers and transpilers really work and why they were necessary in the first place. First up, bundlers. A bundler's input is a project that consists of multiple JavaScript files. The bundler will then package all of those files and build one overall JavaScript file. This includes all custom javascript code in the project and all imported code from node modules like react and react-dom for our bundler. We're using parcel. It's a great one with a minimal configuration and a very fast engine but there are other popular options you might have heard of like webpack and browserify. Bundlers are necessary because a browser doesn't support the import and export system. The way you include javascript code is by including script tags right into the index.html page. Now you can include as many scripts as you like but this can often lead to confusing situations. After all the browser loads a codebase on the order of the scripts. So one script can technically already be using variables and methods defined in another script but then one other script might want to use a method defined in a script below. And now we have to deal with properly ordering the scripts. And this becomes a huge mess as we add more and more scripts with interdependent script functionality. In addition this becomes even more annoying as you have to make sure you avoid variables and method names that have already been defined in previously ordered scripts. Bundling allows you to write the cleaner import syntax in your code so that you can avoid this mess and bundle all the resulting code in one overall script for the browser. What would have been many scripts in the index.html is now collapsed into one giant but straightforward standalone script. So that's the gist of bundlers. Bundling separate .js files into one file to avoid the situation of multiple scripts in the html. The awesomeness of bundlers will become even more transparent as we add more files to the react projects. Next we came across a big topic of transpilers. For our transpiler We use a technology called babel. Babel does the crucial job of taking newer javascript and react syntax and transforming it into a syntax that the browser is actually compatible with. Now it's curious that if a browser has a javascript environment, well why is it that it can't support all syntax of JavaScript? The answer is that JavaScript is its own independent language. The development and improvement of the job script language happens at its own pace and this development is separate from the development of browsers. Browsers are made by their own companies. Therefore the development of the javascript environments must happen in response to the language itself. Naturally the browsers are always playing this game of catch up as there will come a day with a javascript language has a new feature that the browser hasn't been updated to support yet. The browser will always remain a little behind as it has only been programmed to currently support the previous subset of the javascript language features. Now the good news is that a lot of the newer features that are added to js here can be transformed into more verbose versions of JSX that all browsers are already compatible with. This allows us to use a technology like a babel to translate our clean modern JSX code into the older equivalent JSX syntax that the browsers can handle. And this applies to our React code. The example we came across was JSX, a react specific syntax in order for the code to run on the browser. This had to be transported to react.createElement the code under the hood that the browser can understand. OK. The covers bundlers and transpilers. They're the foundation of React web development as react can't successfully serve its web apps without these technologies. Next we're going to move on to exploring the Document Object. We've come across document.getElementById a couple of times already. But I can't emphasize enough how important it is to have a good grasp of the overall concept of the document for web development. The entire purpose of React is to optimize its relationship with this very Document object. So a thorough understanding of React requires a thorough understanding of the document as well. Okay, see you in the next one!