Lab 19 - 'I Want It Now': Frontend Build Tools

One of the challenges of building software for the web is the heterogeneity of the platforms that it runs on. Different browsers, different devices, different network conditions, and different user needs all complicate the web as a target. Developer Experience (DX) is a growing concern for dev teams, and there continue to be amazing leaps in tooling to improve it. Today we work with a few gateway tools, just try not to get too carried away with them.

Vite

Vite is a relatively new build tool to the scene that is designed to be fast. It has sooo many features, but we will only be using a few of them today.

Learning Objectives

Have your cake and eat it too with:

1. future CSS features in today’s browsers with PostCSS
2. future JS features in today’s browsers with Babel

Because frontend code runs in peoples’ browsers, and because people may not update their browsers regularly, it can be a challenge to decide how old a new feature must be before it is safe to use for a target audience. Tools like PostCSS and Babel permit us to write our code (CSS and JS, respectively) using the latest features, and then transpile it to a version that is more widely supported. This means that the tolls know about future features for web technologies (CSS and JS) and then given the developer’s intended “target audience”, the tool will know whether the feature is currently available to that target, and if not, will change the source code from what the developer wrote using the future feature, to a bit more code, but using only features that are currently available to the target. This makes the code easier to read and write, and also makes it more maintainable in the long run, while not sacrificing compatibility with older browsers.

PostCSS: using tomorrow’s CSS today

To follow changes to the CSS specification, consult the W3C’s CSS Working Group’s CSS Current Work page. On that page you’ll find a list of specifications and their statuses, as well as links to the latest drafts of the specifications. See for example the Selectors Level 4 specification which is currently listed as being in the Working Draft stage, which defines among other things the :has() pseudo-class.

With PostCSS included, vite will not only bundle your CSS files into a single minified file, but it will also transpile your CSS to be compatible with the browsers you specify. We will try out a few features future features in CSS, such as:

1. custom media queries
2. custom property
3. custom selectors
4. :has relational pseudo-class
5. nesting
6. rebeccapurple

Babel: using tomorrow’s JS today

Babel does the same thing for JavaScript that PostCSS does for CSS. It will take your modern JavaScript code and transpile it to be compatible with the browsers you specify. We will try out a few features future features in JS, such as:

• _ separator for large numbers
• logical assignment operators

Steps

Setup

1. get the code by accepting the github classroom assignment link from your instructor or use this starter code if you’re not one of our students.
2. open a terminal to the same directory as the package.json file
   • one easy way to do this is to have opened the directory in vscode and press ctrl+` (or cmd+` on macOS) to open a terminal in that directory
3. run npm install to install the dependencies of the project (which are listed in the package.json file)
4. you should notice that a new directory called node_modules has been created in the project
   • the top-level directories within node_modules should include at least those dependencies defined in the package.json file, but will typically include very many more.
   • when you run npm install (or npm i for short), npm will look at the package.json file and install the dependencies listed there, but then it will continue recursively installing your project’s direct dependencies’ dependencies, as well as the dependencies of those dependencies, and so on, until all dependencies are installed.
5. run npm run dev to start the vite development server
6. if the browser doesn’t open automatically, you can press o in the terminal to open the browser to the correct address

Future CSS

1. Notice how the Hello Vite! header element is purple? It’s currently JMU Purple. In order to style it this was from the css file, we must have the following three items. Inspect the element in your browser’s devtools and confirm that you can locate them:
   1. there is some selector that matches the element (what selector do you see in the devtools inspector?)
   2. on that element the correct property should be identified (what property do you see in the devtools inspector?)
   3. the value of the property is set to JMU purple (`#450084) (what value do you see in the devtools inspector?)
2. in your editor (vscode) look for the css file (it’s in the root, and it’s called style.css)
3. find the 3 things from above, but no in the css source code instead.
   • what similarities and differences do you observe?
4. in the css file, change things that are currently JMU purple (#450084) to instead be rebeccapurple`
5. once you save your file, you should see that the browser automatically reloads
6. check in the browser devtools what color the heading is now set to

Future JS

Let’s add some code at the end of the main.js file.

1. use the let keyword to declare a isBig variable and assign it the value of false
2. use let again to declare a variable called num and assign it the value of 100
3. log the variables to the console
4. reassign num to a larger number, define the number using the _ separator for dividing the number into groups of 3 digits, like 8_675_309
5. log the variables to the console again
6. let’s try out the logical assign operator ||=, reassign isBig to be true if num is greater than 999
   • isBig ||= num > 999
7. log the variables to the console again
8. kill the vite dev server by pressing (the same for all OSes) ctrl+c in the terminal where it’s running.
   • FYI, this is a standard way to stop a running process in a terminal that you might want to remember for your other console work in web dev, and other contexts as well.
9. push your code to your github classroom repository.

Tools

1. In addition to having a dev server with the “live reloading” feature you’re used to from the vscode live server experience, vite also has a build command that will create a dist directory with the files that have been prepared for production, usually including the transpiling we’re exploring today as well as minifying. Run the build command with npm run build in the terminal.
2. find the newly created dist directory in the project and look through the files in it. You should see that:
   1. in the css file, the value rebeccapurple has been replaced with a hex value
   2. in the js file, the _ separator has been removed from the large number
   3. in the js file, the ||= operator has been replaced with a more verbose version of the same logic.
3. take a look at vite.config.js:
   1. see that the target audience for this app is set to be Firefox 69. see the commented out targets to see some of the other ways that we could specify the targets
   2. if there’s time, try changing the target and then running npm run build and seeing how the js and/or css changes.
4. when I check the disk usage of this project at the time of this writing, the node_modules directory is about 63MB, while the actual source code for this project is only 332KB, and the built version is 24KB

Carried Away

Tools

I want it all

Big number