Wiki Spaces

Documentation
Projects
Resources

Get Help from Others

Q&A: Ask OpenMRS
Discussion: OpenMRS Talk
Real-Time: IRC Chat | Slack

Projects

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Quick Start Links

Want to get started contributing fast? Here are the key links for you to know. More about how to Join Us below.

Button Hyperlink
custom-iconcheckbox
iconview
titleDEMO SITE
typeprimary
urlhttps://openmrs-spa.org/openmrs/spa
targettrue
 u: admin p: Admin123

Where to find work

Button Hyperlink
custom-iconcheckbox
iconcustom
titleLive Tickets Dashboard
typeprimary
urlhttps://issues.openmrs.org/secure/Dashboard.jspa?selectPageId=15950
targettrue
 
Button Hyperlink
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
 
Button Hyperlink
iconconfigure
titleKey GitHub Repos
typeprimary
urlhttps://github.com/orgs/openmrs/teams/microfrontends-squad/repositories
targettrue

Designs

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

How to Work with the Designs

Button Hyperlink
custom-iconvideo-filled
iconcustom
titleZeplin how-to for devs
typeprimary
urlhttps://youtu.be/SjluEGDH4LU
targettrue
 
Button Hyperlink
custom-iconcamera
iconcustom
titleStyleguide (Re-useable Styled Components)
typeprimary
urlhttps://app.zeplin.io/project/5f7223cfda10f94d67cec6d0/styleguide/components
targettrue

Dev Quick-Start Guides

Button Hyperlink
custom-iconadd-item
iconcustom
titleSlots Explained
typeprimary
urlhttps://docs.google.com/presentation/d/1mQxh7qAYLD-gc9sh0I58t4o_XNndPcu6hAJmTZQZ_fo/edit#slide=id.gbbc740aac4_0_0
targettrue
 
Button Hyperlink
custom-iconvideo-filled
iconcustom
titleDev Tutorials
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/blob/master/docs/VIDEOS.md
targettrue
 
Button Hyperlink
iconinfo
titleDev Guide
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/docs
targettrue





Want to contribute? Join our squad! 

  1. Review the high-level guidance on this page
  2. Intro: Introduce yourself at our Squad Slack channel 
  3. Dev Guide: Use our Dev Guide to get started. Look for answers there. 
    Button Hyperlink
    iconinfo
    titleDev Guide
    typeprimary
    urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/docs
    targettrue
     If you are still unsure about a question, ask our squad in the #microfrontends slack channel.
  4. Find Intro Tickets: Intro tickets you can use to start contributing are available here: 
    Button Hyperlink
    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.
  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. 
    Button Hyperlink
    custom-iconboard
    iconcustom
    titleActive Sprint Board
    typestandard
    urlhttps://om.rs/mfboard
    targettrue
    Button Hyperlink
    custom-iconbacklog
    iconcustom
    titleSquad Backlog & Sprints
    typestandard
    urlhttps://issues.openmrs.org/secure/RapidBoard.jspa?rapidView=231&view=planning.nodetail&epics=visible&issueLimit=100
    targettrue





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


Directory

Table of Contents
minLevel2


Status

Status
colourGreen
titleVERY ACTIVE

Background

Strategic Fit for OpenMRS

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

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

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

Button Hyperlink
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.

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

All GitHub Repos related to this project:

Button Hyperlink
custom-icongraph-line
iconcustom
titleOverview of GitHub Activity
typeprimary
urlhttps://github.com/orgs/openmrs/teams/microfrontends-squad/repositories
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 Microfrontend 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: Micro Frontend Squad Notes

Team

Project owners:

Jonathan Dick (AMPATH)

Grace Potma (OpenMRS)

Dimitri R (Mekom Solutions)

Team members:

Florian Rappl (Smapiot & Mekom Solutions)

Nikita Malyschkin  (Smapiot & Mekom Solutions)

Brandon Istenes (PIH)

Dennis Kigen  (AMPATH)

Donald Kibet (AMPATH)

Burke Mamlin (Regenstrief)

Ivange Larry Ndumbe (Mekom Solutions)

Samuel Male (Mekom Solutions)

Romain Buisson  (Mekom Solutions)

Mike Seaton (PIH)

Daniel Kayiwa (OpenMRS)

Eric Achillah (AMPATH)

Jonathan Teich

@Ciaran (Sonder Design & AMPATH)

More Information

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

Extensible, configurable and independently deployable frontend features. Get your frontend live and updated fast. Frontend architecture designed for extensible and configurable apps and widgets.

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

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

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

Microfrontends are in-browser javascript modules (ESMs) that provide application UI. To see available microfrontends including links to their documentation pages, check out all our Microfrontend repos here: https://github.com/orgs/openmrs/teams/microfrontends-squad/repositories

Core Microfrontends

These are microfrontends that are part of openmrs-esm-core. They are tightly coupled to the base application.

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

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

Button Hyperlink
iconconfigure
titleGitHub
typeprimary
urlhttps://github.com/openmrs/openmrs-esm-core/tree/master/packages/esm-implementer-tools-app
targettrue

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

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. 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; pilot plan ~ April 2021 at Ampath.

Designs:

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

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

Our Design System:

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

Button Hyperlink
iconinfo
titleRationale for Carbon
typeprimary
urlhttps://wiki.openmrs.org/pages/viewpage.action?pageId=235277496
targettrue

Our Simple Style Guide for reference:

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

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