WDD 330: Web Frontend Development II

W01 Learning Activity: Workflow

Overview

A modern frontend web development workflow streamlines how websites and applications are built and managed. Even for a medium-sized project, you'll likely juggle numerous JavaScript or TypeScript files, several CSS stylesheets, and a variety of assets such as icons, fonts, and images.

Many projects now rely on component-based architectures using frameworks like React, Angular, or Vue.js. This class will not be using any frameworks. However, the project architecture concept is important. In this class you will be introduced to Vite (pronounced like "veet"), a JavaScript module bundler, that bundles files for optimal performance and handles web development project tasks.

Prepare

The following is a simplified but practical list of tasks that should happen every time something changes in a web application development project. This reflects the typical workflow for maintaining code quality, functionality, and deployment consistency.

• Update documentation like README or other applicable feature-specific documents
• Run unit component and functional tests.
• Run integration tests to ensure all components work together.
• Run end-to-end tests to simulate user interactions and ensure the application behaves as expected.
• Run code formatter, linter, and check for other code quality issues.
• Audit for outdated or vulnerable packages.
• Check accessibility and responsiveness.
• Concatenate CSS into one file for faster loading.
• Minify CSS to reduce file size.
• Transpile JavaScript with Babel for wider support for older browsers.
• Concatenate all JS files into one file for faster loading.
• Minify and Uglify JavaScript to reduce size.
• Do the same for any 3rd party CSS or JS.
• Move all the production assets into a distribution directory to separate them from the development stuff.
• Deploy the application to a staging environment for final testing.

Development operations and deployment task tools fall into three categories:

1. Package managers: These keep track of all of the external dependencies for the app. This includes development tools and libraries that are used. It not only knows which packages to download, but it tracks versions as well. You are using npm for the package manager.
2. Bundlers: : Bundlers handle the compiling, transpiling, concatenating, minifying, and moving around of assets in the project. You are using Vite as the 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. The project is fairly simple so using npm again for task manager is sufficient. 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.