A showcase Vue.js application to spread the word on robust SPA development.
The working application is available at https://interferenc.github.io/breweries.
There are some really common problems with most SPAs. The purpose of this application is to show an example on how to handle these problems:
- losing page level state when URL is shared or bookmarked
- concurrent async operations cause flickering or unanticipated state
- runtime errors breaking the application
- validate all incoming data to enforce contracts and avoid impossible states
- separate business logic from the presentation layer
The design principle when setting the structure of this application was The Clean Architecture.
The implemented layers are:
- Entities
- Services
- User Interface
The most important guiding principle is that no component in any of the layers should depend on anything in a higher layer.
Entities are all "things" the application works with: fetches them, creates them, saves them.
All business rules about these entities should also be part of this layer, like:
- validations
- mutations
- transformations
Services can depend on entities and other services only. They are responsible for moving data to and from the application, as well as enforcing related business rules like:
- packing and unpacking all incoming and outgoing data
- validating contracts: making sure the incoming data is what was promised
- handling transport errors: making sure a temporary network error does not break the application
All the user interfaces the users interact with are in this layer. It is very easy to accidently implement business rules inside this layer, but that should be avoided. Whenever possible, business rules should be defined in the Entities and Services layers.