DEV Community: Rafael Calhau

Let's Talk About Babel: Have you ever stopped to understand it?

Rafael Calhau — Tue, 09 Apr 2024 01:46:20 +0000

Sometimes, my friends and coworkers ask me about Babel. I noticed that lots of developers who are just getting into JavaScript and checking out different frameworks have the same questions about what Babel is and how to use it in their projects.

Ok, let's walk together and understand more about this tool that help us so much to delivery our work to the world.

Babel is a JavaScript compiler that allows you to use the latest JavaScript syntax and features, known as ECMAScript (ES), while ensuring compatibility with older browsers and environments. Here in this post, we'll explore the basics of setting up Babel for a React project, including configuring Babel presets and integrating it with webpack, an another tool very popular and powerful.

Prerequisites

Before we begin, ensure you have the following installed Node.js and npm (Node Package Manager) on your machine.

Setting Up Your Project

Start by creating a new directory for your project and initializing a new npm project.

mkdir react-project
cd react-project
npm init -y

Next, install the necessary dependencies:

npm install react react-dom

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin

So, why are we installing so many packages? If you felt confused, let's understand what we are installing and to focus more about the Babel, right?

react and react-dom
These are crucial for React development. react is where you get all the React goodness for building components and managing state. react-dom is specifically for rendering React components in the browser.
@babel/core
This is like the engine behind Babel. It's responsible for taking your modern JavaScript code and transforming it into something that older browsers can understand. When you're using the latest JavaScript features or JSX syntax in your React components, @babel/core does the heavy lifting to make it all work across different browsers.
@babel/preset-env
Consider it as your solution for ensuring JavaScript compatibility. It analyzes your code and automatically determines the transformations necessary to ensure it functions properly in the environments you specify. This means you can confidently write modern JavaScript without concerns about whether it'll function correctly in older browsers or Node.js versions.
@babel/preset-react
This preset is specifically tailored for React. It takes care of converting JSX syntax into regular JavaScript function calls. Without this, your browsers would be scratching their heads at the JSX syntax you're using in your React components.
babel-loader
Think of this as the bridge between Babel and webpack. babel-loader helps webpack understand how to use Babel to transpile your JavaScript files. It's like the translator that makes sure webpack knows how to handle JSX and all the modern JavaScript features you're using in your React project.
webpack and webpack-cli
It's like your project's organizer. It bundles all your JavaScript, CSS, and other assets into neat packages that the browser can easily understand. webpack-cli is like webpack's personal assistant, helping you run webpack commands from your terminal with ease.
webpack-dev-server
It makes your life easier during development by providing live reloading and hot module replacement (HMR). It saves you from manually refreshing the browser every time you make a change in your code, which is super handy when you're knee-deep in React development.
html-webpack-plugin
Plugin to generate an HTML file for the bundled JavaScript to be injected into. This is useful for development and production modes to create a complete HTML file automatically.

Note: Both Babel CLI and webpack CLI depend on their respective core packages (@babel/core and webpack) to perform their tasks. Babel CLI handles JavaScript transformation, while webpack CLI manages bundling and optimizing web assets.

Great! Now that we understand the purpose of each package, let's proceed with building our small project using React and Babel.

Configuring Babel

Create a .babelrc file in the root of your project directory to configure Babel presets.

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

This configuration tells Babel to use @babel/preset-env for handling modern JavaScript syntax, as we learned above and @babel/preset-react for JSX transformation.

Configuring webpack

Create a webpack.config.js file in the root of your project directory to configure webpack.

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development';

  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDevelopment ? 'bundle.js' : 'bundle.[contenthash].js',
      clean: true, // webpack 5 feature to clean the output directory before each build
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
          },
        },
      ],
    },
    devServer: {
      static: path.resolve(__dirname, 'dist'), // Serve from the 'dist' directory
      port: 3000,
      hot: true, // Enable Hot Module Replacement (HMR)
    },
    resolve: {
      extensions: ['.js', '.jsx'], // webpack 5 automatically resolves these file extensions
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './public/index.html', // Path to your HTML template
        inject: 'body',
      }),
    ],
  };
};

