Coding Guidelines ABRIDGE Adnan A M

Why have them? Consistency across the app They help standardise conventions & practices across the app thus reducing errors Readability & Maintainence Having a standard helps all team members align on the same page & makes it easier to understand and reasn about Abridge AI | 2021

What kind of standards are we talking? THE GOOD KIND ;) Abridge AI | 2021

General Programming & Architecture Standards Indentation How do we indent our code? Tabs or spaces? 2 tabs or 4 tabs? Comments What needs to be commented & what can be skipped? Naming Consistency Does getUser vs GetUser really matter? Abridge AI | 2021

React Specific Standards prop-types Enforce type safety using prop- types error-boundaries Display fallback UI & handle any JS errors gracefully props destructuring Makes readability a lot better without having to search for the usages Abridge AI | 2021

Naming Conventions 1. Variable Naming Variables should generally be camelCase 2. Function Naming Functions are also named using camelCase 3. File Naming The file names should be PascalCase 4. Component Naming The components imported should be named in PascalCase

No content

React specific standards Use prop-types Setup prop-types to have runtime safety around invalid data types Use camelCase for naming props If the props is a react component then defer to PascalCase Use error-boundaries to handle errors in component tree Error boundaries are the recommended way of handling errors Destructure props to improve readability Always destructure props inline as opposed to reading them from props variable Prefer Composition over props-drilling Avoid passing props multiple hierarchies down the tree and rely on composition for the same result

React specific standards Separate imports Segregate imports based on type - React imports, our code import & 3rd party imports Name any function returning UI elements as `renderXYZ` Starting the name of these functions with render will help debug better & improve readability Avoid mixing up JS & JSX Segregate UI rendering logic(JSX) & the business logic(JS) as separate functions/files. Reduce props being passed Instead of passing a huge number of props, pass in an object Prefer mapping over components over ternary operator Having multiple ternary operators to render UI conditionally can become hard, instead put all components in a array & use them based on keys.

Architecture Best Practices Avoid Redux & Context API where possible Prefer local state when you can instead of piggybacking on Redux for all use-cases. Build Abstractions Most of our business logic should ideally be abstracted away and hide the implementation details from the call site Single Source of Truth Follow a single source of truth for all data in the app. This makes it easier to reason about the flow in the app.

Architecture Best Practices Use Dependency Injection Do not create hard dependencies inside the class/function, instead pass in the dependency as an argument Unit Testing Having smaller pure functions & dependency injection will allow mocking and swapping fake implementations easily to enable unit testing Smaller Composable Pure Functions Each function should just perform one piece of functionality & should push side-effects to the boundary edges

Resources React JSX StyleGuide by Airbnb A custom es lint plugin which enforces quite a few of the JSX lint rules React JS StyleGuide by Airbnb A custom es lint plugin which enforces quite a few of the JS lint rules

Questions? LET ME KNOW HOW I CAN HELP.