Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: added valid link for key repositories

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. 15-min overview video of the vision here.


Info
iconfalse

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.

Auibutton
custom-iconcheckbox
iconview
titleDEMO SITE
typeprimary
urlhttps://o3.openmrs.org
targettrue
u: admin p: Admin123

Project Documentation

Auibutton
custom-iconscreen
iconcustom
titleO3 Implementer Guide
typeprimary
urlO3 Implementer Documentation: Set Up, Configure & Deploy
targettrue
Auibutton
custom-iconlightbulb
iconcustom
titleO3 Designer Guide
typeprimary
urlhttps://openmrs.atlassian.net/wiki/x/lThUAQ
targettrue
Auibutton
custom-iconcode
iconcustom
titleO3 Dev Guide
typeprimary
urlhttps://o3-dev.docs.openmrs.org/#/
targettrue

Where to Find Work

Auibutton
custom-iconcheckbox
iconcustom
titleLive Tickets Dashboard
typeprimary
urlhttps://issues.openmrs.org/secure/Dashboard.jspa?selectPageId=15950
targettrue
 
Auibutton
custom-iconbacklog
iconcustom
titleTeam Jira Board
typeprimary
urlhttps://issues.openmrs.org/secure/RapidBoard.jspa?rapidView=231&view=planning&selectedIssue=MF-449&epics=visible&issueLimit=100&selectedEpic=MF-335
targettrue
 
Auibutton
customhttp
custom-iconbranch
iconexternalUrlhttps://o3-dev.docs.openmrs.org/docs/key-repositories.en-US
color#F4F5F6
filterSpacefalse
destinationexternalUrl
iconatlaskit-EmojiAtlassianIcon
textColorPaletteDefault
titleKey GitHub Repos
typeprimary
textColor#091E42
url
targettrue
selectedUrlhttps://o3-dev.docs.openmrs.org/#/main/map?id=repositories-you-should-know-octocattargettruedocs/key-repositories.en-US
an.spaceKeyprojects
id6kwfffarr8c
backgroundColorPaletteDefault

Designs Ready for Development*

Auibutton
custom-iconworld
iconcustom
titlePublic: Patient Chart
typeprimary
urlhttps://zpl.io/aNYmqeN
targettrue
 
Auibutton
custom-iconnew-edit
iconcustom
titleDetailed: Patient Chart
typeprimary
urlhttps://zpl.io/agm3x7R
targettrue

Auibutton
custom-iconworld
iconcustom
titlePublic: OHRI Package
typeprimary
urlhttps://zpl.io/aMXW7e7
targettrue
 
Auibutton
custom-iconnew-edit
iconcustom
titleDetailed: OHRI Package
typeprimary
urlhttps://zpl.io/agm3Mr0v
targettrue

 

Auibutton
custom-iconworld
iconcustom
titlePublic: Offline
typeprimary
urlhttps://zpl.io/amRdKomv
targettrue
 
Auibutton
custom-iconnew-edit
iconcustom
titleDetailed: Offline
typeprimary
urlhttps://zpl.io/bLq9YD7
targettrue


 *  Note: to see detailed CSS guidance at the Detailed links, you require an invite to our OpenMRS Zeplin project. Just let us know if you require an invite. In the meantime you can review all designs with this account: 

u: openmrszeplinreview@gmail.com

p: zeplinreview123

How to Work with the Designs

Auibutton
custom-iconvideo-filled
iconcustom
titleZeplin how-to for devs
typeprimary
urlhttps://youtu.be/SjluEGDH4LU
targettrue
 
Auibutton
custom-icongallery
iconcustom
titleStyleguide (re-useable shared components & more)
typeprimary
urlhttps://app.zeplin.io/styleguide/60d5ecb9efdcd81256117e7d/components
targettrue




Info
iconfalse

(lightbulb)

Why OpenMRS 3? 

Wondering how we got here?

See: A Visual History of the OpenMRS Frontend


Info
iconfalse

Widget Connector
urlhttps://www.youtube.com/watch?v=RqrvfXveJ0s&list=PL5jj7JoBifSk6dGKc1aaIeHoulbycG_-A&index=1&ab_channel=OpenMRS


Info
iconfalse

Github Logo - Free social media icons

Looking for a repo?

See the Dev Guide's Repositories You Should Know. 




