ng-conf 2024 Report

Last week, I went to ng-conf. Although I’d been four times previously (2017, 2018, 2019, and 2022), I wasn’t expecting to go again this time, because I had just switched jobs two months ago. Fortunately, the stars aligned for Cisco to offer me a spot, and I jumped on it.

The Cisco team and the core Angular team together

tl;dr

There weren’t many major new announcements that are likely to affect Angular developers soon, but the improvement in the framework itself seems steady and solid. Newer Ivy-enabled features like standalone components, control flow, and signals are becoming more mainstream in the community (even though there are still many who don’t know about them). The framework overall is in good hands.

The conference itself seems to be on shakier ground, with smaller attendance and fewer sponsors.

ng-conf 2022 Report

I attended ng-conf 2022 last month. It was the fourth ng-conf I’ve attended in person, though it was the first in-person round of ng-conf since COVID hit. A lot has changed in the Angular community and the world in general since the last one in 2019, but ng-conf came back strong.

How to Mark a Link as Active in Angular, Even if the Query Params Are Different

#WhatILearnedToday in Angular: how to mark a link as active, ignoring the query params

Failing Jenkins when Angular doesn’t bundle

#WhatILearnedToday in Angular: how to fail a Jenkins build if the Angular build process doesn’t bundle an app.

Angular Lazy Loading and CommonJS

#WhatILearnedToday in Angular: you can’t use modern syntax for lazy loading with CommonJS.

Writing a Generic Type-Safe ng-bootstrap NgbModal Launcher

I just published my first post on the blog for Oasis Digital, the company where I’ve worked since September 2017: Writing a Generic Type-Safe ng-bootstrap NgbModal Launcher.

I describe how I used TypeScript and Angular types to implement a type-safe general modal dialog generator in ng-bootstrap.

Beyond Tour of Heroes Talk

I gave a talk last week at Angular Lunch, an Angular user group in St. Louis sponsored by Oasis Digital (with whom I will be starting work as a developer and trainer after Labor Day).

In the talk, I start with the Tour of Heroes tutorial as a good example of a small Angular app, but then I show some of the additional steps that would be necessary to go to the next level for an enterprise-scale app, including modularization, replacing Promises with Observables, change detection, and integrating @ngrx.

I’ve posted the code and slides I use in the talk.

Unfortunately, the sound intermittently cuts out for a second or two on the recording, but I hope that the content comes through anyway.

Using enums to reduce boilerplate in ngrx

I really like @ngrx/store (especially combined with its companion, @ngrx/effects). Before I knew about it, my project team had been struggling to figure out a clean way to manage the data in a large Angular app. Fortunately, we attended a talk on Managing State in Angular 2 by Kyle Cordes, in which he walked through the different approaches to managing state (all state in the main component/splitting state between components/putting state in a service/bucket brigade/etc.) and how each of them fell short. We recognized each of those stages from our attempts to wrangle state in our app. He didn’t detail ngrx or the Redux pattern in that talk, but he pointed us in that direction.

When we started looking into the official ngrx example app as a guide, we liked a lot of what we saw, but we were also frustrated by the amount of boilerplate in the Actions and use of branching instead of polymorphism in the Reducer. I spoke with Rob Wormald at ng-conf 2017 about these concerns, and he said he knew that people didn’t like that about the pattern, but that nothing in ngrx required anyone to use those techniques; there just weren’t enough existing examples of alternatives.

In order to address these issues and provide the community with an alternative approach, I’ve released ngrx-example-app-enums to show how to reduce boilerplate with enums. I’ve also extracted the key files into ngrx-enums, a small library others could use to implement the pattern on top of ngrx.

ts-enums: Bringing Java-style enums to TypeScript

I’ve been working as a developer primarily in TypeScript for a couple years, and I really love the language. When I transitioned from Java to JavaScript in 2014, I loved the freedom and functional programming that JavaScript provided, but I missed the classes and types from Java. TypeScript has been a great intermediate language for me, giving me access to the web and functional programming, but with an optional structure that feels at home.

One area that was missing for me in TypeScript, though, was Enums. TypeScript has an Enum concept, but it’s nowhere nearly as powerful as Java’s Enums. Whereas TypeScript Enums are essentially namespaced groups of numbers (or strings, as of 2.4), Enums in Java are full classes. Not only can you create Java Enums that simply create a collection of namespaced strings, but you can also implement properties and logic for all of the instances (which I used to full effect in an article I wrote for OCI on extending them).

Comparison of Angular 2 and React

As part of my employer’s Software Engineering Tech Trends series, I have collaborated with a colleague, Mark Volkmann, to write an article on Comparison of Angular 2 and React. In the article, we started with a small ToDo app that Mark wrote for an Angular Lunch meeting to demonstrate React. I ported the app to Angular 2, and then we compared and contrasted the implementations.