It's "Just UI", Isn't It?

I was working for years as a backend developer when we decided to go "full-stack" as a team. We were all Java backend developers before but the growing need for web UIs in the product we were working on and the lack of frontend developers made us decide as a team that we want to expand our tech skills. We didn't want to depend on other teams.

First, one of our team members volunteered to self-train on AngularJS which was the way to go at that time. She was doing an excellent job for quite some time. Then, one by one, we started also learning that tech stack.

I was one of the last that started learning when we already migrating a huge code base for our single page application consisting of a dozen UI repositories gradually from AngularJS to Angular.

In the middle of that, I was working on a little existing master/detail that needed to be migrated from AngularJS to Angular. It had a couple of input fields, nothing too complex, I thought. But I was wrong.

I was actually hearing the phrase "it's just UI" from product owners a couple of times in the past and I knew what they though because I thought the same. How difficult can it be to build the UI when the "real" work is done in the backend? Especially when you already got a component library like Material and we got company styles ready to use. It should be just sticking together the existing stuff and you'll be done.

Here is how wrong I was:

First, in the past years, we moved a lot of logic into the front-end. For a couple of use cases, the backend was degraded to a better data base. Then, we had a hybrid stack of Angular and AngularJS stiched together like Frankenstein's monster with some own libraries and cli which made things really hard and slow. JavaScript code that was existing in the AngularJS part, needed to be rewritten in TypeScript and Angular.

It turned out, that we didn't have any existing code that fetches users from the backend which we needed to auto-complete in the input fields of the form. In some fields, multiple entries were allowed. Some required a static list of possible options, some required backend filtering as you type because the data set was simply to large to fetch all at once. Some required to also enter free-text along pre-populated entries and some required a custom client-side validation. So we needed an auto-completable backend-filterable validatable chip list component for this use case which - suprise, surprise - wasn't there yet. So we needed to write that. We already used existing Angular Material components but it was still a lot of code and even more tests necessary to cover all the egde cases. While building and testing, we saw that the styles did not work properly. We needed to build custom styles to make the resulting component look properly within the given company guidelines.
Then we had some input fields where one of them must be filled out, they were mutual exclusive. This also required code and testing. And this was only unit testing. Once this is working, we will need to write Cypress end-to-end test as well.

By the time writing, we are working with three developers on that for weeks. Obviously, due to home office, reduced working hours and home child care we are not as productive as before Corona.

Two things I want to mention:

1. Keep in mind that this is huge single page web application for industrial use cases. I would probably not use Anguar for that little web-site with that one form where HTML and CSS without any JS might be a good fit.
2. This is not a criticism of Angular/TypeScript. I think it is a well designed framefork/laguage targed for large web applications and if you are used to work with SpringBoot in the backend, you will feel pretty much at home with Angular and TS.

With that little article, I just wanted to explain how complex doing "Just UI" can be. I'm not sure that it "should be" that complex but after building it myself I honestly do not know how that this could be done in a much simpler way.