2020-07-13: MFE Product Design session with UX Designer Ciaran Duffy & special focus on Design Systems

[grace (Grace Potma)]

Every two weeks or so, the Micro Frontends Squad has a Product & Design session. I’ll try to regularly post notifications about these calls before they happen; the calls are also publicly accessible and kept up-to-date on the OpenMRS calendar.

The next call is this coming Monday, and we have a special agenda: We’ll be working through ideas for Design Systems from UX Designer Ciarán Duffy (profile here; portfolio here). Ciarán will lead us through:

• What is a design system
• Examples
• Examples applied to OpenMRS
• Common Reservations
• Recommendations

When: Monday July 13, 7:30pm IST | 5pm Nairobi | 4pm Cape Town | 2pm UTC | 10am Boston | 7am Seattle

Where: https://om.rs/zoommicrofrontend Meeting ID: 501 082 750 One tap mobile +12532158782,501082750# US +13462487799,501082750# US

Background on Styleguides Discussions in this Squad

Exactly 1 year ago there was substantial discussion about whether to use a 3rd party Design System (e.g. Bootstrap, Material). The decision was made that our MFE Squad would try our own home-built Styleguide (repo here), and to see how that goes. For a good summary of the principles we’ve been following since then, see RFC #10 on Styleguides and Design Libraries. Also helpful background is RFC #9: Styleguide javascript components.

The full story of concerns and posts started here in a PR and here in Talk if you want to read about the pros and cons in detail, but the tl;dr of that conversation was that we were very concerned that getting attached to a given 3rd party library would cause massive upgrade issues/tech debt we’d have to sort out whenever the 3rd party updated.

Over the last year we’ve been trying out the OMRS style guide that we made at that time. Getting code-hitched to a 3rd party that causes us upgrade pain is still a very reasonable concern (and arguably in tension with a core promise of MFEs: making front-end updates much easier). We are not the only organization with these concerns. Many organizations decide to use their own styleguide. But, not having clear design guidance (both for code and UI) is currently slowing us down, and we need to make the best use of the wonderful dev contributors we have available. An interesting quandry!

(Others are welcome to add or correct my understanding of the background and present state.)

Notes and a visual recording will be available after as well.

[ssmusoke (Stephen Senkomago Musoke)]

After a painful migration from a OpenMRS style guide for the Reference application, 18 months convincing the community + 1 dedicated GSoC student with 4 months troubleshooting, I just wanted to point out that building an OpenMRS specific style guide for the Microfront ends is a step backwards ignoring lessons learnt.

This will constrains the ability for implementors to leverage non-OpenMRS UI designers and contractors to extends and implement UIs and places extra burden on implementors to learn the OpenMRS way, while very attractive to move fast, it becomes a weight that slows down advancement in the future.

IMO there are not enough skills, resources and knowledge within to build, maintain an internal style guide, and its better to leverage work and investments done by others in the industry.

Overall, I would recommend staying away from any design, implementation, and approaches which are OpenMRS-specific as this increases costs of onboarding as well as maintenance and evolution

[dkayiwa (Daniel Kayiwa)]

@grace

the calls are also publicly accessible and kept up-to-date on the OpenMRS calendar.

I was not aware of the calls and they are not on the OpenMRS calendar.

[ibacher (Ian Bacher)]

@dkayiwa This is referring to the (new to the calendar) bi-weekly “OpenMRS 3.0: Bi-Weekly Product & Design Session” call.

[grace (Grace Potma)]

(Thanks for mentioning @dkayiwa; the calls used to be on Wednesday mornings but because they overlapped with the OCL Squad calls we moved them to Mondays; it took a bit of schedule juggling to find an ideal regular time. I think both I moved this and made them public about 2.5 weeks ago? Thanks for your patience with me as I learn the conventions around public announcements prior to sessions - I’m trying to do more of this now I have both OMRS calendar access and a sense of how/when to announce things.)

[grace (Grace Potma)]