Cool, this webpack configuration sets up a basic setup to bundle your React code using babel-loader and serves the bundled files through webpack-dev-server.

Creating a React Component

First, create a src directory in the root of your project and add a new file index.js.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return <h1>Hello, React!</h1>;
};

ReactDOM.render(<App />, document.getElementById('root'));

Creating the HTML Template

Create an index.html file in the root of your project's public directory.

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

Running Your React App

Add scripts to your package.json file to build and run your React app.

// package.json
{
  "scripts": {
    "start": "webpack serve",
    "dev": "webpack serve --mode development",
    "build": "webpack --mode production"
  }
}

Now, you can start your development server by running:

npm run dev

Beautiful. Navigate to http://localhost:3000 in your browser to see your React app running!

By now, you should have a clearer understanding of how Babel operates, its purpose, and how it integrates with webpack. Essentially, webpack communicates with Babel through the webpack plugin called "babel-loader". Think of this plugin as a bridge between the two, allowing webpack to seamlessly interact with Babel, ensuring your JavaScript code is transformed effectively during the bundling process.

A little more to consume

Here are a few topics and concepts that will help you become more confident in understanding Babel better:

Transpilation: Babel is like a language translator for JavaScript. It helps convert modern JavaScript code into older versions that can run on older browsers or systems.

ECMAScript Versions: Babel lets you use the latest JavaScript features, even if they're not supported everywhere. It's like having a sneak peek into the future of JavaScript.

Babel Core: Think of Babel Core as the engine under the hood. It's what does all the heavy lifting, like parsing and transforming your code.

Plugins and Presets: These are like tools in a toolbox. Plugins are individual tools for specific tasks, while presets are pre-packaged sets of tools tailored for different needs.

Configuration: Just like setting preferences in an app, configuring Babel lets you customize how it works for your project.

Integration with Build Tools: Babel plays well with other tools like Webpack or Gulp, making it easy to fit into your existing workflow.

Target Environments: With Babel, you can make sure your code works everywhere you need it to, whether it's in a web browser or on a server.

Polyfills: Babel can automatically add missing pieces of code (polyfills) to make sure your code runs smoothly on older systems.

Debugging and Optimization: Understanding how to tweak your Babel setup can help improve performance and make debugging easier.

Community and Ecosystem: There's a whole community of developers using and contributing to Babel. It's like having a big group of friends who can help you out when you need it.

Getting familiar with these topics will give you a solid foundation for mastering Babel and making the most of its capabilities in your projects.

Simplifying Code Management with Monorepo

Rafael Calhau — Tue, 17 Jan 2023 00:54:51 +0000

First of all, what is monorepo? What is it used for? And how to use it? I gonna try to answer all these questions in this post.

What is a monorepo?

Basically, monorepo is a version control strategy where you can store code from projects with a strong relationship between them in a single repository. For example, if you have a full-stack application, and you probably have your frontend, backend, and maybe also a mobile project that is part of your solution. A monorepo would hold all these projects inside a single repository. But what are the benefits of using a monorepo after all?

Image: https://monorepo.tools/#what-is-a-monorepo

There needs to be more clarity about what, in fact, is a monorepo. As said before, monorepo holds distinct parts of your solution, and they share a well-defined relationship, even components that can be shared between these projects. Let’s pinpoint a few benefits of having a monorepo.

The benefits

A single version of each component

With monorepo, developers can maintain a single version of each shared component, easily keeping track of component versions and distributing them between the projects. Monorepo allows for better version management of the codebase, making it easier to track and manage changes, and to ensure that different parts of the codebase are compatible with one another.

Code sharing and collaboration

When we have all of the code in one place, it's easier for developers like you and me to share and collaborate on code, and it's also easier to ensure that different parts of the codebase are compatible with one another. And you might be wondering, why it is easier to ensure that? It’s because all of the code is in one place and developers can more easily see how different parts of the codebase depend on each other.

