DEV Community

loading...

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

Saurabh Daware 🌻
21, JavaScript Fanboi. Building Abell, A new static-site-generator. also sunflower is my favorite emoji🌻 (He/Him)
・4 min read

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// main.js
const isInputURL = isURL($('input.name-input').val());
console.log(isInputURL);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
// main.js
import $ from 'jquery';
import { isURL } from './helpers.js'

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

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
Enter fullscreen mode Exit fullscreen mode

Becomes this-

a = undefined != null ? undefined : 1
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

becomes-

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

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 👇

Discussion (7)

Collapse
jamesgeorge007 profile image
James George

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.

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Yes I checked Rich's talk on how they are moving svelte to snowpack. Super exciting things indeed! Thanks James!

Collapse
error404sp profile image
Shreyasi Patil

Super informative article. Thanks for sharing😊

Collapse
saurabhdaware profile image
Saurabh Daware 🌻 Author

Thank you so much! Glad you liked :D

Collapse
aviboy2006 profile image
Avinash Dalvi

Nice Article Saurabh. You have wrote journey and how it's evolved. Its very basic things but more important thing why we should use something.

Collapse
santoshyadav198613 profile image
Santosh Yadav

Good one Saurabh 👏

Collapse
harshgkapadia profile image
Harsh Kapadia • Edited

Nice article, Saurabh!
A really good video on JS modules and build tools: youtube.com/watch?v=U4ja6HeBm6s&li...

Forem Open with the Forem app