Imagine a bacon-wrapped Ferrari. Still not better than our free technical reports.
See all our reports

Modern Web Apps with HTML5 Web Components, Polymer, and Java EE MVC 1.0 by Kito Mann

Virtual JUG — the online Java User Group that brings you the best technical sessions from all over the world. This year, we at RebelLabs continue to provide you with short recaps of sessions, including what we learned, giving you a chance to know a bit more about the speakers in a short interview with them after they have presented their session.

Previously we observed Venkat’s second time on Virtual JUG when he spoke about Java 8 streams. This time it was all about modern web applications: HTML 5, web components, Polymer framework and the upcoming Java EE MVC 1.0 standard.

Joining the vJUG for the first time was Kito Mann, the Principal Consultant at Virtua, Inc., specializing in enterprise application architecture, training, development, and mentoring with JavaServer Faces, HTML5, Web Components, portlets, Liferay, and Java EE technologies. He is also the editor-in-chief of JSFCentral.com, co-host of the Enterprise Java Newscast, and the author of JavaServer Faces in Action. He also has participated in several Java Community  and is also an internationally recognized speaker.

If you haven’t yet had a chance to see his presentation, this is your opportunity! Here’s the full session:

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.

action-based-framework-architecture

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.

@Path("/tasks")
public class TaskController {
   private final static Logger logger = Logger.getLogger(TaskController.class.getName());
   @Inject
   private User user;
   @Inject
   private TaskService taskService;
   @Path("{id}")
   @PUT
   @Consumes(MediaType.APPLICATION_JSON)
   public Response updateTask(@PathParam("id") String id, Task task) {
       Optional<Task> currentTask = taskService.get(id);
       if (currentTask.isPresent()) {
           taskService.update(task);
       } else {
           taskService.add(task);
       }
       return Response.ok().build();
   }
}

Do you recognize bits of this code? The @Path annotation in the controller declares what queries to dispatch to the controller, the actions also have the @Path annotation, which is used for routing. @PathParam binds the HTTP parameter into the Java object, in the given code that is String id. 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.

frontend-needs-components

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.

web-components-browser-support

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:

paper-dialog-web-component-example

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:

<paper-action-dialog backdrop autoCloseDisabled layered="false">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 <paper-button affirmative autofocus>Tap me to close</paper-button>
</paper-action-dialog>

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.

Isn’t it cool? Check out the full session to learn how to make a Java EE MVC application work with web components, gaze at the demo code on Github. And remember, next time you write a web-app, you can do it using modern tools!

Resources

The first and foremost link you should take away from this post is the Github repository with all the code that Kito has been showing during the session: polymer-javaee-mvc-todo. Not only does it contain the sample application, but you can also find the slides for this session.

Here are some links to the resources that might be interesting for a web developer:

  • knowesis.io – a fresh content web site that focuses on web components and other web application related technologies
  • A playlist of Polycasts — short video tutorials for Polymer
  • http://virtua.tech – Kito’s company website, that offers trainings about Java EE, JavaServer Faces, PrimeFaces, Liferay, and HTML5 Web Components.

Also, you might be interested in checking out this series of blogposts on Java EE MVC:

Other than that, there’s plenty of places on the internet to learn more about HTML 5 and web-components. The docs for Polymer is probably a good starting point after you have digested this session.

Interview

After the session Kito joined us for our regular interview with the Virtual JUG speaker. Is the web components stack here to stay? Does Java EE MVC mean JSF is going out of business? (hint, nope). Would microservices architecture greatly diminish the value of yet another framework for creating web applications? What are the cool open source projects you should check out?

Listen to the interview, connect with Kito on Twitter: @kito99, ask him more questions and see you next time!




Read next: