Open Source Tools Comparative Analysis - usds/us-forms-system GitHub Wiki
NOTE: This comparative analysis was done during early discovery in Phase I.
Table of Contents
Overview | Competitors | Criteria for Evaluation | Evaluation Charts | Patterns & Key Takeaways Chart | Noteworthy DX Features |
Overview
The goal of this Comparative Analysis is to evaluate the attributes of several open source tool "competitors" so that we can identify what works well and what doesn't work well, and thus better inform the developer experience of the U.S. Forms System. The analysis will help us optimize the tool itself, the surrounding guides & documentation, the overall GitHub experience, and the future website experience.
The "Competitors"
Criteria for selecting them:
- All must be open source developer tools
- Range should include both government and private sector tools
- Range should include at least one form related tool
- Range should include at least one React-based library
- Range should include a variety of budgets (indicated by parent companies, size of code base, sponsorships, or number of maintainers)
1. U.S. Web Design System (gov)*
"A design system for building fast, accessible, mobile-friendly federal government websites."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
* USWDS is not a competitor from a functional perspective. We are including it in the analysis because it is a good example of an open source library that supports government and had been widely adopted.
2. eRegs (gov)
"eRegulations (eRegs) is a web-based application that makes regulations easier to find, read, and understand. This open source platform was built by the Consumer Financial Protection Bureau and 18F, and is in the public domain."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
3. Alpaca Forms (private)
"Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
4. FormBuilder (private)
"A jQuery plugin for drag and drop form creation, formBuilder has many options and is translatable."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
5. Material UI (private)
"React components that implement Google's Material Design."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
6. Ant Design (private)
"A design system with values of Nature and Determinacy for better user experience of enterprise applications."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
7. Storybook (private)
"Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components."
Product Attributes:
- Technology used
- Adoption
- Target Audience
- Project Activity (latest updates, frequency of updates, etc.)
- Extensibility of Library (e.g. can it render the submitted data in multiple formats, can new functionality be added by developer users, etc.)
Criteria for Evaluation:
-
Usability of Site & Non-Technical Materials
- Ease of navigation/information architecture
- Clarity of introduction/overview of the tool
- Clarity of writing overall
- Clarity of developer paths (of varying levels of experience)
-
Usability of Code & Technical Documentation (must be evaluated by a developer)
- Clarity and ease of documentation
- Ease of installation
- Quality of code examples
- Ease of integration with existing tech stacks
-
Community & Outreach
- Community Engagement (GitHub analytics)
- Support / Maintenance
- Clear contributor rules & licensing
- Self-Promotion (e.g. calls to action, incentives, etc...)
Evaluation Charts
Key:
Poor Experience
Average Experience
Good Experience
Best In Class Experience
1. Usability of Site & Non-Technical Materials
| Tool | Navigation / IA | Intro / Overview | Guided Paths | Writing |
|---|---|---|---|---|
| USWDS | ||||
| eRegs | ||||
| Alpaca Forms | ||||
| FormBuilder | ||||
| Material UI | ||||
| Ant Design | ||||
| Storybook |
2. Usability of Code & Technical Documentation
| Tool | Documentation | Installation | Examples | Integration |
|---|---|---|---|---|
| USWDS | ||||
| eRegs | ||||
| Alpaca Forms | ||||
| FormBuilder | ||||
| Material UI | ||||
| Ant Design | ||||
| Storybook |
3. Community & Outreach
| Tool | Engagement | Support/Maintenance | Rules/Licensing | Self-Promotion |
|---|---|---|---|---|
| USWDS | ||||
| eRegs | ||||
| Alpaca Forms | ||||
| FormBuilder | ||||
| Material UI | ||||
| Ant Design | ||||
| Storybook |
Patterns & Key Takeaways Chart
-
Website Navigation / IA
- Very clear GitHub button or link in the top navigation bar.
-
GitHub Experience
- For those projects with high budgets, GitHub content is 100% replicated on the website
- README.md sometimes begins with a Demo, Quick Installation directions, or a Table of Contents
-
Visual Design
- Most have an icon version for their logo
Noteworthy DX Features
- "Top contributors" module at bottom of Intro/home page, gamifying contribution. (Source: FormBuilder)
- Logos of companies that use the tool – module (Source: Alpaca)
- Ambient (embedded) demo video on intro page (Source: Storybook)