3.2 Building with JavaScript Flashcards
If you decide to use SCSS because CSS is missing some features, what do you need to be aware of?
As browsers don’t know how to read SCSS, you’d need to transform any SCSS you write into CSS before deploying your app.
What is the “build process?”
There are a number of tasks to complete during the development process that help with the organization, readability, and maintenance of your code; however, these steps don’t always translate smoothly when it comes to executing your code. Thus, the need to process code has emerged, and this step is what’s known as the build process.
What are the main operations of the “build process”?
Transpilation: Some languages, or versions of languages, can’t be directly interpreted by the browser; transpiling fixes this by rewriting them in a way that the browser can understand.
Bundling files: Bundling files refers to regrouping code into a smaller number of files to improve an application’s performance in the browser.
Minification: Minification is the process of removing all unnecessary characters from a file in order to make the file as small as possible and faster to load.
Auto-prefixing CSS: Auto-prefixing is the process of automatically adding the correct prefixes to CSS syntax to make sure it can be understood by different browsers.
What are the benefits of using a build tool?
You can, of course, perform these operations manually by running the appropriate commands in the command line; however, in order to streamline the build process and develop at a faster pace, it’s better to roll them into a single step using a build tool (i.e., a single tool that will perform all of the operations at once with a single command).
What is transpilation? (Step 1 on the build process)
Transpilation involves transforming code written in one programming language into code written in another programming language. Sometimes, whatever’s going to be executing the code (i.e., the runtime environment) can’t read the code as-is, so this extra step is required to change the code into a language the processor can understand
Name one example of transplilation
One example of transpilation you’re likely to be familiar with is JavaScript’s ES6. You might remember from Achievement 2 that ES6, or ES2015, was finalized in June 2015 and made significant improvements to JavaScript—improvements that rendered many libraries obsolete. Prior to ES2015, developers needed a third party library to use promises; now, they’re supported natively. To this day, however, not all browsers fully support ES6 syntax, including a few mobile browsers and Internet Explorer. For this reason, ES6 has to be transpiled into ES5 JavaScript so that all browsers can understand it.
Name some examples of languages besides ES6 that require transpilation
There are a number of other languages besides ES6 that require transpilation: JSX, a React-based syntax that allows HTML and XML to cohabit with JavaScript code, must be transpiled into JavaScript; TypeScript must be transpiled into JavaScript; and SCSS must be transpiled into CSS, to name a few.
JavaScript development is, by necessity, modularized.
What are some of the disadvantages of that?
JavaScript development is, by necessity, modularized. A project will contain numerous files with varying responsibilities and dependencies.
Here’s an example:
// sum.js
export default function sum(a, b) {
return a + b;
}
And in another file:
// index.js import sum from './sum'; sum(1, 2);
There are two problems associated with this approach: 1) browsers don’t know how to deal with modularized code (they only load what they’re specifically instructed to load), and 2) additional queries take time. This is where bundling comes in useful.
What does “bundling files” mean?
Bundling files means grouping them into as few files as possible. This is usually done by way of a build tool. The build tool looks at an “entry file” within the project (“index.js” in the example above), then determines what that file requires to run (what its dependencies are) and concatenates the two (or more) files into a single, new file called the “bundle file,” “build file,” or “output.”
Why is id better to use a build tool to bundle files?
Though bundling can be done manually, using a build tool brings one significant advantage: the build tool will first construct a dependency tree that maps the dependencies of the entire project, and only then will it bundle the files. This generally makes the final file more optimized as it won’t make the mistake of adding the same dependency twice.
What is “minification”? (Step 3 in the build process)
Minification is the process of removing data that’s not needed by the browser from a code file and simplifying the code as much as possible. For example, additional spaces and code comments are removed, and variable names are replaced with single letters.
What is “auto-prefixing”? (Step 4 of the build process)
Non-standard or experimental CSS features often need to be “prefixed” by the browsers displaying them before said browsers can fully support them. In order to write CSS code that’ll be properly interpreted, even on old browsers, you have to write both the regular rule (e.g., display: flex;) and the prefixed version . To make matters more complicated, you also need one prefix per browser vendor.
display: -webkit-box;
display: -ms-flexbox;
display: flex;
As you can probably imagine, auto-prefixing is a tedious and error-prone task when done manually. For this reason, it’s often automated and handled by a build tool as part of the build process.
Why is the build process and using a build tool so important?
The build process usually marks the first step at the beginning of a new project. Setting up your build tool early on means you can develop and implement features incrementally and iteratively by immediately viewing the end result in your browser.
What are the benefits of using Parcel as a build tool?
arcel requires minimal configuration, has fast bundle times, is well-documented and actively maintained, and works automatically with a variety of files. It also offers some very useful features such as building and serving your code, and refreshing the browser every time the code changes.
How does Parcel work?
How it works is easy: you tell Parcel which file in your project is the entry file (usually “index.html”); then, Parcel bundles all the files contained within that file into a single file before serving it back, ready to be viewed in a browser.
What happens behind the scenes is also pretty straightforward: Parcel takes an entry file, lists all of its dependencies (and any dependencies of those dependencies), then builds a dependency tree of all the files that depend on each other. For each of the mapped files, Parcel detects their format and performs the necessary build operations on them (e.g., transpiling and/or minifying). As a final step, Parcel bundles everything into as few files as possible.
