Simpler.Grants.gov Public Wiki
Grants.govSimpler.Grants.govGitHubDiscourse
  • 👋Welcome
  • GET INVOLVED
    • Why open source?
    • How to contribute code
    • How to file issues
      • Report a bug
      • Request a feature
      • Report a security vulnerability
    • Community guidelines
      • Code of Conduct
      • Reporting and removing content
      • Incident response protocol
    • Community events
      • Fall 2024 Coding Challenge
        • Event Submissions & Winners
      • Spring 2025 Collaborative Coding Challenge
        • Event Submissions & Winners
    • Communication channels
  • Product
    • Roadmap
    • Deliverables
      • 🏁Static site soft launch
      • 🏁Static site public launch
      • 🏁GET Opportunities
      • 🏁Open source onboarding
      • 🏁Co-Design Group planning
    • Decisions
      • ADR Template
      • ADRs
        • Dedicated Forum for Simpler.Grants.gov Community
        • Recording Architecture Decisions
        • Task Runner for the CI / CD Pipeline
        • API Language
        • Use Figma for design prototyping
        • ADR: Chat
        • DB Choices
        • API Framework and Libraries
        • Back-end Code Quality Tools
        • Front-end Language
        • Communications Tooling: Wiki Platform
        • Use Mural for design diagrams and whiteboarding
        • Ticket Tracking
        • Front-end Framework
        • Front-end Code Quality Tools
        • Front-end Testing & Coverage
        • Backend API Type
        • Front-end Testing & Coverage
        • Deployment Strategy
        • Use U.S. Web Design System for components and utility classes
        • FE server rendering
        • Use NPM over Yarn Architectural Decision Records
        • U.S. Web Design System in React
        • Communications Tooling: Video Conferencing
        • Back-end Production Server
        • Communications Tooling: Analytics Platform
        • Commit and Branch Conventions and Release Workflow
        • Cloud Platform to Host the Project
        • Infrastructure as Code Tool
        • Data Replication Strategy & Tool
        • HHS Communications Site
        • Communications Tooling: Email Marketing
        • Communications Tooling: Listserv
        • Use Ethnio for design research
        • Uptime Monitoring
        • Database Migrations
        • 30k ft deliverable reporting strategy
        • Public measurement dashboard architecture
        • Method and technology for "Contact Us" CTA
        • E2E / Integration Testing Framework
        • Logging and Monitoring Platform
        • Dashboard Data Storage
        • Dashboard Data Tool
        • Search Engine
        • Document Storage
        • Document Sharing
        • Internal Wiki ADR
        • Shared Team Calendar Platform
        • Cross-Program Team Health Survey Tool
        • Adding Slack Users to SimplerGrants Slack Workspace
        • Repo organization
        • Internal knowledge management
        • Migrate Existing API Consumers
      • Infra
        • Use markdown architectural decision records
        • CI/CD interface
        • Use custom implementation of GitHub OIDC
        • Manage ECR in prod account module
        • Separate terraform backend configs into separate config files
        • Database module design
        • Provision database users with serverless function
        • Database migration architecture
        • Consolidate infra config from tfvars files into config module
        • Environment use cases
        • Production networking long term state
    • Analytics
      • Open source community metrics
      • API metrics
  • DESIGN & RESEARCH
    • Brand guidelines
      • Logo
      • Colors
      • Grid and composition
      • Typography
      • Iconography
      • Photos and illustrations
    • Content guidelines
      • Voice and tone
    • User research
      • Grants.gov archetypes
  • REFERENCES
    • Glossary
  • How to edit the wiki
Powered by GitBook
On this page
  • Front-end Code Quality Tools
  • Context and Problem Statement
  • Decision Drivers
  • Options Considered
  • Decision Outcome
  • Other Options

Was this helpful?

Edit on GitHub
  1. Product
  2. Decisions
  3. ADRs

Front-end Code Quality Tools

PreviousFront-end FrameworkNextFront-end Testing & Coverage

Last updated 1 month ago

Was this helpful?

Front-end Code Quality Tools

  • Status: Active

  • Last Modified: 2023-07-17

  • Related Issue:

  • Deciders: Aaron, Daphne, Sammy, Gina, Lucas, Billy

  • Tags: ADR

Context and Problem Statement

Front-end code quality tools should facilitate and efficiently enforce linting, auto-formatting, type-checking and security concerns. They should be easily configurable to suit our specific use-cases, uniformly applying conventions while alleviating the need for individual intervention.

Decision Drivers

  • Ease of use and configurability: Code quality tools should be configurable to meet the specific needs of our project and enforce standards uniformly. Running the tool should be simple, and feedback should be easily implementable and understandable.

  • Speed: Code quality tools should be able to run in an timely manner, ideally in a pre-commit hook.

  • Documentation and resources: Code quality tools should have robust and helpful documentation, specifically around usage and configuration.

  • Lean: Selection of code quality tools should cover all use-cases with little overlap for ease of use and to minimize mental surface area required to understand the system. As in, each tool should have a specific, meaningful purpose.

  • Enforces security: Tooling should assist us in identifying security concerns and vulnerabilities.

  • Well-maintained: We have a preference towards libraries that are widely adopted and have active maintainers.

Options Considered

  1. Use a curated collection of JavaScript libraries from Next.js template repository (described below)

  2. Use a different or modified set of JavaScript libraries

Dependency Management

  • npm is a robust package manager that is pre-bundled with Node, simplifying installation steps

  • Maintained by Github/Microsoft

Code Linting

  • Supported by a huge variety of editors and easy to integrate into CI/CD pipeline

  • Very long-standing project, hugely popular, and well-supported tool

Auto-formatting

  • Top pick in many JavaScript repositories as a well-maintained formatting tool

Type Checking

  • Converts to JavaScript, therefore works everywhere JavaScript is compatible

  • Static-type checking built into language

  • Identifies problems early at compile time

  • Open source and maintained by Microsoft

Dependency Checks

  • Free and open source

  • Can batch, schedule, auto-assign and auto merge updates

  • Multi-language and supports Python as well

Note: Do we need the Safety package for our Python code as well or is this sufficient?

License

Decision Outcome

Option #1 is preferred. The tooling chosen in the template repository suits our needs, with the addition of License Checker.

Other Options

Dependency Management:

Type Checking:

Dependency Checks:

: Package manager for Node.js.

: Statically analyzes your code to quickly find problems.

: Enforces code style and consistency while reducing the need for manual formatting or nitpicking.

: Strongly typed programming language that builds on JavaScript

: Automated dependency updates.

: Very aptly named tool to check licenses for dependencies. Can fail on specified input, a semicolon separated list.

: Functionally similar to npm, however, requiring more steps to integrate into a project.

: Static type checker maintained by Facebook, added to project as a dependency. Uses a special type syntax that is removed from code at compile time.

: Provides a set of persistent, immutible data structures. Preferred to start with TypeScript and see if that suits our needs as it comes with immutible functionality out of the box.

: Can easily switch to from Renovate at any time.

#102
npm
ESLint
Prettier
TypeScript
Renovate
License Checker
Yarn
Flow
Immutible
Dependabot