Webpack, OpenMRS and Redux
Hi,
This week I continued working on DINT-77 which involves work regarding improvement of an widget provided by data integrity module. This widget name is Data Quality Widget which shows the list of rule violated by the patient data. For example lets say if patient’s death date mention is tomorrow — it is an invalid information. We need to flag it out.
It took me long to time to setup environment for this issue. Due to some recent development in related project, I wasn’t able to view the Data Quality Widget. Little background here — the widget definition was provided by Data Integrity module which integrates with the OpenMRS Reference Application. The widget loads their views from the files provided by OpenMRS CoreApps Module. So, there are multiple projects involved — making difficult to actually find out the problem. After lots of attempts, observation and help from my mentor I was able to find out actual problem.
So any typical patient dashboard widget works like that — it contain an configuration in its definition which specify the view it will use. All these views includes different libraries like AngularJS, bootstrap etc. All these libraries must be available to view when an user is viewing the page in which view is loaded. The is done by webpack — which is a module bundler. It compiles all the required libraries and the original file into one single large file — which can be used very easily. The problem I was facing was is that the webpack was saving the compiled file in wrong location, once I figured it out, the issue was itself quite easy to fix.
From this experience I learned about a nice tool called webpack and during exploring it, I came across another nice concept — Redux. This is very neat and powerful solution for Single Page Applications. I urge you give it a try, it is hard to learn it but its worth it.
Thanks!
Useful Links
