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 in 5 minutes

• Total TypeScript

• Typescript Essentials book by Matt Pockock

• React + TypeScript Cheatsheets

JavaScript tooling

• yarn - we use yarn as our package manager. Generally, if the repository you're looking at has a yarn.lock file at its root, it uses yarn. We leverage yarn's workspaces for versioning and publishing packages within our monorepos.

• 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.

• webpack - we use webpack to bundle our code for production. We use webpack 5, which is the latest version of webpack at the time of writing.

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

• EpicWeb’s Git Fundamental course

OpenMRS

OpenMRS provides various APIs through which the frontend can request data. We recommend acquainting yourself with the documentation of these APIs as well as the OpenMRS data model. Find the relevant links below:

• OpenMRS data model

• REST API

• FHIR wiki

Next steps

Ready to jump in? It's time to learn about the key repositories in the O3 ecosystem and how they work together. Head over to the next section to learn more.