MovieSearch (Angular)

This Angular SPA uses Tailwind, Reactive Stores, Zustand, and View Models to demonstrate the beauty and benefit of reactive state management (RSM) in Angular.

Background

This repository provides a MovieSearch Angular application that demonstrates implementation and use of Zustand "Reactive Stores"

The store movies-store.ts is implemented with the Zustand library + middleware. Here are the major highlights:

Centralized, state management that
- Easily implements a ViewModel
- Supports computed properties like filteredMovies
- Easily wraps the Zustand store in an injectable service MoviesStore
Zustand Middleware:
- Persists to localstorage
- Immutable store using ImmerJS
- Support for Redux Dev Tools

`movies-store.ts`

RSM

This repository contains labs and solutions for implementing Reactive State Management (RSM) within the Angular MovieSearch application using either:

@ngneat/Elf: branch store-elf-start
Zustand: branch store-zustand-start

Concepts

Reactive State Management (RSM) uses a Facade-Store-DataService engine and publishes a ViewModel for consumption in the UI layers.

See the diagram below for illustration:

Architecture Secret

The repo "start" branch solution uses mock data with a useMovieFacade hook and does not use any reactive state management.

To implement the Reactive State Management (RSM) code, your work will require you to:

use the MoviesDataService instead of mock data
implement the reactive MoviesFacade and the MoviesStore, and
fix the useMovieFacade

As you implement the RSM code in the business layer, you will deliver significantly powerful features WITHOUT changing the UI code... that is HUGE! > All the power of RSM is hidden inside the business layer.

In fact, we can easily replace the Elf-based RSM solution with Zustand...without changing the UI or view models.

With well-defined ViewModel APIs, we have a separation of concerns (SoC) between the UI and business layers. And this SoC means that we can implement the UI in parallel with the RSM data-access engine.