Page Comparison

...

Since we are initally wrapping ui.router, we can leave the existing modules and update them to take advantage the wrapped router functionality in an incremental manner. This will also ensure backwards compatibility until the OpenLMIS-UI drops support for AngularJS (which will happen eventually).

Module Types

In the OpenLMIS-UI, we try to keep each module focused on a single function. Single focus modules help keep code organized, and makes it simple to not include sections of functionality by ignoring those files during the OpenLMIS-UI build process.

...

Most data resources will implement a local database so that the resources are available offline, but some resources such as orderables might not have functional requirements to function offline.

Domain Objects

General idea here is that we want our objects to have multiple methods, so that we can always extend an object method. These methods can implement business logic that does validation, or interact with their parent data resource to send data back to the server.

Internally, like ngResource, all domain objects should have a toJSON method that is used to store a domain logic in a local database or send it to an OpenLMIS Service.

These objects will still have properties, which should be directly accessed/mutated in forms.

Anything related to an object's state should be a method. These methods will internally reference Data Resource Factories. This allows all workflows that change an object's state to be decorated from a single place, which allows an implementer to add or adjust how that workflow takes placeDomain objects implement business logic and interactions with data resources with the same terminology that is used in OpenLMIS functional documentation. This is helpful because unit tests on this domain object can be understood by stakeholders, which helps maintain clear communication between developers and stakeholders. These methods implement business logic and interact with data resources, which helps hide the implementation details of the domain object. Hiding the implementation details of domain objects from controller-level methods results is more maintable code and easier extension by implementers.

To ensure that our domain objects work well in the AngularJS view methodology, all object properties will be directly accessible and mutatble.

The methods for domain objects will either return an immutable value or resolve a promise that returns a new instance of the domain object. Immutable return values help avoid accidental manipulation and accidentally updating the DOM.

All methods on a domain object must not take any arguments, which will aid testing and reasoning about these domain objects.

Usability & Affordance

These are things that improve the OpenLMIS-UI experience, and include directive, components, and CSS. 

...

Route and data modules should never be allowed to add CSS styles. This could cause issues if one page is supposed to look or act different than another page, but having divergent designs per page makes a UI feel inconsistent (so we should avoid this).

Example Page Load Process