Angular Lesson 2 (Part 2)

This is a direct continuation of Angular Lesson 2.

Ultimately, I just wanted computed values in Angular—like Vue has computed values. A getter function that does some computation on the fly every time its property is accessed is not the same thing. Vue’s computed values intelligently watch for changes to the relevant data, and they only compute the computed value again if one of incoming values has changed.

Googling and such led me to MobX and to the package mobx-angular. Mobx-angular purports to be a connector that makes MobX work well with Angular. On first inspection, I did not like the look of mobx-angular because nobody has touched anything but the readme file in years, so I tried to see if you can just directly use MobX in Angular out of the box. MobX itself is a large, robust, professional, up-to-date project.

Actually using MobX in real life for some tiny little widget like I was making would almost definitely be a bad idea. MobX is quite large, and if I only want it for the sake of mimicking computed values, that may not be a good enough reason to pay 37 kb gzipped. That said, I also wanted to learn a little about MobX for its own sake, so I dove in.

MobX is a framework-agnostic library for state management, but after days of sifting through docs and online examples I do strongly get the sense that people like to use it with React. React is outside the scope of this blog series.

On the face of it, it appears you can simply import these observable and computed functions from mobx and they would solve exactly my problem. import { observable, computed } from 'mobx';. Then you can use them as decorators, or so one thinks. See Angular Lesson 2 for a description of what actually happened.

After all this, I reluctantly took another look at mobx-angular. Let me explain why I’m so skeptical and confused by mobx-angular. I find many references to it online, and according to the npm website, it is downloaded 20 thousand times a week. However, its own github page https://github.com/mobxjs/mobx-angular as of this moment clearly says it is failing to build. On top of that, based on the times since anything was last updated, it looks like this package has fallen into neglect. Code that is downloaded thousands of times per week should be maintained. I’m really not trying to assassinate the code author here. Clearly he wrote something people like, but something is fishy, so I decided to investigate further.

A nice thing about npm packages with source code published on Github is that you can pull the source. You can try to build it yourself. You can execute tests yourself. Here’s what I found when I tried to pull and build mobx-angular: pages and pages of warnings about dependencies being deprecated, several outright errors. The build script did produce something, but when I tried to execute the package’s own testing suite, it caused a fatal error. I’m not saying the tests failed. I’m saying running the test suite failed to execute to completion.

I did that investigation and decided that until somebody brought the source code up to standards, I would never trust this package enough for use in anything important. Eventually, however, I did decide to just try the pre-built version of mobx-angular that is available published to npm. As of this writing, it is version 3.0.1.

Simply put, it works. At least it works in one example that I built. I had to make a few adjustments to my code. I did not have to change my function definitions. I was still able to simply declare things @observable or @computed using those nice, declarative decorators. But in the template I needed to add a directive up top like this <div *mobxAutorun>. Also over in the app.module.ts file I had to import MobxAngularModule and add it to both the imports and the exports arrays inside the @NgModule decorator. I really have no idea what that does. I was following a post written by the mobx-angular author here:https://github.com/mobxjs/mobx-angular/issues/42.

I don’t plan to maintain ignorance on what these things do, but let’s not get into it just this second.

After I made these adjustments, I found that altering a state variable unrelated to my computed function did not cause the engine to re-compute. That is what I was chasing. Huzzah! I like that. But this does not make up for shaky source code long left in disrepair.

Mobx-angular is not a large project. I see 4 small source files and an MIT license. I’m strongly considering fixing this package myself. It sounds like a fun little journey where I get to learn a little more about Angular, typescript directives, MobX, and—ultimately—whether Adam Klein will let me write to his project or if I’ll fork it. No promises, but that sounds like an interesting Lesson 3 to me. Maybe lesson 5.

[Update: Angular Lesson 3 can be found here, but it is not a direct continuation of this post.
https://adamcross.blog/2019/04/23/angular-lesson-3/ .]