Developer Story: Angular 7 in a JEE Project

As a freelancer, I’ve been working over the years with lots of different frameworks, but when I create my own applications, I usually use JEE (the real one, not Spring) plus JSF2 for the frontend and Maven as build system. My android apps then I attach to JAX-RS webservices. The outcome are very secure, stable and modern looking applications. Anyway – sometimes you feel you should try out something new which currently seems trendy, so I decided to change JSF for Angular on the frontend side. I’ll keep the rest as it has proven to be bullet proof.

So to sum up how our application should look like:

• Maven as Build System
• Netbeans or IntelliJ for development
• JEE (with ejb, web and ear), deployed on WildFly
• Angular 7 for the Frontend
• JAX-RS webservices for serving now both Android and the Angular Frontend

The first thing I did was searching the web for a matching maven archetype to create the initial structure. Although there were a few ones, most of them only were for Spring – obviously a mismatch. OK, no problem, start with the “basic” one bundled with NetBeans 9 and we end up with a root pom plus ear, ejb and web projects and can also open it in IntelliJ. (I’ll use both IDEs to find out which one works better for this project). Next thing is to integrate Angular 7… which turns out to not be really developer friendly if you are used developing with server side applications.

First, you need to install node and Angular CLI. Having done so, you can create a new Angular web application with the Angular CLI below the web module’s src/main/angular directory and install all the additional node_modules you want to have. The whole stuff would then get “compiled” and the outcome can be copied over to the .WAR’s web application.

If you are wondering what happens during Angular’s “build” – process… in Angular 7 you typically write TypeScript files which need to get transpiled into JavaScript files. Further, you also have lots of configuration files, annotations and language features which also can not simply be used by a browser – so the “compilation” process of Angular also involves automated code creation, obfuscation, bundling into single huge JS files etc. In the end I find I switched my xhtmls and backing beans for a much more complex set of html, TypeScript, module files and a maven compilation process (which integrates the angluar CLI compilation process) taking more than twice as long and where I previously developed a few minutes for frontend stuff editing 2 files, I now have to work on more than 6 files in multiple languages and the backend webservice as well. I hope that’s worth it…

On my next post, I’ll review the maven build process (used also by jenkins CI) and directory structure before we start diving into the development.

Advertisement