Thank you @ssmusoke for mentioning the history with Bootstrap. I had seen some of the comments around the recent work to incorporate Bootstrap to achieve some goals for responsiveness but your comment prompted me to go back through all the threads from 2018-2020 about Bootstrap w.r.t. the RefApp. Very helpful background and a good lesson-learned for me to keep looking for previous conversations in Talk. I agree with your concerns and it feels like a good time to re-evaluate whether we want to continue with the Storybook styleguide that was set up a year ago or move forward with an established 3rd party guide. This is just meant to restart the conversation and help us get together about considerations. I’ve been concerned already about the need for clearer designs and UI structure (as you summarized so well) and how it feels like this has been slowing the squad down so it seemed like a good topic especially as we engage more with Ciaran. We’ve been referencing the storybook styleguide but in my humble observation so far it’s not complete enough to get everyone on the same page and move quickly. Nor does it claim to do that - it sounds like the idea had been for the storybook styleguide to be a quick trial, and for us to see if we’d want to continue building it, or switch to a 3rd party.

One of the points that you mentioned quite a bit back in 2018 was the need for “Responsive functionality out of the box to support web and smartphone form factors”. This seems mission-critical for a 3.0 Frontend - I keep hearing requests for greater mobile/tablet responsiveness both from talk posts and from squad conversations (like PIH’s recent COVID experience), given how many sites’ frontline users are asking for touch-friendly interfaces and the increasing need for tablets over computers in the pandemic response.

The fact that we’ve already started using Bootstrap in the RefApp, and that there are already approaches that would help us handle React and Angular, is quite promising. If we decided we liked Google’s Material UI better there do seem to be ways of combining both (e.g. overrides to Bootstrap or this free project) - but I’m getting ahead of myself.

For those who, like me, hadn’t been fully aware of our Bootstrap history - There was a GSoC-2019 project on this topic: Bootstrap as a foundation for Reference Application UI Project (thread of updates from 2019 here. It sounds like there were a number of upgrades done where ultimately Bootstrap was used to improve mobile responsiveness but we still kept the old RefApp style guide. Is that a fair summary @ssmusoke?

(Tagging you @mogoodrich as well as I see you have the most and the most recent commits to the UI Commons repo, as well as a recent history of interest in Material vs Bootstrap (and some challenges w/ the 2.10 bootstrap-related changes), so will likely have some thoughts

[ayesh (Ayeshmantha Perera)]

Hi @grace

TBH it was not only the GSoC period we were able to merge the changes at the end of GSoC. Then issues started to pop up from here and there we had a lot of issues because of style conflicts.

Came into a place where things were stable around this year Feb:smile:. I find the below thread more useful as well.

Core Apps patient page look and feel different on desktop browsers

Hi all, There is a difference in the way that coreapps display some views as of the latest SNAPSHOT. An example is the patient page that displays as below in a full-sized browser window. It is possible that this could be breaking my end by something missing. [current_display] The demo displays this page differently. [original_display] @ssmusoke, @ayesh, could I be missing a point on the work that was completed and merged on the related project ticket RA-1592. This works probably as intended o…

[dkayiwa (Daniel Kayiwa)]

Just the for the sake of completeness, have we all got a chance to read through the discussion that happened at the RFC pull request? https://github.com/openmrs/openmrs-rfc-frontend/pull/10

[ssmusoke (Stephen Senkomago Musoke)]

@dkayiwa even if the decision was made to go custom in the RFC, we need to consider the long term impact of decisions made for “short term” gain in speed, as opposed to longer term impact

This comment thread https://github.com/openmrs/openmrs-rfc-frontend/pull/10#issuecomment-502335099 captures my thoughts and experience too

However since the community is not forced into any single approach there is choice with JSP and GSP still available

[dkayiwa (Daniel Kayiwa)]

@ssmusoke am actually NOT in favour of going custom. But just wanted to ensure that we have all read the arguments against my and your view

[ssmusoke (Stephen Senkomago Musoke)]

Oh you are very right indeed, apologies on my part firstly for not thanking you for the link to the RFC

I am hoping that there is a change of heart though, however the process and community will decide

Happy that we are on the same side

[grace (Grace Potma)]

Hi All, Here is the recording and PPT from today’s session. There was a lot of positive interest around using a third party style guide moving forward. The next step is for me to share some examples for further community discussion, and for us to follow up on this in the next TAC call on Friday w.r.t. broader implications/direction.

PPT slides: https://drive.google.com/file/d/1b0Yc_IqRnDQLskNIhWD0M7UybnYnxG1z/view?usp=sharing

(@bistenes we are interested to hear your thoughts w.r.t. if there is something we are overlooking.)