Tip
iconfalse

Project Overview

We are working on 3 main goals that will unlock better frontend collaboration across OpenMRS:

(1) Plug-and-Play Frontend Architecturemakes it possible for frontend feature development to be shared across teams, organizations, and distributions

(2) Implementer Tooling: makes it easier for non-developers to configure the product to the needs of their organization or site

(3) 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


Info
titleDocumentation in this project

Child pages (Children Display)
depth1




O3 Resources to Know


Info
iconfalse

OpenMRS 3 Explained


Coming Soon




Info
iconfalse

Implementer Guide

om.rs/o3deploy

Auibutton
custom-iconscreen
iconcustom
titleO3 Implementer Guide
typeprimary
urlO3 Implementer Documentation: Set Up, Configure & Deploy
targettrue





Info
iconfalse

Designer Guide

om.rs/o3design

Auibutton
custom-iconlightbulb
iconcustom
titleO3 Designer Guide
typeprimary
urlhttps://openmrs.atlassian.net/wiki/x/lThUAQ
targettrue




Info
iconfalse

Developer Guide

om.rs/o3dev

Auibutton
custom-iconcode
iconcustom
titleO3 Dev Guide
typeprimary
urlhttps://o3-dev.docs.openmrs.org/#/
targettrue




Info
iconfalse

Code Repositories


Auibutton
custom-iconcode
iconcustom
titleO3 Code Repos
typeprimary
urlhttps://openmrs.github.io/openmrs-esm-core/#/main/map?id=repositories-you-should-know
targettrue


Github Logo - Free social media icons



Info
iconfalse

Product Roadmap


Auibutton
custom-iconthree-column
iconcustom
titleProduct Roadmap
typeprimary
urlhttps://om.rs/productdashboard
targettrue




Connect With Us


Info
iconfalse

Online Discussions & Help


Info
iconfalse

Daily "Coffee Chats"

  • What: O3 Troubleshooting for Frontend Developers
  • When: Monday-thru-Thursday, 11:30am UTC, 2:30pm EAT, 5:00pm IST
  • Where: https://om.rs/o3coffee 



Info
iconfalse

Weekly 3.x Product Design Call

What: A weekly gathering of BAs, PMs, Designers and stakeholders co-designing 3.x workflows and features. We share emerging ideas, detailed requirements, discuss concerns, and review the latest design outputs and user testing results. 

Check out the OpenMRS Calendar for the latest up-to-date call timings and links: https://om.rs/cal 



Info
iconfalse

Weekly 3.x Squad Call (all-hands)

What: Our weekly 3.x initiative all-hands. Everyone (Devs, Designers, BAs/PMs) shares their updates, and a short design showcase is shared to keep everyone current on the latest design thinking and user feedback. 

Check out the OpenMRS Calendar for the latest up-to-date call timings and links: https://om.rs/cal 




