What have I been up to lately?

Last year, I began a big migration project, taking a fairly major AngularJS application and converting to Angular.

The AngularJS application was actually my first major AngularJS work - though I've dabbled in it for other projects in the past. But, it because at the end of 2015, migrating a web application with server-generated pages into an AngularJS SPA. Since then, the application has been enhanced. Users were pretty happy, and it performed pretty acceptably, which is often a challenge for AngularJS.

Anyway, AngularJS reached its "end of life" at the end of December 2021. Too bad, but our flagship web application was now running on an out-of-date framework.

We briefly toyed with the idea of seeking support from HeroDevs XLTS, but that turned out to be pretty expensive, and would not have moved us forward.

Angular, the rewrite!

So, the decision was made to rewrite the front end, converting to Angular, which will be supported for the foreseeable future. Indeed, it's hard to envisage a time when it won't be able to be used. Of course, all technologies eventually come to an end, but for Angular, it's still undergoing major enhancements, and is likely to be viable for the next decade, at least.

How big is this?

The existing application consisted of around 120 main pages, plus a bunch of dialogs and other UI - a fairly sizeable application. Estimating the conversion to Angular was, as always, a bit of a guess. I broke the application down into its screens, then estimated the size/complexity of each screen, and how long it might take to convert into the equivalent in Angular.

Technology changes

The old AngularJS application wasn't very responsive - it didn't run on mobile devices, and had a few issues on smaller screen sizes. So, I wanted to fix this in the new project.

But, to be fair, it's an enterprise application in the Healthcare HR space, and the majority of its use is on laptop or desktop machines.

Language

Of course, with AngularJS, the application was plain old JavaScript. In Angular, it's TypeScript. I underestimated the effort in converting. Even though I wrote the original code, converting to TypeScript is sometimes not an easy task, and decoding my intention of the original code was sometimes quite difficult! (Grrrr!)

The main areas of difficulty were in determining types, and the ways I'd taken advantage of JavaScript's ability to add properties to any object. Doing that in TypeScript, without reverting to "any" sometimes caused obstacles.

Technologies

For such a large project, and with me as the only developer, getting it done has been a mountain of work. So, I needed some tools to speed things up.

• NX - using a MonoRepo and structuring all the pages as lazy loaded routes made things modular. NX also has great capabilities to build custom workspace generators to help me generate a variety of code. Once I'd established patterns, I built some code generators which allowed me to quickly build out a bunch of "admin" and "reporting" screens.
• Formly - as with most enterprise applications, there are a lot of forms. Formly allowed me to very productively build forms. In fact, I built an internal API which allowed forms to be quickly built using code rather than markup.
• Ag-grid - I used ag-grid in the original AngularJS application and have made the same decision for the new project. It's a very well established component which solves a lot of enterprise issues. It's amazing that such a competent product is available for community use!
• Angular Material - as with the original AngularJS application, Angular Material is the component library I've used. It has a great set of components out of the box, and it's relatively easy to build custom components to suit niche requirements. Combined with the CDK, it's allowed me to be very productive.
• NgRx ComponentStore - The ComponentStore is an amazing piece of technology, and has allowed me to be super-efficient in developing and putting well-established RxJs patterns to work.
• Code generation of back-end types. The back end I use has the ability to get metadata for all the persistent data, so I built a code generator that builds TypeScript interfaces. This greatly improves productivity in knowing what's coming back from the back-end. And, I've discovered a few bugs in the existing application along the way too!

The end is in sight!

As I write this, I'm about 13 months into the project, and I'm pleased to say the end is in sight. There's still a bit to go, but a big chunk of it is done. I'm estimating about 3 months left to complete the remaining work. There'll be tidy up work and bug fixes after that, but it will be good to get to the end.

I've had initial feedback from the testers, and they're impressed.

What next?

Not sure. There's plenty of work for me, but I may look around for some new work.

Right now, I'm focused on completing this project, then will be off for a well-earned holiday for a month, starting in Salt Lake City for ng-conf, then up to Vancouver for a few days, then back to SLC (where my wife is going to attend a scrap-booking conference, while I meet a friend to take photos), then up to Calgary to pick up an RV and drive for 14 days through the Canadian Rockies!