Introduction to Frontend Coding Conventions

This is a compendium of the coding conventions we use in O3. The purpose of this document is to help us write code that is consistent and easy to maintain.

These conventions represent our collective experience and best practices for building maintainable, performant, and user-friendly frontend applications in the OpenMRS 3.x ecosystem. They cover everything from naming and project structure to state management and performance optimization.

Who is this guide for?

• New contributors looking to understand our coding standards

• Existing developers seeking guidance on specific implementation patterns

• Reviewers referencing standards during code reviews

• Technical leads making architectural decisions

How to use this guide

This document serves as both a reference and a learning resource. While you should aim to follow these conventions in your code, understand that they are guidelines rather than strict rules. The goal is to maintain consistency while writing high-quality, maintainable code.

If you find cases where deviating from these conventions would result in better code, feel free to discuss it with the team. Our conventions evolve as we learn and as best practices in the frontend ecosystem change.

Table of contents

• Project structure

• Code organization

• Naming

• Components

• Type annotations

• State management

• Data fetching

• Mutations and side effects

• Event handlers

• Styling

• Search inputs

• Internationalization

• Error handling

• Testing

• Performance