...
Overall we’ll need to answer the question: with this technology, can we deliver within a release cycle (~ 3 months / 12 6 sprints)?
2. Requirements and assumptions
...
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 inventory
Write 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.
...
TASK | ESTIMATION |
1.Migrate Grunt to Webpack | 96 |
2. Implement the PWA | 29 |
3. Add Bootstrap to project | 48 |
4. Adapt existing necessary pages to be responsive | |
a. Design existing pages for mobile | 19 |
b. Hide unnecessary modules on mobile | 29 |
c. Prepare the login screen to be responsive | 10 |
d. Prepare the navigation bar screen to be responsive | 29 |
e. Prepare the home page to be responsive | 7 |
6. Create the stock management module in React - Physical Inventory | |
a. Add React to project - create main component | 22 |
b. Change Make Physical Inventory list to be page responsive | 19 |
c. Design Physical Inventory draft page to be useful and user-friendly | 29 |
d. Implement the form on the Physical Inventory page | 48 |
e. Cache the Physical Inventory | 96 |
f. Implement the product dropdown on the Physical Inventory page | 48 |
g. Implement the Reasons modal on the Physical Inventory page | 38 |
...