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.
Tip | ||
---|---|---|
| ||
Project OverviewWe are working on 3 main goals that will unlock better frontend collaboration across OpenMRS: (1) Plug-and-Play Frontend Architecture: makes 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 | ||||
---|---|---|---|---|
| ||||
|
O3 Resources to Know
|
|
|
|
|
|
Connect With Us
Info | ||
---|---|---|
| ||
Online Discussions & Help
|
Info | ||
---|---|---|
| ||
Daily "Coffee Chats"
|
Info | ||
---|---|---|
| ||
Weekly 3.x Product Design CallWhat: 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 | ||
---|---|---|
| ||
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!
|
Information Below
Table of Contents | ||
---|---|---|
|
Status
Status | ||||
---|---|---|---|---|
|
Background
Strategic Fit for OpenMRS
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Decision Making Process
We use an RFC (Request For Comments). Major decisions are made through GitHub pull requests where anyone can comment.
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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:
- Dev Demo: latest work done (if it’s the end of a sprint, we also do the full sprint demo)
- Dev Discussion: Any blockers or things to clarify
- Product Priorities: We clarify any epics or issues that need more ownership or to be prioritized
- 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 (Unlicensed) (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 | ||
---|---|---|
| ||
(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.
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 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Background Color | ||
---|---|---|
| ||
(2) Implementer Tooling: Tooling we're building to make MFE easier for implementers to configureGoal: Enable both developers and non-developers to easily configure their distribution, and re-use that configuration rapidly. |
Auibutton custom-icon video-filled icon custom title Demo type primary url https://www.youtube.com/watch?v=xhtVoNnZoec&list=PL5jj7JoBifSnuNkGytL6m4IQ2OuV9lbq1&index=7&ab_channel=OpenMRS target true
Auibutton | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Background Color | ||
---|---|---|
| ||
(3) Building a Friendly, Modern UX in RefApp v3.0Goal: 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-icon new-edit icon custom title Designs Ready for Development type primary url https://app.zeplin.io/project/5f7223cfda10f94d67cec6d0 target true
Auibutton custom-icon new-edit icon time title Designs in Progress type primary url https://www.sketch.com/s/1dd7e0f7-b96b-4586-846c-5c352fc954e3 target true
Our Design System:
Auibutton | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Our Simple Style Guide for reference:
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Auibutton | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|