...
How can we segment out the existing UI scaffolding, so that we can piecemeal upgrade/change specific areas
Using React and rewriting some parts of the application will allow us upgrade/change specific areas in OpenLMISRewrite some components in React without removing the Angular code and use router to display the correct components - React on mobile and Angular on desktop.
Mock out and update our UI styleguide so that we have mobile-first interactions defined for every desktop web pattern we have in and around physical inventory (i.e. around is the journey to it, such as login and menu navigation).
...
Implement the PWA
Create an app manifest
Create and register the service worker
Prepare installation of PWA
Add React to project
Replace Angular with React in physical inventoryWrite a physical inventory in React without replacing it (using the router)If it will work as expected, we would replace the Angular version with React Angular
Display React version on mobile and the old Angular version on desktop
Use router and window.matchMedia('(display-mode: standalone)') to display the correct version
Add Bootstrap to project
We propose to add Bootstrap because it supports interactions that work well both on mobile and desktops. It will help a lot in creating a responsive mobile application.
...