Saurabh Daware 🌻

Posted on Nov 15, 2020

The Evolution of FrontEnd Development🌻: What is WebPack, Babel, and Build-steps in Frameworks.

#javascript #html #webdev

There have been several advances in the web in recent years and in this post, I will talk about the tools that I feel have made a significant impact on how we build websites today.

Do note that this post is not intended to teach or help you set up these tools. This is an introduction and a top-level view of what they do and why they do. For detailed information, you can check out their respective documentations.

Lets talk about the basic web!

This is how we build small websites right? this is something that our browsers understand without any need for external tools.

<html>
<body>
  <p>Hello!</p>

  <script src="./index.js"></script>
</body>
</html>

This was working great for a long time! so what went wrong?

The websites became larger and more dynamic so the responsibility of JavaScript increased.

Problem with Maintainability

Now imagine a code like this:

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

  <script src="./jquery.js"></script>
  <script src="./helpers.js"></script>
  <script src="./main.js"></script>
</body>
</html>

// main.js
const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

Wai-wai-waittt where did isURL function come from? What is even $?

Imagine having multiple scripts like these and you find out one function is wrong. How do you find and debug that function?

This can eventually lead to a huge mess so we needed a more scalable solution.

Let's look into this code instead:

<!-- index.html -->
<html>
<body>
  <input class="name-input" type="text" />
  <!-- ... -->

  <script src="./main.js"></script>
</body>
</html>

// main.js
import $ from 'jquery';
import { isURL } from './helpers.js'

const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);

This code becomes a lot more readable and maintainable.

However, the browser did not understand this code so we needed a way where we can write this code, and eventually output the code that browsers understand.

This is what Webpack does!

Now we do have native modules in JavaScript. However, webpack provides additional things like bundling the scripts into a single file, importing CSS and other types of files from modules, and a lot of other things.

Check out Getting Started Guide of Webpack

Awesome! so webpack provided us with a way to write modulated code that is easier to maintain.

Next problem we had was browser compatibility.

Problem with Browser Compatibility

Different browsers use different engines for JavaScript. They all have different behaviours and old browser engines do not have the ability to understand the newly released syntax.

In 2015, a new version of JavaScript (ES6) was released which came with a number of features that were absolutely needed in language. However, these features did not work in old browsers.

From Babel's documentation-

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards-compatible version of JavaScript in current and older browsers or environments.

So this code from ES2020 version-

a = undefined ?? 1

Becomes this-

a = undefined != null ? undefined : 1

JavaScript Frameworks/Libraries

As mentioned earlier, today's web is more dynamic and thus the JavaScript has more responsibilities.

We can use jQuery by just including it with script, right?

<body>
  <h1>Hello</h1>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</body>

Then why we don't do it with React, Vue, and other frameworks?

Fun Fact! We actually can use them with CDN.
For example, we can use React with CDN using-

<html>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <script type="text/babel">
  function App() {
    return(
      <div>Hello</div>
    );
  }

  ReactDOM.render(<App/>, document.querySelector('#root'));
  </script>
</body>
</html>

Okayyyy but then why we don't use it like this?

Frameworks today recommend an additional build step that lets them do the optimizations and provides better control.

Most of the JavaScript frameworks, in one way or the other, use webpack, Babel or their equivalents in development and build process.

Apart from just bundling, Frameworks provide additional functionality by making use of webpack and babel plugins.

Vue for example, uses a webpack plugin called vue-loader for Single File Components.

Babel, Apart from just converting code to backwards-compatible version, can also transpile different syntaxes. For React, babel converts JSX to React.createElement calls.

So, this-

function App() {
  return (
    <div>Hello</div>
  )
}

becomes-

function App() {
  return React.createElement('div', null, 'Hello');
}

In the earlier example of React on CDN, this step was happening on frontend whereas here, this happens on npm run build.

Check out List of Babel Plugins.

Thank you for reading the article 🌻

Also, In the article, I only mentioned webpack since it is popular but there are also other alternatives like Parcel, Rollup, and many more tools which perform similar operations.

Finally, Our needs are changing and so does the tools and the language and it's super exciting to be in this time and experience these tools and libraries making our lives easier.

Big thanks to all the people maintaining and contributing to these amazing projects <3

Do you know any other tool that you think has changed the web? drop them in the comments 👇

Top comments (7)

James George • Nov 16 '20

Nice article, Saurabh. The Front End Landscape has evolved quite a lot. It is worth mentioning the Bundle free toolings that we have now, like snowpack and vite from the Vue.js ecosystem.