Want to contribute? Join our squad! 

  1. Review the high-level guidance on this page
  2. Dev Guide: Use our Dev Guide to get started. Look for answers there. 
    Auibutton
    iconinfo
    titleDev Guide
    typeprimary
    urlhttps://openmrs.github.io/openmrs-esm-core/#/
    targettrue
     If you are still unsure about a question, double check the short videos in the Dev Tutorials, and make sure you're familiar with the MF Tooling tutorial  and the MF Extensions Tutorial. If you are still stuck after double-checking the Dev Guide for answers, ask our squad in the #microfrontends slack channel.
  3. Intro: Introduce yourself at our Squad #microfrontends Slack channel (Note: You will first need to create an OpenMRS Slack account by going to slack.openmrs.org)
  4. Find Intro Tickets: Intro tickets you can use to start contributing are available here: 
    Auibutton
    custom-iconcheckbox
    iconcustom
    titleOpen Issues to Get Started
    typeprimary
    urlhttps://issues.openmrs.org/secure/Dashboard.jspa?selectPageId=15950
    This dashboard shows the latest Intro and Non-Intro tickets that need to be taken on to support the MicroFrontend work. This also shows the different features (via Epics) that are currently underway. 
    1. Note: To view the designs in detail, you'll need an invite to our Zeplin account. Ask Grace Potma& Eric Achillah for help - @grace & @Eric on Slack. Make sure you also review our short How to Use Zeplin video.
    2. Please assign tickets to yourself before starting work. This helps avoid confusion and accidental duplication of work. Double-check the ticket's Epic for other related work before working on things outside the described scope of the ticket - you may accidentally be replicating a feature someone else is already working on.
    3. Please only take 1-2 tickets at a time. This helps you to focus on getting 1-2 things done at a time. If you assign yourself to multiple tickets, this prevents others from working on them, so please be considerate of others and only pick up 1-2 tasks at a time. When those are done, you can assign yourself another 1-2 other tasks. If you have submitted your PR for 2 tickets and are still waiting for feedback, it is okay to pick up another ticket, so long as you promptly respond to the feedback on your original tickets so that work can be merged promptly.
  5. Meet Us! Join our weekly Squad calls on Thursdays (info under Where You Can Find Us above) (GCal invite here). 
  6. Sprints: Become part of our regular sprints. This will happen naturally as you join our calls, though you don't need to join all calls in order to participate. Here is our active board. We use epics to break down features and widgets, and we typically work in 3-week sprints. 
    Auibutton
    custom-iconboard
    iconcustom
    titleActive Sprint Board
    typestandard
    urlhttps://om.rs/mfboard
    targettrue
    Auibutton
    custom-iconbacklog
    iconcustom
    titleSquad Backlog & Sprints
    typestandard
    urlhttps://issues.openmrs.org/secure/RapidBoard.jspa?rapidView=231&view=planning.nodetail&epics=visible&issueLimit=100
    targettrue





Information Below

Table of Contents
minLevel2


Status

Status
colourGreen
titleVERY ACTIVE

Background

Strategic Fit for OpenMRS

Auibutton
custom-iconvideo-filled
iconcustom
titleWhy Microfrontends?
typestandard
urlhttps://www.youtube.com/watch?v=XDIIuM7Ffas&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=8&ab_channel=OpenMRS
targettrue

Auibutton
custom-iconvideo-filled
iconinfo
titleHigh-Level Strategy
typestandard
urlhttps://talk.openmrs.org/t/an-amazing-future-for-openmrs/22328
targettrue

Auibutton
custom-iconvideo-filled
iconinfo
titleSPA Proposal Explained
typestandard
urlhttps://docs.google.com/presentation/d/1sv0n_15Zp9HNusdSagOXnBO7Kbh2qURMQj3a8OR8ndo/edit#slide=id.g5681fc88ca_0_171
targettrue

Auibutton
custom-iconvideo-filled
iconinfo
titleDetailed Technical Vision
typestandard
urlhttps://www.youtube.com/watch?v=XDIIuM7Ffas&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=8&ab_channel=OpenMRS
targettrue

Decision Making Process

We use an RFC (Request For Comments). Major decisions are made through GitHub pull requests where anyone can comment.

Auibutton
custom-iconvideo-filled
iconinfo
titleOMRS Frontend RFC
typestandard
urlhttps://github.com/openmrs/openmrs-rfc-frontend
targettrue


Where can you find us ?

On Slack

Slack Channel: https://openmrs.slack.com/archives/CHP5QAE5R

(Join our Weekly Calls to become part of our focused OpenMRS 3.0 Squad) 

Weekly Squad Call

Thursdays at 4pm UTC / 9:30pm IST/ 7pm EAT / 5pm CET / 11am EST / 8am PST.

 Join info: https://om.rs/zoommf

What Happens On These Calls:

  1. Dev Demo: latest work done (if it’s the end of a sprint, we also do the full sprint demo)
  2. Dev Discussion: Any blockers or things to clarify
  3. Product Priorities: We clarify any epics or issues that need more ownership or to be prioritized
  4. Design Updates: We wrap up by looking together at the latest design work, so we know what designs are soon to be ready for development 

Recordings and Notes from our regular squad meetings are here: O3 Squad Notes

Team

Project Owners:

Jonathan Dick (AMPATH)

Grace Potma (OpenMRS)

Dimitri R (Mekom Solutions)

Burke Mamlin(Regenstrief Institute)

UX Design:

Ciarán Duffy (Sonder Design & AMPATH)

Paul Adams (Sonder Design & AMPATH)

Software Architecture:

Florian Rappl (Smapiot & Mekom Solutions)

Brandon Istenes (PIH)

Developers, DevOps, QA, BA: 