Cross-dependency management

Monorepo allows for better management of dependencies between different parts of the codebase, making it easier to manage and maintain the codebase. In other words, it's about making sure that different modules, libraries, or components in a codebase work together seamlessly. The cross-dependency management can be a hard task on large codebases, and the monorepo strategy can help to simplify this by keeping all of the code for a project or organization in a single repository.

Development, testing, and deployment simplified

In fact, developers can speed up the development process if they have a clear understanding of where each part of the project is, and how to use and maintain them, and this even makes it possible for other teams to help build and maintain new features for specific parts of the project. Additionally, using a monorepo can make it easier to automate tasks like testing and deployment, as all necessary code is located in one place.

So, what it is used for, after all?

Monorepo is used and is great for many different types of development:

Web and mobile development
Backend and frontend development
Infrastructure as a Code
Machine Learning and Data Science
Embedded systems

Also, it might be great for a few use-cases, like:

Large, complex codebases that are difficult to manage with multiple repositories
Organizations that have multiple teams working on different projects, but with shared dependencies
Automating the build, test, and deployment processes
Improving collaboration between teams
Keeping track of the entire company's codebase

Here a few tips for who is studying monorepos:

Start by understanding the basic concepts: Before diving into the implementation of a monorepo, it's important to understand the basic concepts, such as the benefits and trade-offs of using a monorepo, as well as the different tools and strategies that can be used to manage a monorepo.
Get hands-on experience: Practice is key to understanding how monorepos work in practice. Try setting up a monorepo for a small personal project, or work on an open-source project that uses a monorepo. This will give you a better understanding of how to manage and work with a monorepo.
Experiment with a small project: Try setting up a small JavaScript project using a monorepo tool, like Lerna or Yarn Workspaces. This will give you hands-on experience working with monorepos and will help you understand how to manage and work with code in a monorepo.
Study best practices: Learn from others who have experience working with monorepos. Read case studies and best practices from companies that have successfully implemented monorepos. This will give you a better understanding of what works and what doesn't when it comes to monorepos.
Join a community: Monorepos are becoming more popular, and there are many communities, forums, and groups dedicated to discussing monorepos and sharing tips and best practices. Joining these communities can be a great way to connect with others who are also studying monorepos, and to get answers to any questions you may have.
Learn the trade-offs: Monorepos are not a silver bullet and have some trade-offs like longer build and test time and difficulties in scaling. Understand the trade-offs and when to use monorepos and when not.
Learn about related technologies: Monorepo is not the only way to manage dependencies in javascript, Learn about other technologies like npm, yarn, webpack, and related concepts like dependency management, packaging, and building.

By following these tips, you'll be well on your way to understanding and working with monorepos in your development projects.

Take your first hands-On

A good example of a Lerna monorepo project is the "lerna-demo" repository on GitHub. This project demonstrates how to use Lerna to manage a monorepo with multiple npm packages. The repository includes a couple of example packages, and shows how to use Lerna to manage dependencies, versioning, and publishing packages to npm.

You can find the "getting-started-example" repository here: https://github.com/lerna/getting-started-example
This can be a good starting point to understand the basic functionality of Lerna and how to use it in your own project.

Important to understand when not to use

Overall, a monorepo can help to improve the organization and efficiency of a development team by making it easier to manage and share code, and also make it easier to keep track of the entire codebase. So will be scenarios that monorepo can effectively help your team / organization, and scenarios that it will not be necessary like:

Small projects with just one or a few developers and no cross-dependency between different parts of the project. A single repository for a simple project may be overkill.
Projects with different ownership or security requirements. So, the codebase is not available for all teams or developers.
Projects with different languages, or different build systems.
Monorepos can be hard to scale when the projects are owned by different teams with different release cycles as well.

It's very important to evaluate the specific needs of your project or organization before deciding whether or not to use a monorepo. If it is not the best option for your specific use case, it's better to consider other alternatives.