Four areas of focus

Frontend architecture is a collection of tools and processes that aims to improve the quality of frontend code while creating a more efficient and sustainable workflow.

Principles

• Modular content: We want to use the Atomic Design methodology created by Brad Frost and design tokens brought forth by Jina Anne. We prefer to reuse small components rather than create dozens or even hundreds of unique patterns.
• Comprehensive testing: Large chunks of frontend code being merged into production can break code written months prior. We have to test the Canada.ca design system with the same level of coverage that are used for applications.
• Streamlined processes: We want to mirror the Git flow that works well at the application level. We need to break feature branches into smaller, component-sized code chunks. We have to automate error-prone manual processes like updating style guide, creating icon fonts and deploying new code.
• Exhaustive documentation: With distributed teams across the government of developers, backend developers, designers, marketing managers, ops and various product owners, we have a large audience to serve. We need that whatever we build have a proper documentation that meet each one of their needs.
• Accessibility from the start:
• Bilingualism at all levels:

Every story should end with exhaustive documentation, a suite of regression tests, and code that conforms to the standard set down by our original architecture decisions. Using the processes, technique and lessons discussed in this wiki, should give us the confidence to fight for our frontend architecture.