OpenMRS 3.0 Micro Frontend Demo Page

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.

view DEMO SITE  u: admin p: Admin123

Project documentation

code Developer Documentation   queues Implementer Documentation

Where to find work

checkbox Live Tickets Dashboard   backlog Team Jira Board   configure Key GitHub Repos

Designs

world Public: Patient Chart Designs   world Public: Offline Designs world Public: OHRI Designs new-edit Detailed: Designs Ready for Development gallery Detailed: Styleguide

How to Work with the Designs

video-filled Zeplin how-to for devs   camera Styleguide (Re-useable Styled Components)

Current Status 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:

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

Background

Watch this 15 minute video that will give you a better understanding of our vision.

Strategic Fit for OpenMRS

video-filled Why Microfrontends? info High-Level Strategy info SPA Proposal Explained info Detailed Technical Vision

Decision Making Process

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

info OMRS Frontend RFC

How to Join

How to Contribute

1. Check the Developer's Guide: Use our Developer's Guide to get started. Look for answers there.  info Dev Guide  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.
2. Introduce Yourself: Come say hello on our Slack channel (listed above).
3. Find Intro Tickets: Intro tickets you can use to start contributing are available here:  checkbox Open Issues to Get Started 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.
4. Meet Us! Come to a weekly squad call to learn more about what we do and get hands-on experience.
5. 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.  board Active Sprint Board backlog Squad Backlog & Sprints

More Information

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.

Repositories You Should Know About

Frontend 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:

• openmrs-esm-core: Microfrontends which are administrative or else integral to the application
• openmrs-esm-patient-management: Microfrontends which deal with creating, searching, and listing patients
• openmrs-esm-patient-chart: The patient chart microfrontend and all its widgets
• openmrs-esm-home: Microfrontends tied to the home page

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.

configure GitHub: esm-core info Dev Guide video-filled Tutorial

video-filled Demo

configure Implementer Tool App on GitHub   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.

configure Implementer Config Library on GitHub This is the configuration library for OpenMRS Microfrontends. It makes configurability easier for developers and configuring easier for implementers.

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:

time Designs in Progress new-edit Designs Ready for Development

Our Design System:

info Carbon Design System info Rationale for Carbon

Our Simple Style Guide for reference:

camera Styleguide (Re-useable Styled Components) video-filled How to Use Zeplin in Dev Work

Meet the Members

Finally, member information. This will include the project’s leaders, or any other noteworthy members, sorted by their role and given contact information. It is important to maintain a distinction between teams and squads. All contact tables should be conveyed using the same format. Currently being used is this table below. The left column indicates the different positions, and the corresponding right columns will list the tags of all active members holding those positions.