Because your state management code should be domain-agnostic.
| Package | Installation |
|---|---|
| @derxjs/view-model | npm i @derxjs/view-model |
| @derxjs/reducer | npm i @derxjs/reducer |
| @derxjs/react | npm i @derxjs/react |
| Example | Vanilla | React | Angular |
|---|---|---|---|
| Simple List Component |
|
|
|
| Intermediate Tic Tac Toe Component |
|
|
|
Your state management code should not depend on which framework or tools your project happens to be using at the time.
@derxjs/view-model is all about first-principles thinking and problem-solving. The pattern enforced by this package requires you to break down your system - regardless of scope - to some set of inputs (preferably represented as RxJS Observables!) and expose a single Observable of your ViewModel as an output.
Future packages on the roadmap will provide utilities for implementing this pattern (@derxjs/reducer 👀), as well as utilities for plugging it into popular front-end frameworks (@derxjs/react 👀).
We solved this a long time ago. Programming to interfaces lets us put a joint in our workflow that allows for parallel work to be completed by multiple developers and lets your team play to their strengths.
This allows for easy transitions into other implementations, frameworks, as well as implementing the facade, adapter, and proxy patterns from the Gang of Four.
We're not here to take a shot at the king (👑👀) - we're just here to help out where we can!
The @derxjs/view-model package is designed to work with any other state management frameworks that can expose state or events as an Observable, making it a great compliment to any existing code in your codebase.
Domain-agnostic first-principles-based code will never go out of style 🌲.
As long as JavaScript is the language of the web, your state-management code will be valid.
Go ahead, change to that trendy new framework. Your @derxjs code will still work just fine :).
The DeRxJSViewModel type is the E = mc^2 of state management.
Deceptively simple, but elegant enough to encompass any && all of your state management requirements.
Embrace TDD, using timeline testing to test your code with a whole new dimension of precision.
On the roadmap for @derxjs is a timeline test generation GUI tool that will take your Typescript interface code, and allow you to "draw" hypothetical timelines of events from your inputs - specifying what the output timeline for each hypothetical should look like.
This tool will generate .spec.ts files that you can paste directly into your repos for easy TDD, and coding the way we were meant to.
- @derxjs/view-model package ✅
- Article on TDD and implementing DeRxJS View Models ✅
- Article on using DeRxJS View Models in different Frameworks ✅
- @derxjs/reducer package (TBD; beta available now) 🚧
- @derxjs/react package (TBD; beta available now) 🚧
- Timeline Test Code Generation Tool (TBD)
- @derxjs/selector package (TBD)
- Ai-Driven DeRxJS Code Generation (TBD)