Practical code audits
A practical example of needing to perform a code audit (static analysis) to understand the current state of a codebase
This lesson preview is part of the Practical Abstract Syntax Trees course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Practical Abstract Syntax Trees, plus 80+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:17] In this module, we're going to start looking at a practical application of ASTs when needing to maintain and refactor codebase. Specifically, we're going to set out to create a new button component that will handle all of the button styles and functionality within an app by replacing all of the one-off button elements.
[00:18 - 00:26] It will lead to a lot less boilerplate for the styling and standard button functionality. It will also allow making global button changes in a single component.
[00:27 - 00:42] However, this codebase, an app that we'll be looking at, already have many us ages of one-off button elements. This module will cover performing a code audit to understand the existing us ages of button elements, so we can create a button component that handles all existing functionality.
[00:43 - 01:00] Then, the following modules will cover how to transform those existing button elements into button components, and then how to prevent future usages of one- off button elements. For the remainder of this course, we'll work with the codebase of a small sample app. We can then apply AST-based tooling to refactor it.
[01:01 - 01:12] The sample app is Flash, a basic flashcard app that generates a math equation to answer. Much of the functionalities mocked out, such as the signup and login form, but it's otherwise fully functional.
[01:13 - 01:24] It's a React app built with Create React app, but neither of these are requirements to use AST-based tooling. Since AST-based tooling is based on the syntax, it doesn't matter what framework or patterns are used.
[01:25 - 01:36] Take some time to download the app, run it, and then explore the codebase. We can change into the Flashcard's app directory once we've downloaded it.
[01:37 - 01:45] Then, install the dependencies. And finally, run npm start to run the app.
[01:46 - 01:57] Within this codebase, most of the relevant code is in the source directory. Within this directory, index.js is the entry point that will mount the app in render.
[01:58 - 02:12] All of the React components are in the components subdirectory. Finally, all the styles are in the global.css file.
[02:13 - 02:33] Looking in some of these components, we can see some usages of the button elements. The next lesson will describe the desired refactor in more detail in the current codebase and demonstrate how AST tooling can be used before, during, and after a ref actor.