React vs Angular, here’s what I learned and want to share about two popular framework options and the value they brought to our project.
Recently we began a new phase of work specifically focused on the UI of a very technical application, Shibboleth IdP, and in the process we discovered some challenges that would make it difficult to satisfy certain requirements. These revolved around JSON-schema, a specification used to describe what a piece of data should look like, as well as providing validation for the information entered by a user to ensure it matches the data. This allows our Spring application to define some, if not all of the JSON-schema specification to work with SAML for Shibboleth. Unfortunately, I found that the library chosen to implement this spec had one large issue: it would destroy any data NOT specifically described by the provided schema file. I attempted to overcome this by merging the original data with the information provided by the user, but ultimately it became a blocker.
This led me to look into other software that could solve the issue, but unfortunately, there are not a lot of options in the Angular community for JSON-schema support. The existing libraries for Angular that support JSON-schema are relatively minimal and have only a small community to assist with maintenance. We did not have the time or budget to write something from scratch, so I decided to look at options for frameworks outside of Angular.
Fortunately, the architecture of the connected app as a single page application (SPA) allowed for this sort of rewrite of the user interface without a significant impact on the backend API code.
My findings show the most popular JSON-schema-based library for assistance with our project needs is React, specifically react-jsonschema-forms which has over 200 contributors and is updated on a regular basis. I did find other options such as jsonforms.io which also support our active project use cases. In comparison to the options we had considered, React-based libraries are very extensible and customizable, allowing for integration with multiple CSS frameworks such as Bootstrap, Material, Fluent, and SemanticUI.
Another difference is that react-jsonschema-forms did not modify the JSON-schema spec in any way to tightly couple the presentation layer with the schema. Most importantly, it has an option to NOT destroy data that is not found in the specification, but to simply leave it alone. After much testing, I discovered this library was very intuitive, provided good documentation of its features, and allowed for a large range of customization. This made me feel much more confident that it would overcome the challenges we currently faced, but also allow room for growth in the future.
Ultimately, this made it possible to make a case for switching the project to the React.js framework, and we have since ported the entire UI to React.js, with the help of react-jsonschema-forms. It allowed us to take advantage of a functional roadblock to improve and modernize the implementation.
This has led to other benefits such as improved stability, faster build/test processes, and greater developer efficiency. For instance, where I would estimate a new form page for something like the recent addition of custom attribute bundles to take a day or more, I was able to build out the form in a matter of a few hours. Some of this is likely due to better experience with React.js within the development team, but there were also bugs with the older library we had used that simply were not present in the new one, and so the bugs disappeared. We’ve also reduced the overall amount of code in the user interface project by over half (details below).
This transition was not without its hiccups, since we had to completely overhaul our existing automated tests which relied on the markup generated by Angular, as well as a few bugs that were discovered. However, these issues were overcome quickly and efficiently and today the application is in a much better place regarding bugs and technical debt.
Lines of code analysis done using the “cloc” tool.
.png?width=1320&name=React%20Screen%20Shot%202022-03-10%20at%2012.06.20%20PM%20(1).png)
Sources
