Chapter 4. Step-by-Step Migration Guide with Atomic Design
This chapter provides step-by-step instructions for doing an asynchronous rewrite with atomic design. It’s a reference to use while undertaking a migration, so some parts might be relevant right now and others can be bookmarked for later. In this chapter, we’ll take you through the example of migrating a frontend application, although these techniques could also be applied to mobile or backend applications.
“See This Step on GitHub” Sections
If you end up getting stuck or just want to follow along without writing code you can clone the Git repositories and check out the examples at various points. Just look for the “See This Step on GitHub” sidebar after a set of instructions. All of the checkpoints for the examples are tagged in releases:
https://github.com/hharnisc/my-monorepo-boilerplate/releases
https://github.com/hharnisc/my-component-library-boilerplate/releases
Getting Set Up
Here’s a quick reference of some of the technology and tooling that we’ll be using to undertake this migration.
- Git
- The version control system we’ve used. Other version control systems could be used as well.
- React
- A JavaScript framework for building user interfaces.
- Yarn
- A dependency manager for JavaScript.
- Yarn Workspaces
- A simpler way to manage multiple JavaScript packages within one repository.
- Webpack
- An open source JavaScript module bundler.
- Storybook
- An interactive development and testing environment for UI components.
- Jest
- A unit ...