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 (opens in a new tab)
- MDN's CSS basics (opens in a new tab)
- CSS Tricks - A Complete Guide to Flexbox (opens in a new tab)
- CSS Grid Garden (opens in a new tab) - An interactive game to learn CSS grid
- Josh Comeau's CSS course (opens in a new tab)
- web.dev's Learn CSS (opens in a new tab)
JavaScript
Knowing JavaScript is a prerequisite to everything else. We recommend going through the following resources:
- Introduction to JavaScript - Codecademy (opens in a new tab)
- JavaScript to know for React - Kent C. Dodds (opens in a new tab)
- The Modern JavaScript Tutorial (opens in a new tab)
- JavaScript for impatient programmers (opens in a new tab)
- Josh Comeau's Operator lookup (opens in a new tab)
- Visual guide to references in JavaScript (opens in a new tab)
React
The official docs (opens in a new tab) are a great way to get acquainted with React. Don't gloss over the fundamentals (opens in a new tab)! 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 (opens in a new tab)
- Understanding useMemo and useCallback (opens in a new tab)
- Writing Resilient Components - Dan Abramov (dated but still very useful) (opens in a new tab)
- A (Mostly) Complete Guide to React Rendering Behavior - Mark Erikson (opens in a new tab)
- Why React Re-renders - Josh Comeau (opens in a new tab)
- Beginners Guide to React - Kent C. Dodds (dated but still very useful) (opens in a new tab)
- A Visual Guide to React Rendering (opens in a new tab)
- React Re-renders Guide - Nadia Makarevich (opens in a new tab)
- When Does React Render Your Component - Zhenghao hao (opens in a new tab)
TypeScript
Most of our code is written in TypeScript. We recommend going through the following resources:
- TypeScript essentials (opens in a new tab)
- TypeScript in 5 minutes (opens in a new tab)
- Total TypeScript (opens in a new tab)
- React + TypeScript Cheatsheets (opens in a new tab)
JavaScript tooling
- yarn (opens in a new tab) - many OpenMRS repos use yarn as the package manager. If a repository has a
yarn.lock, it uses yarn. We leverage yarn's workspaces (opens in a new tab) for versioning and publishing packages within our monorepos. - turbo (opens in a new tab) - we use
turboto run scripts during local development and our continuous integration processes. - swc (opens in a new tab) - we use SWC to compile our JavaScript and TypeScript code into a format all major browsers support.
- webpack (opens in a new tab) - we use webpack to bundle our code for production. We use webpack 5 (opens in a new tab), 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 (opens in a new tab). You should know the basics of using Git and GitHub. Great learning resources include:
- Learn Git Branching (opens in a new tab)
- Git and GitHub for Beginners (opens in a new tab)
- Dangit, Git (opens in a new tab)
- OpenMRS Guide to using Git (opens in a new tab)
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:
Next steps
Ready to jump in? Start with the Core concepts to understand how O3 is structured.