WDD 330: Web Frontend Development II

Managing the Modern Frontend Workflow

Overview

Development workflow has become quite complicated for Web development. A medium-sized project could have dozens of JavaScript files, several CSS files, third party/external libraries, and who knows how many other assets like icons, fonts, images, etc. It might be using a CSS preprocessor like SASS or it could be transpiling the JavaScript to make sure that new features will work in older browsers.

Prepare

Here is a potential list of tasks that could need to happen every time something changes in the project. This is a simplified list, but it should give you an idea of the complexity of the process.

  1. Lint (review) CSS and JavaScript to find any coding issues.
  2. Run unit tests to make sure nothing got broken with your last changes.
  3. Compile all preprocessed CSS to CSS.
  4. Concatenate all CSS into one file for faster loading.
  5. Minify the CSS to reduce file size.
  6. Transpile JavaScript with Babel for wider support for older browsers.
  7. Concatenate all JS files into one file for faster loading.
  8. Minify and Uglify JavaScript to reduce size.
  9. Do the same for any 3rd party CSS or JS.
  10. Move all the production assets into a distribution directory to separate them from the development stuff.

Development operations and deployment task tools fall into three categories:

  1. Package managers: These keep track of all of the external dependencies for our app. This includes development tools and libraries we might be using. It not only knows which packages to download, but it tracks versions as well. We are using npm for our package manager.
  2. Bundlers: : Bundlers handle the compiling, transpiling, concatenating, minifying, and moving around of assets in our project. We are using Vite as our bundler. Other common bundlers are Snowpack, Parcel, and Webpack.
  3. Task managers/runners: These keep track of what needs to be done and when. There will generally be scripts defined in the task manager for each phase of development. Our project is fairly simple so we are just using npm again for task manager. Other common managers are Grunt or Gulp.

    While npm itself is primarily a package manager, its ability to define and run scripts, combined with the availability of task-specific packages, makes it a valuable tool for task management in software development. It provides a simple and efficient way to automate repetitive tasks and streamline your workflow.

Activity Instructions

The course will be using a NPM/Node-based workflow. It is important to understand how these tools work together and you will have an opportunity to learn while doing.