Notes on “Tour of Heroes” Tutorial: Setting up for CRUD

It was very novel for me to learn how single page applications (SPA) written in Angular handle navigation with help of a router. In contrast, the final section 6 of Tour of Heroes tutorial is more of a review. “Get Data from Server” is certainly a very important part of any web app, but it isn’t as novel for me as the concepts have been covered in other contexts before. For example, the Ruby on Rails Tutorial.

The pattern here is something I know as Create+Read+Update+Delete or CRUD. The vast majority of applications can be fit into a CRUD mold, it just depends on how far we’re willing to stretch the concepts. It’s popular enough that many frameworks like Ruby on Rails have scaffolding scripts optimized to make it easy to build CRUD applications. In fact, some projects fit CRUD so perfectly they don’t need any coding at all, and can be done with tools like Amazon’s Honeycode.

Because CRUD pattern pops up so often, this final section of the Angular tutorial prescribes how to implement them with tools of the Angular framework. Again RxJS features prominently here, helping to deal with the asynchronous nature of network communications.

The functionality here is also getting complex enough we can’t always get a warning about problems at compile time. I saw multiple error messages that were not particularly helpful in tracing to the underlying cause. One of them was “cannot GET” which is not specific enough about why the data retrieval operation failed. And even at compile time, less-than-helpful errors have also started popping up. “File does not exist” is frustrating when the named file actually does exist, but I eventually learned this actually indicates a compile error. When is an error in the file causing it to fail one of the compilation steps, that file would be unavailable to later steps which then complains of “File does not exist”.

Some of these errors were of my own doing, because I choose to specify --strict when creating this project. Unfortunately the copy-and-pasted tutorial code does not following strict TypeScript rules, and so I will be on my own for fixes. I’ll revisit that topic for later, in the meantime I just fix things up just enough to avoid “File does not exist” problems, even though that meant living with a lot of warning messages in the build window. On the upside, I’m starting to learn to identify which errors are --strict violations and which errors I need to fix as I get started with (R)ead and (U)pdate operations.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s