Step 1

JavaScript is changing faster than its runtime environments can keep pace. For example, we will use import and export keywords (part of ES6 modules) in this chapter. These keywords were not supported in Chrome (or other browsers) until recently.

As a workaround, the community developed programs to write JavaScript using the latest features and transform it to an earlier version that would run seamlessly on the browser. These programs are typically called "transpiler" and are part of a "build tool." In addition to a transpiler, a build tool typically includes a bundler to combine several JavaScript files into a single (minified) .js file, among other utilities.

There are many build tools available, and it is common practice to use one for web development. In this chapter, we will use a build tool called Vite (a French word for "fast," pronounced /vit/).

You must have Node and Yarn installed on your computer. Please refer to Logistics for more details.

Open the terminal and change the directory to where you would like to store the files for this chapter. Next, run the following command: 

yarn create vite brick-breaker --template vanilla

This command will create the folder brick-breaker with the following files:

.
└── brick-breaker
    ├── counter.js
    ├── index.html
    ├── javascript.svg
    ├── main.js
    ├── package.json
    ├── public
    │   └── vite.svg
    └── style.css

We will explore these files. However, let's first demystify the command: 

yarn create vite brick-breaker --template vanilla
  • yarn is a package manager for Node.
  • create vite loads a command-line tool that scaffolds a Vite application.
  • brick-breaker is the name of our application.
  • --template allows quickly starting a project from a basic template for popular frameworks like React, Vue, and Svelte.
  • vanilla is a term developers use to refer to using plain JavaScript instead of a framework like React.
Resources