element-hq / element-hq/element-web
[Initiative] MVVM Migration
- Dominant language
- TypeScript
- Stars
- 13.5k
- Forks
- 2.8k
- PR merge metrics
- PR metrics pending
Description
### Context 💡
The MVVM pattern helps cleanly separate an application's business and presentation logic from its user interface (UI). Following on from initial experimentation with MVVM in a [draft PR for demonstration purposes](https://github.com/matrix-org/matrix-react-sdk/pull/12518) we applied then applied a simpler iteration of the architecture(No Rx, or extracting the sdk from the VM) it in production to the implementation of [the new member list](https://github.com/element-hq/element-web/pull/28874).
Our documentation/best practice on MVVM is at [element-web/tree/develop/docs/MVVM.md](https://github.com/element-hq/element-web/blob/develop/docs/MVVM.md)
The purpose of this initiative is to track our application of the architecture across the element web codebase.
The process of MVVMing involves moving it moving to our [shared components package](https://github.com/element-hq/element-web/tree/develop/packages/shared-components) which insures it's de-coupled from the element web application and meets out current best practice for views. These shared components are hosted in a storybook [here](https://shared-components-storybook.pages.dev/).
To demonstrate it's re-usability an compatibility with the [matrix-rust-sdk](https://github.com/matrix-org/matrix-rust-sdk) we also integrate the components into our [aurora](https://github.com/element-hq/aurora) our experimental app.
### Application of MVVM on element-web
| Component | In [Shared Components](https://shared-components-storybook.pages.dev) | In [Aurora](https://github.com/element-hq/aurora) |
| -------- | ------- | ------- |
| **Phase 1** | | |
| Room List | ✅ | ✅ |
| **Phase 2** | | |
| Right Panel | 🚧 | |
| Timeline | 🚧 | |
| Room Header | | |
| **Phase 3** | | |
| Space Panel | | |
| Login | | |
| Settings | | |
Contributor guide
Assessment
This issue has not been assessed yet.