SteGriff

Blog

Next & Previous

My First (Modern) Angular Thing

Last month I started a new job at NSG Group, having moved on from Paymentshield. I knew coming into the job that new Angular (that is, 2+) was going to be the order of the day.

Aside: two jobs ago, at Village, we wrote a lot of AngularJS (1.x) and when I left in 2018, they were just beginning to use Angular 2+ on new customer projects. Which I didn’t touch. And honestly new Angular was a little unproven at the time and I was allergic to some of the concepts. Since then I’ve really gotten into Vue which is basically what AngularJS would have become if it hadn’t completely changed paradigm on the way to version 2 (and in fact Vue was written by somebody who was at Google at that time and - I believe - shared my skepticism about the new direction for Angular)

ANYWAY

I knew I should have a passing familiarity with Angular and at the very least how to use the toolchain to make components etc. So I took a few hours one weekend to throw together a project for fun, and that project is:

Angular NFL

This project is not impressive. It is here to look back on in two years as “where I started” so that I can throw my head back, and laugh, and sigh a long sigh 💨

Source code: https://github.com/SteGriff/angular-nfl Live site: https://angular-nfl.netlify.app/

Was it helpful?

Yes… having a passing understanding of the ng utility and roughly how components and typescript files hang together was invaluable. I didn’t dig into anything reactive or observable and that’s been my main knowledge gap so far.

First impressions of Angular

It feels like they threw the kitchen sink at it a bit, in that, not only does it come “batteries included” with so many batteries, they couldn’t resist including every single special character on the keyboard into their template syntax. I did laugh out loud to myself the first time I saw the banana in a box two-way binding syntax which is just… something else.

A major pain point is build times. Vue’s greatest strength (to me) is it’s sprinkleability, so I can drop vue.min.js into a project like it’s jquery. No dependencies, no build time.

The build time for an empty Angular project is over 10 seconds on my Surface Pro. wat.

And lastly, I’m sure this is a performance thing, but what is up with having to attach an event handler to an input to make it reactive?

In Vue you write:

<input v-model="myText">
<p>{{myText}}</p>

…and as the user types into the input, the p content will update. That doesn’t happen in Angular unless you add a weird no-op keyup handler onto the input:

<input #myText (keyup)="0">
<p>{{myText.value}}</p>

Their user input docs page specifically calls this out:

This won’t work at all unless you bind to an event. Angular updates the bindings (and therefore the screen) only if the app does something in response to asynchronous events, such as keystrokes. This example code binds the keyup event to the number 0, the shortest template statement possible. While the statement does nothing useful, it satisfies Angular’s requirement so that Angular will update the screen.

And if that’s not a nasty hack, then I don’t know. And since the above is kind of my “hello world” for a new web framework, well, it took some time to find that little gotcha and figure out why it wasn’t working.

Anyway it turns out all of this is moot because nobody uses the native… whatever this is… of Angular, because there’s a form builder of some kind for all serious work (and as I write this sentence it occurs to me that maybe “mistakes were made” in the design of the basic framework if this has to be true)

But! It’s new and unfamiliar, so of course as a human being at the point of maximum ignorance, I would resist it.

I am currently getting anxiety sickness from NgRx/RxJs observables so this is my… tiny act of rebellion…

Let’s see how the next few months go 😅