Announcing Checkup 1.0

The Checkup team is excited to announce the release of version 1.0.0 of the Checkup framework. Checkup is the easiest way to gather static analysis insights for your front-end projects, incorporating and aggregating industry-standard tooling to provide a comprehensive view that spans a whole codebase. 

Checkup is able to provide a high-level overview of your static analysis results - from existing tools such as eslint, ember-template-lint, and others - so you can get better insights. These valuable insights allow you to better maintain your projects by helping form more complete pictures of groupings or themes of work. 

In short, Checkup allows you to group results from multiple static analysis tools into a single, cohesive report.

Motivation

Checkup was started out of a need to gather deeper insights into large-scale web projects. Tracking changes to a project over time was previously laborious, requiring custom scripts to be written in an ad hoc fashion, and having to figure out how to format the gathered data both for immediate output and persistence.

Tracking changes in a project as it evolves can provide valuable insight into maintenance challenges before they become a more serious concern. Monitoring things like dependency health, app growth, code pattern usage, etc. can allow you to focus resources on areas in need of attention. 

In addition, being able to quantify, track, and monitor code migrations is a requirement for any healthy codebase. Imagine being able to track a large-scale React codebase as it migrates from class-based components to functional components with hooks. Checkup can summarize this data, and allow you to track and visualize it over time.

What’s Included

Checkup includes a number of tools and features to make performing analyses easy.

• A Task-runner CLI - Allows you to run tasks configured within plugins via configuration.
• Plugins - Enables you to organize groups of tasks.
• Tasks - Provides a simple Task API for encapsulation of analysis logic.
• Generators - Supplies code generators to help scaffold code to write plugins and tasks quickly.
• Standardized Output Format - Surfaces results in a standardized output format: SARIF (Static Analysis Results Interchange Format). Format results in a number of ways using custom formatters, such as the pretty formatter.
• Multiple Language Support - Support for authoring plugins and tasks in either JavaScript or TypeScript

How does this help me?

As always, an example can go a long way in helping you understand how a tool can help you in your day to day work.

Since grouping the results from static analysis together into a cohesive picture is one of Checkup’s most beneficial features, we’re going to look at a simple example: Tracking a migration from Ember Classic to Ember Octane.

As many of you know already, Ember is one of the many UI frameworks that employ the Single Page Application (SPA) architecture to build dynamic, stateful web applications. Ember has been around for a long time, and has enjoyed significant usage and a dedicated following. 

A recent edition of Ember, Octane, strove to modernize the structure, patterns and practices within the framework to take advantage of advances in the JavaScript language. The changes included in this release were significant, and touched on all layers of the framework, from updated core classes to use native variants, to the use of yet-to-be-released decorators, to a new reactive model for programming complex data flows. Changes touched both JavaScript, and Ember’s declarative template layer, Glimmer.

In order to identify and track changes to assist in a more focused migration, Checkup created a task to encapsulate the changes both within the JavaScript and template layer. These changes spanned a number of separate distinct static analysis rulesets provided by two tools: eslint and ember-template-lint. The combination of the rulesets between these two tools comprised the grouping that became the Ember Octane Migration Status task. Through this task, it was possible to identify features that needed to be migrated, and to be able to track those changes over time.

Running the task with the pretty formatter produces a summarized set of output.

Running the task using the default output, which is to produce a SARIF log file, allows you to subsequently view that SARIF log using VSCode’s SARIF log viewer extension.

Once the log is opened, the viewer allows you to navigate through the SARIF log and the subsequent results. Results for the Ember Octane migration are annotated with a message corresponding to the feature they represent, one result for each feature instance. Clicking on the file linked in “Locations” within the viewer will open the file to the specified location within that file. Hovering your mouse over the yellow squiggly underline will show a VSCode diagnostic message indicating the feature instance identified. A link to the migration documentation for that feature is also included in the message.

Scheduling runs and persisting this data over time can help track the migration as it progresses, feature by feature, until completion.

Try it out!

To try Checkup out in your project, follow the Quickstart. We look forward to hearing your feedback on how to improve in the future!

Finally, a huge thanks to all contributors who made this release possible. A special thanks to Cara Kessler and Rob Jackson who devoted countless hours collaborating on design and direction of the project.