50% less code: RxAngular vs StateAdapt 2. Angular Movies 1. App Shell
Tags: angular, stateadapt, rxangular
Published: 2022-10-27 11:09:44

---
title: 50% less code: RxAngular vs StateAdapt 2. Angular Movies 1. App Shell
published: true
description: I implemented the Angular Movies app shell with StateAdapt and the code decreased by 50%. 
tags: angular,stateadapt,rxangular
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc8jx7sge5fuj0mnl3lb.png
series: RxAngular vs StateAdapt
---

[YouTube video for this article](https://www.youtube.com/watch?v=R5e6XCBKYd8)

I implemented the Angular Movies app shell with [StateAdapt](https://github.com/state-adapt/state-adapt) and the code decreased by 50%. 

![Todo MVC UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iujq796b6rmbpgk247r.png)

## What made the difference?

The app shell state was very simple. It was just a boolean for whether the sidenav was open or not.

This made a small difference in RxAngular vs StateAdapt, because RxAngular has to have an object to manage, but StateAdapt can manage anything, so I just had the state be a boolean. It's easy to change later if needed. 

Another difference was that RxAngular was wired up in a way where a URL change would cause a method to be called as a side-effect, when it could have been reactive even in RxAngular. I fixed that in StateAdapt though, so I'm sure RxAngular could have been a couple of lines less if it wasn't done that way. But I will always make sure things are as reactive as possible when I use StateAdapt.

Here's the main code for StateAdapt:

```tsx
  urlChange$ = this.router.events.pipe(
    filter((e) => e instanceof NavigationEnd),
    map((e) => (e as NavigationEnd).urlAfterRedirects),
    distinctUntilChanged(),
    toSource('urlChange$')
  );

  sideDrawerOpen = adapt(['app-shell.sideDrawerOpen', false, booleanAdapter], {
    setFalse: this.urlChange$,
  });
```

In RxAngular, that `false` had to be this:

```tsx
    this.state.set({ sideDrawerOpen: false });
```

In the template in StateAdapt, I just called the source that's available by default in the `sideDrawerOpen` store, but RxAngular has to react to an observable:

```tsx
    this.state.connect('sideDrawerOpen', this.ui.sideDrawerOpenToggle$);
```

Both implementations have the exact same number of imperative statements: The template has to call `.next()` in one case, and `set()` in another. 

The weirdest part in RxAngular was this:

```tsx
    this.effects.register(
      this.router.events.pipe(
        filter((e) => e instanceof NavigationEnd),
        map((e) => (e as NavigationEnd).urlAfterRedirects),
        distinctUntilChanged()
      ),
      () => this.closeSidenav()
    );
// ...
  closeSidenav = () => {
    this.ui.sideDrawerOpenToggle(false);
  };
```

That was the only place the `closeSidenav` method was invoked. But that "effect" could just have easily been connected like this:

```tsx
this.state.connect('sideDrawerOpen', urlChange$, () => false);
// I might be wrong on the exact syntax, but I think that's right.
```

And all of that was in an `init` method that was called imperatively from an `ngOnInit` method, which was itself called imperatively by Angular:

```tsx
init() {
// ...
// RxAngular connections, `set`s, effects
// ...
}
```

## Conclusion

For a full comparison, see [this pull request](https://github.com/tastejs/angular-movies/compare/main...mfp22:angular-movies-state-adapt:state-adapt?expand=1) (but please don't open it). 

RxAngular is still currently my top pick for state management in Angular. [StateAdapt](https://github.com/state-adapt/state-adapt) is still a work in progress. I need to apply it to many more projects before I can have the confidence to release version 1.0. If you think it has potential, I'd appreciate a star, and I'd love for you to try it out and share your thoughts.

Thanks!

---

[Repo](https://github.com/mfp22/angular-movies-state-adapt/tree/state-adapt)

[StateAdapt](https://github.com/state-adapt/state-adapt)

[RxAngular](https://www.rx-angular.io/)

[Twitter](https://twitter.com/mfpears)