Chapter 3 Design UI Management UI management provides the capability to organize and handle your UI scripts. It will help you to manage UI components and dependencies, and you can chose appropriate package manager, module bundler, task runner, and testing frameworks from Figure 3-8. • Package manager: A JS package manager will help you to manage a package dependency that is installing, configuring, and removing dependency modules from a UI project. • Module bundler: Using a bundler is the process of combining a group of modules (dependency) into a single unit in a specific order. You can use Webpack, Rollup, or Browserify as a module. • Task runner: A task runner will help you to maintain their UI code by running different tasks like watching the files, minifying the files, lining JavaScript files, etc. You can use one of the task runners such as Grunt or Gulp, as shown in Figure 3-8. • Testing: A JS testing framework will allow you to perform cross- browser testing; some frameworks provide both test environment and testing structure to your UI application. You can use the frameworks to generate, display, and monitor test results. The testing framework can be used in both environments: test-driven development (TDD), a process for when you write and run your tests, and behavior-driven development (BDD,) which lets you define application behavior in plain English text. Steps to decide the UI design are as follows: 1. Select compatible CSS and scripting framework and technology stack (see Figure 3-7), appropriate package manager such as Yarn, NPM, or Bower, etc. (see Figure 3-8. 2. Select appropriate module bundler. 3. Select task runner, if needed. 4. Select testing framework such as Mocha, Jest, Jasmine, Cucumber, or Karma (see Figure 3-8) according to your chosen scripting technology stack such as Angular technology stack (ATS) or React technology stack (RTS). 75