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
  • Context and Problem Statement
  • Decision Drivers
  • Options Considered
  • Decision Outcome
  • Positive Consequences
  • Negative Consequences
  • Pros and Cons of the Options
  • JavaScript
  • TypeScript
  • Python
  • Java
  • Go

Was this helpful?

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

Front-end Language

PreviousBack-end Code Quality ToolsNextCommunications Tooling: Wiki Platform

Last updated 28 days ago

Was this helpful?

  • Status: Active

  • Last Modified: 2023-07-10

  • Related Issue:

  • Deciders: Lucas, Aaron, Billy, Sammy

Context and Problem Statement

The goal of this ADR is to select a language that we'll use to implement the front end for simpler.grants.gov. The front end will only support static content at first, but will grow to include the new search, supported by the API and eventually the entire grants.gov functionality. Therefore, while a simple solution might work in the short term, it will quickly become insufficient to meet our needs.

Decision Drivers

  • Active Maintenance: The language is actively maintained with patches and minor releases delivered on a regular basis

  • Community of Users: The language has an active community of open source users and is commonly used for front-end development

  • Usability: The language is relatively easy to learn for developers without prior experience and there are plenty of resources and training materials available

  • Language Features: The language supports important features like concurrency, static type checking, immutable data types, etc. or there are well established libraries which provide these features

  • Reusability: The language selected for the front end can be also used to support other parts of the project (e.g. ETL & data analysis, API development)

  • HHS and Nava familiarity with the language

Options Considered

  • JavaScript

  • TypeScript

  • Python

  • Java

  • Go

Decision Outcome

Chosen option: TypeScript, because it is the ideal language for front-end applications because some form of JavaScript is required for client side functionality anyway. This allows us to reduce the amount of context switching between langauges. Additionally, with node and npm TypeScript and JavaScript are fully featured platforms for building and running applications. We chose TypeScript over JavaScript because of the value that strong typing provides with promomting code quality and developer support.

Positive Consequences

  • Getting to stay in Javascript for the entire front end means less energy spent context switching

  • Strong typing helps with code quality and guidance to developers, but is only helpful if it is used properly

Negative Consequences

  • Code should be written in such a way that if TypeScript loses longer supported, we can easily pare it down to regular JavaScript

Pros and Cons of the Options

JavaScript

JavaScript is a lightweight, interpreted programming language with first-class functions. While it's universally used for client side website functionality, with tools like npm and node, it is a powerful application language as well.

  • Pros

    • Keeping the entire front end in one language requires less context switching

    • Large communinity of users, with lots of updates, and rich functionality

    • HHS and Nava are very familiar with the language and its frameworks

  • Cons

    • Loosely typed

TypeScript

TypeScript is a syntactic superset of JavaScript which adds static typing and is transpiled down to regular JavaScript when building the application. While TypeScript is a relatively new "language" it's gaining popularity quickly as it's more of a enhancement to JavaScript than just another new language.

  • Pros

    • Same as JavaScript

    • Strong typing

  • Cons

    • More complex than JavaScript

Python

Python is a high-level, dynamically typed general-purpose programming language. Its design philosophy emphasizes code readability but supports multiple programming paradigms.

  • Pros

    • Same language as back end reducing context switching

  • Cons

    • Will still require JavaScript for client side functionality

    • Python is not as well supported for front-end tasks as it is for back-end tasks

Java

Java is widely used for building enterprise-scale web applications as it is one of the most stable languages on the market. Java’s advantages include platform independence, multi-threaded processing, automatic garbage collection, and security.

  • Pros

    • Existing HHS website and tools are built with Java

    • Will still require JavaScript for client side functionality

  • Cons

    • Commercial use requires expensive licenses and not as open source friendly

    • Compilation and abstraction by the Java Virtual Machine makes performance slower

    • Nava team is not as familiar with Java as they are with the other options

Go

Go is an open source programming language supported by Google.

  • Pros

    • Rapidly gaining popularity

  • Cons

    • Will still require JavaScript for client side functionality

    • Not a lot of front-end support

#96