5 Pillars of a Successful Java Web Application (Part 2/3)

In this series of posts, we’ll detail our talk presented at Java One San Francisco 2017: "5 Pillars of a Successful Java Web Application”, where we shared our cumulative experience over the years building the workbench and the web tooling for the Drools and jBPM platform. If you didn't read the first post, take a moment to read the first pillar.

2nd Pillar: Full stack Developers

The second pillar of every successful web application is related to a developers’ skill sets: we should embrace the full stack. Your company may still differentiate backend and front-end developers, but gradually this border will vanish because in the end, we’re developers and developers should solve problems. It doesn't matter if the problem is on the server or in the browser because they are just problem-solving media.

The most efficient way to work in this full stack environment is to use the same programming model for backend and front-end. On our team, we embrace the Java EE programming model (and certainly we’re going to be a big player in the upcoming EE4J), but how are we able to share the same Java EE programming model in the browser?

For this, we use the Errai project. Leveraging the GWT compiler, Errai enables you to reuse existing Java EE (Eclipse EE) code on the client. With Errai, you can have dependency injection in your client-side code, observe and fire CDI events on the client, and exchange events between the client and server.

Having the same programming model among all the layers of our application, makes it evolve faster and safer, and especially, reduces the context switching between backend and front-end programming models. Learn all about Errai's Java EE features here.

3rd Pillar: UX Integration

The next pillar for a successful web application is facilitating integration with your UX team. Your UX team is the one with the proper knowledge to build easily usable and visually attractive user interfaces. It’s not an engineering only job: this requires different skill sets that have to work together to succeed.

Mixing HTML/CSS and control logic language is a mistake. We learned this the hard way when maintaining JSP pages.

Unfortunately, today many JS frameworks are going to the same path:

   <h1>{{title}}</h1>

   <h2>My favorite hero is: {{myHero}}</h2>

   <p>Heroes:</p>

   <ul>

     <li *ngFor="let hero of heroes">

       {{ hero }}

     </li>

   </ul>

How can a UX expert work on this code? What is the limitation of having a programmer "translating HTML/CSS" into the specifics of this framework? Our industry keeps forcing UX to understand and interact with framework-specific code.

The 3rd pillar is that your web applications should respect and keep HTML and CSS as clean as possible. This is the only way to have a seamless integration between UX and engineers. But how do you achieve this?

Errai provides a pure HTML/CSS template based framework. With annotation processors, we bind transparently HTML tags to DOM Elements in java code, without introducing ANY change to HTML/CSS structure. With Errai UI, we do not mix and match business logic with HTML/CSS.

This is helpful for the Drools and jBPM teams because it allows a noiseless integration between the UX and engineering teams. So the third pillar of a web application is to work closely with the UX team and the only way to do this effectively is to leave the HTML and CSS as clean as possible.

This is the second of three posts about our 5 pillars of successful web applications. Stay tuned for the next one.

[I would like to thank Max Barkley and Alexandre Porcelli for kindly reviewing this article before publication, contributing with the final text and providing great feedback.]

Whether you are new to Containers or have experience, downloading this cheat sheet can assist you when encountering tasks you haven’t done lately.