Design Forum 2018-05-30: UI Dev Conventions

Wednesday’s design forum will be a discussion on UI Dev Conventions. If you have a topic you would like to discuss during the call please post it at or join us from 6-7 pm UTC.

The next design forum on Monday, June 4 @ 4-5 pm UTC - OPEN FORUM

To join the call using Audio, Chat, & Screen Sharing please use the latest Firefox, Chrome, or other WebRTC-compatible browser and go to:

From the proposed topic:

We had a good call on UI Dev Conventions today. Primarily, we discussed the current state of UI development in OpenMRS and started to identify some next steps for UI development for the community. Original notes are available here.


  • Started with SolDevelo on UI Commons
    • Uses Angular 1.x
    • Styling for Reference Application
    • Bundled, grew to a few megabytes
    • Looking back, not sure this is the “right path”
    • Angular 2.x, 4.x, etc. have since come out
  • Created web style guide
    • Pulled CSS from UI Commons
    • Deployed via NPM
    • Can work with Angular or React
    • Ideally, RefApp would use it as well
  • SDK
    • Uses yoeman generator
    • Will create an angular 1.x app
    • Will create a react (± redux) app
      • not much in it
  • Modules can include an OWA for their UI
    • earliest example: metadatamapping module
    • idgen
    • most recent example bed management module
      • uses yarn instead of npm so it doesn’t use the SDK to build, but directly uses maven plugins
    • Best practice (assuming NPM is used) would be to use SDK to build owa as done in metadatamapping module
  • Currently OWAs don’t have a way to add themselves to the landing page
    • discussed on Talk
      • the “practical” solution would be to allow OWAs to register extensions
      • the “correct” solution would have OWAs include assets needed to be presented as an app and then create the functionality within RefApp to deploy them and decide where they show up

Next steps

  • Defined naming convention for libraries
    • openmrs-(angular|react)-components
  • Create libraries for base components
    • Created base for sharing React components (will rename to follow conventions)
    • Extract shared components from UI Commons into openmrs-angular-components
      • only prioritize this if someone is undertaking a significant Angular 1.x effort
      • or consider extract-and-refactor to convert these into another library
  • Refactor reference application to use @openmrs/style-referenceapplication
    • We could ackle this as we create react-based login & landing pages for RefApp
  • SDK should support building OWAs via yarn (or at least document how to do this without SDK by pointing to bedmanagement module)
  • Begin collecting links to good examples of best practice for UI development
    • For module development: metadatamapping
    • For OWA development:
      • start with SDK generator (current react template lacks testing framework)
  • Add testing to templates generated by SDK
    • Enzyme (per TW tech radar: adopt), maybe alongside jest
  • Revisit OpenMRS Radar soon and include UI development guidance within it
1 Like