This Books Site Is Surprisingly Complex

I thought up the idea of a little site that has an editable list of books as a basic dummy site to test some features of Angular and other SPA frameworks with. What turned out to be interesting is that, even though it’s woefully short on features, it exercises more of Angular’s capabilities than I thought it would need.

First off, I wanted to make it a genuine SPA, so I’ll need the angular-route package. Not too bad, just need controllers for each page and embedded HTML templates, which webpack turns out to be able to create for you with the ngtemplate loader.

I suppose it really started to get tricky when I decided to handle the security in a more realistic way. The Postgrest backend required a JWT token instead of a conventional cookie for authentication, and I decided to set things up properly to have a guest and editor access level to it and an actual login step. This means a Service to manage the login state and common code, pulling in the LocalStorageModule to make the login state persistent by storing the token, and building a directive to hold the login elements.

Then you realize that you now have global state - whether you’re logged in, and as what role - that at least some of your pages depend on, such as for whether to show the button for editing a book. So you have to set things up so that those views can update dynamically when that state changes - you can log in or out at any time, and the display will change to reflect that. Luckily, Angular mostly handles this for you, so I just had to set up the view to get the editability state from the security service on each digest cycle / refresh, and it seemed to work.

Then you start trying to put in some nice UI touches, like if you have a route change or HTTP error, then log out, because your token was probably corrupted or invalidated. Except that only event handlers know that, so now you have to trigger the login directive to refresh by broadcasting and receiving another event.

Of course, I haven’t really tested this little app, so there’s probably a bunch of other tricky UI edge cases hiding around in various places, but even so, I’m surprised by how much of Angular I needed to use to get this dinky little app with only 2 resources and barely any features to work mostly right. It’s like SPAs are still in their infancy, so we don’t have a lot of really well-polished tools around to easily make apps that are as good as desktop apps. That said, I have been working on a React-Redux version, and while there are some tricky points I’m still working on, Redux made it really easy to manage this state part once I got it all figured out.