Modern Web Apps

During the session Kito discussed one way to develop modern web applications using the following stack of tools.

Java EE MVC is standardized in JSR 371 for Java EE 8, it is an action-based server-side framework for creating web applications. It is heavily inspired by the Spring MVC framework, and thus, quite similar in behaviour. You will see some familiar annotations which enable methods to respond to HTTP actions, specify parameters conversions and work with a lot of JSON.

The whole JSR 371 is heavily influenced by the community feedback, and one thing the community has asked for repeatedly is an action based programming model for creating web applications, since the current spec features mainly Java Server Faces, JSF, which is inherently component oriented.

Within an action based framework, we’ll typically find a bunch of slim controllers to whom the framework will dispatch requests; the actions choose the appropriate views to render, query and prepare the data for the rendering; then the views themselves will access the model objects in their scope, typically using an expression language to present the actual data.

Java EE MVC is built on top of JAX-RS with some finer-grained control over error handlers. It requires the controllers to use CDI and has the built-in CSRF and XSS protection. But most importantly, it allows you to use the template engine of your choice. By default, you can use JSP, Facelets or plug whatever engine you like: thymeleaf, velocity, or any other.

In a nutshell, Java EE MVC is a standard for a small web-application framework, that very flexible and familiar to web app developers because it is heavily inspired by Spring MVC.

Here’s an example of the code, so you understand that you’ll feel yourself there like a fish in your favorite corner of the ocean.

Do you recognize bits of this code? The annotation in the controller declares what queries to dispatch to the controller, the actions also have the @Path annotation, which is used for routing. binds the HTTP parameter into the Java object, in the given code that is . The code itself is pretty straightforward, update the task if it is present in the injected taskService or create a new one.

If you’ve previously dealt with Spring MVC and JAX-RS, you’ll easily be able to navigate the code for the apps written with Java EE MVC.

Web Components

Now what about the front-end? In the world of User Experience and UIs, we want still to use components. Components are everywhere: a search box, a bread-crumb line, a user login box, lists and so on.

However, the HTML, which is often the de-facto standard language for a UI, is not that flexible with components and abstractions. HTML is great because it’s customizable with a stylesheet so the UI will look as we want it to, but its vocabulary is very limited: divs, spans, paragraphs.

Developers are really good at using abstractions, so literally every JavaScript framework invents their own way to create components. Components in the UI are the key to getting reusable code and separating the core application functionality from its presentation.

Well, HTML has come a long way from the days of being popular, so now we have access to Web Components.

Web components are a collection of HTML 5 standards that make it possible to work with:

• custom html elements
• html templates
• html imports
• and the shadow dom

They are supported by all major browsers, so they are here to stay. And there’s no excuse not to learn more and not to use them in your projects.

Custom elements allow you, for example, to declare your own tags that will represent something meaningful for your system. Check this out, you want to render the following page:

If you’re not an expert in HTML layouts and best practices, you probably wonder how much code you might need to render that dialog. In fact, with a proper, reusable, web component, you might be able to describe that beauty in just a couple of lines:

And the rest of the code needed to make it work resides in the description of the paper-action-dialog component.

You’ll need to learn how to make the components of course. But there are multiple libraries that will help you with it. Kito showed us the demo using the Polymer library for creating the components. The Polymer project is backed and sponsored by Google, and has just recently created a 1.0 release, suitable for production.

The best part about Polymer is that the whole library of components is already prepared for you, including buttons, badges, calendars, all kinds of inputs with validation, animations and so forth.