Micro Frontends Architecture for OpenMRS

Thanks Alot Joel , sure we can hold a call what is your availability.

Proud of what AMPATH is already doing.:clap:t4:

1 Like

The microfrontends squad had a meeting last Thursday. Most of our squad members weren’t there so we cut the meeting short. We mostly talked about https://github.com/openmrs/openmrs-module-spa/pulls/6 and updates regarding Ampath’s progress toward using the new microfrontends architecture.

This Thursday there will be no microfrontends squad meeting. Next meeting will be next Thursday at the regular time.

1 Like

Thanks for the Reminder.

Hi everyone!

I wanted to draw everyone’s attention to the summary of the Design Forum discussion on Styleguides that @c.antwi posted earlier this week. Notes from that meeting are also available here: https://notes.openmrs.org/Design_Forum_Styleguide_June_24_2019.

For those of you who were unable to join the Design Forum, Joel put out four great questions - and we’d like to continue discussing these questions here on Talk:

  1. How much CSS should OpenMRS developers write when building a feature? None, very little, some, a lot, all?

  2. How much design consistency should we strive for in our UIs? Same “atomic elements,” same “molecules,” same “organisms”?

  3. What is the role of UX Designers within OpenMRS? How many design resources do we have available to us?

  4. How hard is it to maintain an OpenMRS-specific style guide. What is cost/benefit?

Please note that no decision about the Styleguides proposal has yet been made, making this a great time to share any additional questions, suggestions, or experiences that you have. And if you haven’t read the Styleguides proposal and comments on github, I encourage you to do so!

As posted by @jdick on Slack:

On the last OpenMRS strategy and operations call, we discussed governance with regards to how squads ought to operate

Although it appears guidance has not been formalized, the takeaway was that each squad retains the ability to make final decisions when it comes to various proposals.

Of course, it is in everyone’s best interests that squads align themselves as much as possible with recommendations from community members.

The last design call focused on the question of whether to develop a style guide or use an existing design system.

It was a great discussion but perhaps lacked a clear conclusion in rfc 10

At this point there are two ways forward. We can have another design session to further discuss or the mf squad can meet and make s final decision.

I would like at this time to invite community members to let the squad know if another public forum would be useful. Thank you.

Dear All,

On today’s call, we discussed the importance of making a final decision on RFC 9 (javascript components) and RFC 10 (Style Guide and Design Libraries). https://github.com/openmrs/openmrs-rfc-frontend/pulls. We have set a deadline for decision to be the next MF Squad call (Thursday, July 18). In the mean time, we would love to hear feedback. There was a great discussion that took place on the design call but we seemed to have left without a conclusion. Please do post your thoughts here specifically with adopting an existing design system (e.g. twitter or material) vs creating a home grown style guide.



1 Like

@joeldenning @jdick where can i find the link to the weekly microfrontends call?

On Slack, hum: https://openmrs.slack.com/archives/CHP5QAE5R/p1563462071102800

Some updates:

  • The microfrontends squad is starting to work on real features and modules that are intended to be used by as many people and distributions as possible. Please reach out if you want to be involved in this. Upcoming features are 1) Landing page after login, 2) patient search, and 3) patient chart/dashboard.

