Prerequisite knowledge

Before jumping into building with O3, you should be familiar with HTML, CSS, and JavaScript. If you’re totally new to frontend development, it’s especially important that you develop a good grasp of the fundamentals. Below is a list of the technologies we use in O3 and some recommended resources to learn them.

HTML & CSS

A solid understanding of HTML and CSS fundamentals is essential for frontend development. Here are some recommended resources:

• MDN’s HTML basics 
• MDN’s CSS basics 
• CSS Tricks - A Complete Guide to Flexbox 
• CSS Grid Garden  - An interactive game to learn CSS grid
• Josh Comeau’s CSS course 
• web.dev’s Learn CSS 

JavaScript

Knowing JavaScript is a prerequisite to everything else. We recommend going through the following resources:

• Introduction to JavaScript - Codecademy 
• JavaScript to know for React - Kent C. Dodds 
• The Modern JavaScript Tutorial 
• JavaScript for impatient programmers 
• Josh Comeau’s Operator lookup 
• Visual guide to references in JavaScript 

React

The official docs  are a great way to get acquainted with React. Don’t gloss over the fundamentals ! Having a solid understanding of its core concepts is very important in helping you learn how to develop high-quality frontend modules in O3. We also recommend going through the following resources:

• Common mistakes with React - Josh Comeau 
• Understanding useMemo and useCallback 
• Writing Resilient Components - Dan Abramov (dated but still very useful) 
• A (Mostly) Complete Guide to React Rendering Behavior - Mark Erikson 
• Why React Re-renders - Josh Comeau 
• Beginners Guide to React - Kent C. Dodds (dated but still very useful) 
• A Visual Guide to React Rendering 
• React Re-renders Guide - Nadia Makarevich 
• When Does React Render Your Component - Zhenghao hao 

TypeScript

Most of our code is written in TypeScript. We recommend going through the following resources:

• TypeScript essentials 
• TypeScript in 5 minutes 
• Total TypeScript 
• React + TypeScript Cheatsheets 

JavaScript tooling

• Yarn  and Corepack  - many OpenMRS repos use Yarn as the package manager and pin the exact Yarn version in the packageManager field of package.json. Run corepack enable once so Node can activate the pinned Yarn version for each repo.
• turbo  - we use turbo to run scripts during local development and our continuous integration processes.
• swc  - we use SWC to compile our JavaScript and TypeScript code into a format all major browsers support.
• Rspack  - most current O3 frontend modules use Rspack to bundle code for local development and production.
• webpack  - O3’s build tooling still supports Webpack-compatible configuration, and a few legacy modules still use Webpack directly. You will mostly encounter Webpack concepts through Module Federation, loader configuration, and older frontend modules.

Git

It is imperative that you keep your code in a version control system. OpenMRS uses Git . You should know the basics of using Git and GitHub. Great learning resources include:

• Learn Git Branching 
• Git and GitHub for Beginners 
• Dangit, Git 
• OpenMRS Guide to using Git 

OpenMRS APIs and data model

OpenMRS provides APIs the frontend uses to request data. We recommend getting familiar with these APIs and the OpenMRS data model. Find the relevant links below:

• OpenMRS data model 
• REST API 
• FHIR API 

Next steps

Ready to jump in? Start with the Core concepts to understand how O3 is structured.