The purpose of this document is to present how we plan to approach and achieve MVP of the mobile version. The component that we want to prepare in the mobile version is Physical Inventory.

1.The goal

Overall we’ll need to answer the question: with this technology, can we deliver within a release cycle (~ 3 months / 6 sprints)?

2. Requirements and assumptions

• Is PWA implementation possible?

Yes, PWA implementation is possible.

• How can we segment out the existing UI scaffolding, so that we can piecemeal upgrade/change specific areas

Rewrite 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).

This is a task the team will have to do if they start working on an MVP for mobile.

• Can we use the hardware: camera for barcode, bluetooth for external barcode scanner, bluetooth for printer, cold-chain type interfaces. We can do this more with product and roadmap research rather than code.  

There should be no issue with accessing the camera, also all Bluetooth devices that support BLE (Bluetooth Low Energy) standard should work fine.

3. What have we done?

We have made research that allows us to answer whether we are able to achieve the goal - deliver MVP.

4. Results of a research

• Migrate Grunt to Webpack

Steps to migrate Grunt to Webpack

Changes in every module:

-create a js file and import there all of the files that should be included in the build (js, css and external dependencies, without tests)

Changes in dev-ui:

-add grunt-webpack, webpack and its modules to package.json devDependencies

-create webpack config

-add webpack config and grunt-webpack task to Grunt config (it's described in https://www.npmjs.com/package/grunt-webpack )

-add a task to create a single entry point for webpack, a js file that imports entry points (the js file with imports created in each module) form all of the modules

-remove custom tasks created to bundle css, js and html files (this will be handled by webpack loaders)

-rewrite build tasks to use webpack instead of the custom tasks

• Implement the PWA

  • Create an app manifest

  • Create and register the service worker

  • Prepare installation of PWA

• Add React to project

  • Write a physical inventory in React without replacing the 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.

• Hide unnecessary modules on mobile

  • To check if the app is launched standalone or in the browser we can use window.matchMedia('(display-mode: standalone)') and accordingly to that information change or hide elements or change routing;

5. Recommendations / Risks

• Adding a Bootstrap to the project may cause some existing styles to be overwritten - this will change the appearance of the application. If this happens, we will have to fix it so that the design of the application does not change. This work was already included in the estimation.

• Combining AngularJS with React seems risky - because during the work there may be issues that we are not able to foresee at this time.

6. Estimates

The table below shows the initial rough estimates of tasks

Time needed for full implementation (1 developer): around 80 mandays.