MF SQUAD Meeting 15th August 2019 Agenda Items

  1. Demo of login MF application (https://openmrs-spa.org/openmrs/spa/login). If interested, please see code at https://github.com/openmrs/openmrs-esm-login)

  2. Discussion of Patient Search Design (https://www.figma.com/file/0bNhP3xm4tB7rMwpMZe51n/Search?node-id=0%3A1)

  3. Sprint Planning For Remaining Login Tickets and Patient Search Widget .

  4. Overview of style guide (please take a look as much has been added in past week: https://styleguide.openmrs.org). Code available at (https://github.com/openmrs/openmrs-esm-styleguide)

Squad meeting will take place on zoom https://om.rs/zoommicrofrontend

Thanks @fali for the reminder

Hey Everyone

I just wanted to highlight some of the developments from the MF squad:

  1. In addition to the slack channel that has been created ,A set of wiki pages (as a reminder) have been created for the project can be found here. All meeting minutes and recordings will be captured here as well as on talk.

The current working collaboration conventions are as follows:

  1. Process for Application development:

Initial tickets will be created to define what needs to be done. These can be modified as necessary.

After a PR is done, the creator of the PR will assign it to a squad member within 24 hours. The squad member will then have 1 week to provide feedback or approve the PR.

Dev Side project management will be monitored through the JIRA Board https://issues.openmrs.org/projects/MF/summary

Process for developing the design and approval to start coding:

  1. Trello will be used to monitor design activities , A backlog will be created with the trello. User stories collected in google doc (like appointment UI)

  2. Figma will be used for designing the user interfaces https://www.figma.com/file/0sfnmvaW8yTCHrpDLyzmRz/OpenMRS-Flow-Toolbox

  3. The design is shared on slack channel/ or talk for review and discussion. Once agreed that the design in suitable

  4. The ticket is then moved to JIRA for coding.

  5. User testing on Prototypes? Can be done during design feedback stage.

The Summary of Today’s Squad call :slight_smile:

1. Review designs and finalize on presentations for today.
2.  @joeldenning  , @aojwang , @bistenes to work on creating a  local dev frontend documentation for startup, packaging  into a WAR file
3. New additional Members from Ampath Donald, Jacinta and Enchil
  1. Sprint planning: Tickets will be created and assigned to team members. Aim to have Demo for Main Nav and Patient Search Members are encouraged to PR small amounts of code rather than large batches.

See blogpost from Greg on responsive breakpoints: https://docs.google.com/document/d/1nk1uWd5UxE1DB1SdeNG4HfChXuB9gqXUEvs7uCwiHQ8/edit#heading=h.rbs2o24gvylu

we are currently designing the patient search feature and your feedback is very much appreciated. @Gregory Schmidt is working on the designs in Figma. If you care interested, please send me or Greg a slack message and we will help to get you set up.

We will close this feedback period end of day Monday, Aug. 19th. We hope to have a prototype out by Thursday Aug. 22.

@jdick @gschmidt @fali @joeldenning Please include anything I may have left out.

And by the way, which license are we using for the various pieces of the micro frontends work? One of the products is using the MIT license: https://github.com/openmrs/openmrs-esm-styleguide/blob/master/LICENSE

Do we have a criteria for which license a particular repository is going to use?

Feel free to PR any MF repos to change them to use whichever license OpenMRS prefers.

Do you see any disadvantage of using the same license as the OpenMRS platform? https://github.com/openmrs/openmrs-core/blob/master/LICENSE

Nope, I just didn’t look it up before creating the repos.

Announcement for Today’s call

Dear All,

I wanted to provide an update on the MF Squad.

The squad currently consists of Joel Denning, Fatma Ali (AMPATH), Brandon Isthenes (PIH), Angshuman Sarkar (Bahmni), Antony Ojwang (Palladium/KenyaEMR) and Andrei Stanila (Mekom). Several members from AMPATH (Jacinta, Derrick Rono, Donald Kibet, Eugene Kandie) are also beginning to contribute toward this project.

To date, we have focused on the creation of a login page, patient search, styleguide and an api module to interact with the backend. You can view all repositories on github by searching for “esm” as all MF modules use the naming convention openmrs-esm-[moduleName].

You can view the styleguide here: https://styleguide.openmrs.org/?path=/story/openmrs-styleguide--links-and-buttons

You can view our jira board at: https://issues.openmrs.org/projects/MF/issues/MF-38?filter=allopenissues

The current sprint can be seen here: https://issues.openmrs.org/secure/RapidBoard.jspa?projectKey=MF&rapidView=221

The slack channel is called Microfrontends and all are welcome to join.

Lastly, @gschmidt has been leading design efforts. He is using Figma as the design tool of choice.

We are finishing up work on patient search and are actively starting the design process for Patient Chart. This is perhaps the central feature used by OpenMRS users. It is critical that we get input from as many implementers as possible to ensure we are meeting your needs. We would very much appreciate feedback on the initial layout that Greg has been working on. It can be seen here: https://www.figma.com/file/XcyrlmDjMn2rkehroDXSvE/Patient-File-general-layout?node-id=0%3A1.

The first feature we will likely build into the patient chart is a “Patient Summary”, this is a snapshot of key information which will initially be shown to the user. This is similar in essence to what the ref app shows when you click on patient via search.

I think it would be useful to schedule a design session (if available) on Monday, Sept 9 to allow for additional feedback.

We are excited to be moving this forward and hope to attract as many of you as possible to contribute to this project.



@joeldenning, @burke, @gschmidt, @angshuonline, @jennifer, @mikejg, @mksd, @fali, @bistenes, @aojwang, @andu033, @mogoodrich, @mseaton, @paul, @janflowers, @pmanko, @dkayiwa, @ssmusoke,


Dear All,

@bistenes, introduced a new RFC for consideration on configuration. This is a critical proposal. Please take time to review here https://github.com/openmrs/openmrs-rfc-frontend/pull/14.


@angshuonline, @burke, @mksd, @mogoodrich, @mseaton, @ssmusoke