Nikita Malyschkin  (Smapiot & Mekom Solutions)

Dennis Kigen  (AMPATH)

Donald Kibet (AMPATH)

Emmanuel Nyachoke (Mekom Solutions)

Eudson Bambo(UCSF)

Samuel Male (UCSF)

Amos Laboso(UCSF)

Romain Buisson  (Mekom Solutions)

Mike Seaton (PIH)

Daniel Kayiwa (OpenMRS)

Eric Achillah (AMPATH, PM & QA)

Jonathan Teich (BA/Clinical feedback)

Ian Bacher (Brown) (Backend & FHIR support)

Bett Kipchumba (AMPATH) (Backend & FHIR support)

More Information


Background Color
colorcyan

(1) Plug & Play Architecture: The frontend stack we're building on using Micro Frontends

Goal: 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.


Auibutton
custom-iconvideo-filled
iconcustom
titleTutorial
typeprimary
urlhttps://www.youtube.com/watch?v=KDC8DwPWwjc&ab_channel=FlorianRappl
targettrue

Auibutton
iconconfigure
titleGitHub: esm-core
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core
targettrue

Auibutton
iconinfo
titleDev Guide
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/docs
targettrue



Background Color
colorcyan

(2) Implementer Tooling: Tooling we're building to make MFE easier for implementers to configure

Goal: Enable both developers and non-developers to easily configure their distribution, and re-use that configuration rapidly. 


Auibutton
custom-iconvideo-filled
iconcustom
titleDemo
typeprimary
urlhttps://www.youtube.com/watch?v=xhtVoNnZoec&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=7&ab_channel=OpenMRS
targettrue

Auibutton
iconconfigure
titleImplementer Tool App on GitHub
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/packages/esm-implementer-tools-app
targettrue
  openmrs-esm-implementer-tools-app is an in-browser javascript module provides a UI for viewing and editing configurations, and viewing other administrative information about the frontend application. It is part of the Extension System.

Auibutton
iconconfigure
titleImplementer Config Library on GitHub
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/packages/esm-config
targettrue
This is the configuration library for OpenMRS Microfrontends. It makes configurability easier for developers and configuring easier for implementers.





Background Color
colorcyan

(3) Building a Friendly, Modern UX in RefApp v3.0

Goal: Create a better means for building out a shared UI. Modernizing the entire RefApp frontend, using Carbon Design System for UI consistency and faster dev value. Our OpenMRS Reference Application needs to become a Point of Care application, that’s modern, friendly, and works well on tablets. 



We are working on a re-design of the patient chart, starting with end-to-end support for HIV Outpatient Workflows.

We're currently in the process of implementing new designs that leverage the carbon design system for our reference application. (More on why we chose carbon here).

We're not starting from scratch though. Rather, we're migrating from an old set of designs (and an old style guide) to the new designs (and now migrating to use Carbon Design System as well - not all the Carbonizing work is done). As such, it should not be unexpected that gaps will be found in documentation, incomplete implementations, broken functionality and so on as we move to get everything back in order.

Designs:

Auibutton
custom-iconnew-edit
iconcustom
titleDesigns Ready for Development
typeprimary
urlhttps://app.zeplin.io/project/5f7223cfda10f94d67cec6d0
targettrue

Auibutton
custom-iconnew-edit
icontime
titleDesigns in Progress
typeprimary
urlhttps://www.sketch.com/s/1dd7e0f7-b96b-4586-846c-5c352fc954e3
targettrue

Our Design System:

Auibutton
iconinfo
titleCarbon Design System
typeprimary
urlhttps://www.carbondesignsystem.com/components/overview
targettrue

Auibutton
iconinfo
titleRationale for Carbon
typeprimary
urlhttps://openmrs.atlassian.net/wiki/pages/viewpage.action?pageId=22572872
targettrue

Our Simple Style Guide for reference:

Auibutton
custom-iconcamera
iconcustom
titleStyleguide (Re-useable Styled Components)
typestandard
urlhttps://app.zeplin.io/project/5f7223cfda10f94d67cec6d0/styleguide/components
targettrue

Auibutton
custom-iconvideo-filled
iconcustom
titleHow to Use Zeplin in Dev Work
typeprimary
urlhttps://youtu.be/SjluEGDH4LU
targettrue