About
We're building a new frontend for OpenMRS via a collaborative process that leverages modern frontend technologies. These technologies will enable OpenMRS users and developers around the world to share more frontend functionality, reduce duplicated effort, and have a better user experience.
Quick Links
Here are the most important links for this project, aside from the actual code. High-level project documentation and information about how to Join Us can be found below.
Note: If you are new to this page, please review this page's contents before clicking on these buttons. These are convenient links to team resources but should only be utilized after completing basic onboarding. |
---|
Auibutton |
---|
custom-icon | checkbox |
---|
icon | view |
---|
title | DEMO SITE |
---|
type | primary |
---|
url | https://openmrs-spa.org/openmrs/spa |
---|
target | true |
---|
|
u: admin p: Admin123
Project documentation
Auibutton |
---|
custom-icon | code |
---|
icon | custom |
---|
title | Developer Documentation |
---|
type | primary |
---|
url | https://openmrs.github.io/openmrs-esm-core/#/ |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | queues |
---|
icon | custom |
---|
title | Implementer Documentation |
---|
type | primary |
---|
url | Frontend 3.0 Documentation for Implementers |
---|
target | true |
---|
|
Where to find work
Auibutton |
---|
custom-icon | checkbox |
---|
icon | custom |
---|
title | Live Tickets Dashboard |
---|
type | primary |
---|
url | https://issues.openmrs.org/secure/Dashboard.jspa?selectPageId=15950 |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | backlog |
---|
icon | custom |
---|
title | Team Jira Board |
---|
type | primary |
---|
url | https://issues.openmrs.org/secure/RapidBoard.jspa?rapidView=231&view=planning&selectedIssue=MF-449&epics=visible&issueLimit=100&selectedEpic=MF-335 |
---|
target | true |
---|
|
Auibutton |
---|
icon | configure |
---|
title | Key GitHub Repos |
---|
type | primary |
---|
url | https://wiki.openmrs.org/display/projects/OpenMRS+3.0%3A+A+Frontend+Framework+that+enables+collaboration+and+better+User+Experience#OpenMRS3.0:AFrontendFrameworkthatenablescollaborationandbetterUserExperience-RepositoriesYouShouldKnowAbout |
---|
target | true |
---|
|
Designs
Auibutton |
---|
custom-icon | world |
---|
icon | custom |
---|
title | Public: Patient Chart Designs |
---|
type | primary |
---|
url | https://app.zeplin.io/workspace/60d4d9bc220676b218e75ed2/projects |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | world |
---|
icon | custom |
---|
title | Public: Offline Designs |
---|
type | primary |
---|
url | https://app.zeplin.io/workspace/60d4d9bc220676b218e75ed2/projects |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | world |
---|
icon | custom |
---|
title | Public: OHRI Designs |
---|
type | primary |
---|
url | https://app.zeplin.io/workspace/60d4d9bc220676b218e75ed2/projects |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | new-edit |
---|
icon | custom |
---|
title | Detailed: Designs Ready for Development |
---|
type | primary |
---|
url | https://app.zeplin.io/workspace/60d4d9bc220676b218e75ed2/projects |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | gallery |
---|
icon | custom |
---|
title | Detailed: Styleguide |
---|
type | primary |
---|
url | https://app.zeplin.io/styleguide/60d5ecb9efdcd81256117e7d/components |
---|
target | true |
---|
|
How to Work with the Designs
Auibutton |
---|
custom-icon | video-filled |
---|
icon | custom |
---|
title | Zeplin how-to for devs |
---|
type | primary |
---|
url | https://youtu.be/SjluEGDH4LU |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | camera |
---|
icon | custom |
---|
title | Styleguide (Re-useable Styled Components) |
---|
type | primary |
---|
url | https://app.zeplin.io/project/5f7223cfda10f94d67cec6d0/styleguide/components |
---|
target | true |
---|
|
Current Status
Status |
---|
colour | Green |
---|
title | VERY ACTIVE |
---|
|
How does this project fit in with the strategy?
We are working on 3 main goals that will unlock better frontend collaboration across OpenMRS:
- Plug-and-Play Frontend Architecture: makes it possible for frontend feature development to be shared across teams, organizations, and distributions
- Implementer Tooling: makes it easier for non-developers to configure the product to the needs of their organization or site
- A friendly, modern, consistent User Experience: with a professional UX framework, this further unlocks frontend feature-sharing, and creates a 3.0 option of the OpenMRS RefApp
Background Color |
---|
|
(1) Plug & Play Architecture: The frontend stack we're building on using Micro FrontendsGoal: Frontend architecture designed for extensible and configurable apps and widgets. |
What are Microfrontends? Microfrontends are in-browser javascript modules (ESMs) that provide application UI. They make it possible to have extensible, configurable and independently deployable frontend features. It means you can get your frontend live and updated fast.
Our MF Framework is Single-SPA: We chose to use single-spa, the most popular microfrontends framework, as the basis upon which to build this new frontend architecture.
Our MF Tech Stack: Primarily React, HTML and CSS, but it's not unfeasible that one could choose to develop in a JavaScript framework of their choosing - that's the whole premise behind microfrontends after all.
Background Color |
---|
|
Repositories You Should Know AboutFrontend 3.0 uses a framework called esm-framework , which is housed in openmrs-esm-core, along with the app shell and tooling. Distributions will use these core modules and package a number of Microfrontends which are built on them. The reference application is made up of all the microfrontends found in the following repositories: Special mention for openmrs-rfc-frontend which is a git repo that facilitates a democratic process where folks can propose changes to the frontend implementation via RFCs (Request For Comments). Please read, for example, the Contributing Guidelines for Microfrontends, which were established with RFC #20. |
Auibutton |
---|
custom-icon | video-filled |
---|
icon | custom |
---|
title | Tutorial |
---|
type | primary |
---|
url | https://www.youtube.com/watch?v=KDC8DwPWwjc&ab_channel=FlorianRappl |
---|
target | true |
---|
|
Auibutton |
---|
icon | configure |
---|
title | GitHub: esm-core |
---|
type | primary |
---|
url | https://github.com/openmrs/openmrs-esm-core |
---|
target | true |
---|
|
Auibutton |
---|
icon | info |
---|
title | Dev Guide |
---|
type | primary |
---|
url | https://github.com/openmrs/openmrs-esm-core/tree/master/docs |
---|
target | true
Background
Watch this 15 minute video that will give you a better understanding of our vision.
Strategic Fit for OpenMRS
Auibutton |
---|
custom-icon | video-filled |
---|
icon | custom |
---|
title | Why Microfrontends? |
---|
type | standard |
---|
url | https://www.youtube.com/watch?v=XDIIuM7Ffas&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=8&ab_channel=OpenMRS |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | video-filled |
---|
icon | info |
---|
title | High-Level Strategy |
---|
type | standard |
---|
url | https://talk.openmrs.org/t/an-amazing-future-for-openmrs/22328 |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | video-filled |
---|
icon | info |
---|
title | SPA Proposal Explained |
---|
type | standard |
---|
url | https://docs.google.com/presentation/d/1sv0n_15Zp9HNusdSagOXnBO7Kbh2qURMQj3a8OR8ndo/edit#slide=id.g5681fc88ca_0_171 |
---|
target | true |
---|
|
Auibutton |
---|
custom-icon | video-filled |
---|
icon | info |
---|
title | Detailed Technical Vision |
---|
type | standard |
---|
url | https://www.youtube.com/watch?v=XDIIuM7Ffas&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=8&ab_channel=OpenMRS |
---|
target | true |
---|
|
Decision Making Process
We use an RFC (Request For Comments). Major decisions are made through GitHub pull requests where anyone can comment.
Auibutton |
---|
custom-icon | video-filled |
---|
icon | info |
---|
title | OMRS Frontend RFC |
---|
type | standard |
---|
url | https://github.com/openmrs/openmrs-rfc-frontend |
---|
target | true |
---|
|
How to Join