ReactJS OWA example

I took some time last week to play around with ReactJS, and I created an OWA example at https://github.com/djazayeri/openmrs-owa-reactexample

If this is something we want to support, we need to make some changes to the yeoman generator (which currently lets you start with jQuery or AngularJS), e.g. to add the react preset to webpack.

All in all I found it pretty easy. ReactJS only handles the view/presentation layer, and it makes it easy to write components (actually, you can only write components). Based on this very limited experience, I think I prefer react’s model of “writing JS functions that return HTML” as compared to angular’s usage of ng-show/hg-nide/ng-repeat.

Next I will refactor it to use a Redux store, so here is a permalink to the current simpler code: https://github.com/djazayeri/openmrs-owa-reactexample/tree/caadf15be33ff26aabe47eb3600f65fd1043530c

FYI, on the Bahmni distribution our plan is to migrate incrementally in the direction of react, and use redux to get a better handle on having shared application state that can be modified by different pluggable apps and components (some of which are legacy ones written in Angular 1). And we’ve started our first efforts in this direction. We’ll share more once we have something demonstrable to show!

5 Likes

Today I modified this example to use Redux for state storage.

It actually took me the entire day to wrap my head around some of this. My biggest confusion was that using react-router and redux together is awkward (and I was blocked for a few hours until I found the onEnter option). React+Redux is a more complicated architecture than just, and though the react-redux library makes the connection pretty painless, one does need to set conventions for smart container components vs presentation components vs the wrappers that you generate with react-redux. And I didn’t do this in my example.

I definitely see how the Redux Action -> Reducer -> Store data architecture is good for large-scale applications, but it takes some getting used to.

About routing, I will say that deep-linking just works in this example without me having thought about it, whereas I’ve rarely gotten it work right with angular, even in production code.

My changes are here: https://github.com/djazayeri/openmrs-owa-reactexample/commit/ff71508bbf4aea0d947de37daf438b65c3f1e7bc

1 Like

@darius, would you use Redux for any new ReactJS project i.e. include it in OWA generator?

For those who like me had never heard of Redux, I found this useful: http://www.youhavetolearncomputers.com/blog/2015/9/15/a-conceptual-overview-of-redux-or-how-i-fell-in-love-with-a-javascript-state-container

It’s all really cool, but I’m not sure I fully understand where the benefits kick in :no_mouth: I guess I should debug your project to understand but I can’t do now.

It’s great that you’re producing this sample OWA, very useful.

1 Like

Maybe it’s just for SPAs.

I saw a technical presentation about Redux being used both in the UI and the backend. The backend part blew my mind :open_mouth:

Bahmni is going to be doing a UI rearchitecture based on using Redux as a shared store of application state, that can be used both by React apps/components, and Angular apps/components. (This is because we have a large amount of code written in Angular already, but want to gradually move to React without needing to rewrite everything.) @bharatak is spiking on this now, and he’ll share news when he’s ready (I’m really spoiling his surprise here).

I personally needed to get up to speed so that I can intelligently discuss this with him, which is why I did this example here.

So, I don’t know what I would recommend to a general OpenMRS developer looking to do a single OWA, but at some point we should have some Bahmni code using react+redux that can be leveraged against plain OpenMRS + REST + OWA.

I’ll submit a PR shortly to the generator that lets you bootstrap an OWA with just react, or with react+redux.

FYI the latest Yeoman Generator now lets you create a ReactJS or ReactJS+Redux OWA.

The generated project structure isn’t necessarily best-practice, it just copies what I did in my example here. But it saves you the trouble of figuring out how to set up webpack to handle jsx files, at least. :slight_smile:

2 Likes

I have extended the example by @darius. This may be easier to use as a starter for new react-redux OWAs. Uses axios, logger, decorators, and react-layout.

2 Likes

@beapen awesome! :smile:

1 Like

@beapen, any interest in adding your boilerplate to the generator?

@dkayiwa Thank You!

@pascal Sure. (I don’t know much about generators. I only know how to use them)

1 Like

@beapen, the authoring docs are here, but there are already some React temples here that you can modify/extend to incorporate your awesome contribution!

1 Like