The Necessity of Bundlers and Transpilers Review

A free video tutorial from David Joseph Katz
Software Engineer
Rating: 4.4 out of 5Instructor rating
18 courses
309,873 students
The Necessity of Bundlers and Transpilers Review

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

Updated for 2022-23: React.js essentials bootcamp - React Core, Router, Redux, Hooks, in-depth JS, + detailed guides!

27:08:21 of on-demand video • Updated July 2023

Updated for 2022-2023: Learn how to code with React, Redux, React Hooks, and more from an engineer with 5+ years of industry experience.
Learn React the right way and learn best practices, from an engineer with 5+ years of industry experience.
Modern Redux in 2022-2023: modern syntax and best practices.
Modern React in 2022-2023: createStore, functional components, etc.
React hooks in 2023-2023 - explore fundamental hooks, and build hooks from scratch.
Explore the React engine, and learn how it works under the hood to better understand the Virtual DOM, state, props, etc.
Learn React in 2022-2023 the right way and learn best practices, from an engineer with 5+ years of industry experience.
Learn how to build applications from scratch, setting up your own react-app-template.
Create industry-relevant projects that you can use on your portfolio and resume.
See how React fits in the big picture of web development, with a ton of detailed overviews on what is happening in the browser and the React engine.
Access 3+ hours of in-depth JavaScript material to hone your JS skills.
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!