Front-End Development Best Practices Checklist

Development is an iterative process, and so is learning and applying what you learned from previous iterations. You won't meet all these items at first, and some may not apply to your project. Each time you visit a project, review the checklist below and pick a few items to improve upon.

Use the checklist below to not only develop your skills, but to enhance the maintainability, security, and usefulness of what you provide to the community.

Framework & Project Structure

• Choose a framework appropriate for the project (Vue, React, Angular).
• Follow established St. Thomas or vendor-specific conventions when applicable.
• Keep project structure organized, predictable, and well-documented.
• Use clear naming conventions for files, components, and folders.
• Avoid unnecessary complexity or highly custom patterns that reduce maintainability.

Version Control & Collaboration

• Store all project files in a Git repository.
• Commit changes frequently with meaningful commit messages.
• Use branches for features, fixes, and experiments.
• Use pull requests for reviews and collaboration.
• Do not store build artifacts, secrets, or personal data in the repository.

Build Tools & Dependencies

• Use modern build tools (Vite, Webpack, or vendor-supported equivalents).
• Keep Node, npm, and framework packages up to date.
• Keep the number of dependencies small. (Don't include a package for a single function)
• Remove unused dependencies regularly.
• Use automated dependency scanning to detect vulnerabilities.
• Lock versions to avoid unexpected build changes.

Accessibility (A11y)

• Follow St. Thomas Digital Accessibility guidelines and WCAG principles.
• Use semantic HTML elements.
• Provide alt text for images and meaningful labels for inputs.
• Ensure adequate color contrast and text readability.
• Test keyboard navigation and focus states.
• Avoid relying solely on color to convey meaning.

Performance

• Optimize images and media assets.
• Use code splitting and lazy loading where appropriate.
• Avoid unnecessary re-renders or excessive DOM manipulation.
• Cache API responses when appropriate.
• Minimize bundle size and remove unused code.

Security

• Never store secrets in front-end code.
• Sanitize and validate all user-generated content.
• Avoid inline JavaScript that can introduce vulnerabilities.
• Use HTTPS for all API calls.
• Keep dependencies current to avoid known security issues.

Coding Standards

• Use linting tools (ESLint, Prettier) for consistent formatting.
• Avoid global variables and tightly coupled components.
• Write reusable, modular components.
• Document complex logic with comments or lightweight README files.
• Follow framework-specific style guides (React, Vue, Angular).

Testing & Quality Assurance

• Test key features manually and with automated tools when possible.
• Use vendor toolkits or local mocks for API testing.
• Verify UI behavior across major browsers and device sizes.
• Validate accessibility using automated and manual checks.

Deployment & Maintenance

• Use automated deployment pipelines whenever possible.
• Ensure builds are reproducible and predictable.
• Keep environment variables secure and managed outside the codebase.
• Regularly review analytics, logs, and error reports.
• Monitor for degraded performance or UI regressions after updates.

Documentation

• Provide a project README with setup, scripts, deployment instructions, and dependencies.
• Document any vendor SDK usage or integration specifics.
• Include notes on architectural decisions and reasons behind framework choices.

AI-Assisted Development

• Use AI tools to assist with scaffolding, debugging, documentation, and refactoring.
• Develop within an IDE or full project workspace so AI tools have proper project context.
• Use AI as a development aid, not a replacement for understanding the framework or platform.
• Recognize that many vendor frameworks and proprietary platforms are not fully represented in AI training data.
• Verify that AI suggestions follow official vendor documentation and supported patterns.
• Avoid implementing solutions that conflict with vendor architecture, tooling, or platform conventions.
• Avoid introducing unsupported build tools, frameworks, or dependencies suggested by AI.
• Review and test AI-generated code the same as any external contribution.
• Apply best judgment when accepting AI suggestions, especially within vendor-specific environments.
• Maintain responsibility for the final design, implementation, and quality of the code.