1b9be8fe2d
- Migrate `StatefulVue`:
- Introduce `UseCollectionState` that replaces its behavior and acts
as a shared state store.
- Add more encapsulated, granular functions based on read or write
access to state in CollectionState.
- Some linting rules get activates due to new code-base compability to
modern parses, fix linting errors.
- Rename Dialog to ModalDialog as after refactoring,
eslintvue/no-reserved-component-names does not allow name Dialog.
- To comply with `vue/multi-word-component-names`, rename:
- `Code` -> `CodeInstruction`
- `Handle` -> `SliderHandle`
- `Documentable` -> `DocumentableNode`
- `Node` -> `NodeContent`
- `INode` -> `INodeContent`
- `Responsive` -> `SizeObserver`
- Remove `vue-property-decorator` and `vue-class-component`
dependencies.
- Refactor `watch` with computed properties when possible for cleaner
code.
- Introduce `UseApplication` to reduce repeated code in new components
that use `computed` more heavily than before.
- Change TypeScript target to `es2017` to allow top level async calls
for getting application context/state/instance to simplify the code by
removing async calls. However, mocha (unit and integration) tests do
not run with top level awaits, so a workaround is used.
3.6 KiB
Architecture overview
This repository consists of:
- A layered application.
- AWS infrastructure as code and instructions to host the website.
- GitOps practices for development, maintenance and deployment.
Layered application
Application is
- powered by TypeScript, Vue.js and Electron 💪,
- and driven by Domain-driven design, Event-driven architecture, Data-driven programming concepts.
Application uses highly decoupled models & services in different DDD layers:
- presentation layer (see presentation.md),
- application layer (see application.md),
- and domain layer.
Application layer depends on and consumes domain layer. Presentation layer consumes and depends on application layer along with domain layer. Application and presentation layers can communicate through domain model.
Application state
State handling uses an event-driven subscription model to signal state changes and special functions to register changes. It does not depend on third party packages.
The presentation layer can read and modify state through the context. State changes trigger events that components can subscribe to for reactivity.
Each layer treat application layer differently.
- Each component holds their own state about presentation-related data.
- Components register shared state changes into application state using functions.
- Components listen to shared state changes using event subscriptions.
- 📖 Read more: presentation.md | Application state.
- Stores the application-specific state.
- The state it exposed for read with getter functions and set using setter functions, setter functions also fire application events that allows other parts of application and the view in presentation layer to react.
- So state is mutable, and fires related events when mutated.
- 📖 Read more: application.md | Application state.
It's comparable with flux, vuex, and pinia. A difference is that mutable application layer state in privacy.sexy is mutable and lies in single "store" that holds app state and logic. The "actions" mutate the state directly which in turns act as dispatcher to notify its own event subscriptions (callbacks).
AWS infrastructure
The web-site runs on serverless AWS infrastructure. Infrastructure is open-source and deployed as code. aws-static-site-with-cd project includes the source code.
The design priorities highest security then minimizing cloud infrastructure costs.
This project includes GitHub Actions to automatically provision the infrastructure with zero-touch and without any "hidden" steps, ensuring everything is open-source and transparent. Git repositories includes all necessary instructions and automation with GitOps practices.
GitOps
CI/CD pipelines automate operational tasks based on different Git events. bump-everywhere enables this automation.
📖 Read more in ci-cd.md.
