element-hq / element-hq/element-web

[Initiative] MVVM Migration

Open
#29,632 0 comments 0 reactions 0 assignees View on GitHub
A-Developer-Experience T-Task
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.