Demystifying HTML5 for Enterprise Java Developers

August 31, 2016 105 Views

In my role as technical marketing manager, I’m often asked to explain how Sencha technologies differ from similar or competitive offerings. Those discussions often boil down to a capabilities matrix or similar summary where it’s easy for nuances and caveats to get lost.

In this article, I’ll focus on what it’s really like to start working with HTML5 technologies from the perspective of an enterprise Java development team. I’m going to mention specific Sencha technologies, but I don’t mean to imply that those are the only options available.

First, Some Background

In the world of software development, object-oriented programming (OOP) is extremely popular. While developers can certainly create programs and functionality without leveraging the object-oriented paradigm, supporters feel that OOP helps them better leverage team resources, improve product quality, and reduce support and maintenance costs.

OOP focuses on “objects”, the fundamental components of the product under development, and the relationships between and among those objects. Developers typically encapsulate objects as packages with well-defined behaviors and interfaces. During development, objects provide a convenient mechanism for allocating work, and they enable developers to focus on specific objects and functionality rather than trying to understand and manage complex interactions between variables throughout the system.

Teams enjoy a reduced risk of unexpected failures due to code changes, because objects are more easily isolated and tested. Popular OOP languages can also reduce the effort of software development, through techniques such as inheritance, prototypes, and overrides, which can help avoid duplicated code for related or similar object types.

Java developers have enjoyed these benefits for years, and in fact Java’s class-based OOP foundation is probably one of the reasons that it is has been at the top of language popularity charts for over 15 years. These developers have built an immense ecosystem for Java-related technologies, including sophisticated IDEs, development tools, and workflows.

Java and HTML5

While Java provides a great environment for server- and client-side applications, modern enterprise applications are increasingly moving toward HTML5 standards that leverage broad compatibility across a wide range of browsers, devices, and environments to satisfy user demand. Java developers that want to provide a dynamic HTML5 interface to their robust Java application may be in for a shock.

HTML5 applications leverage standards such as HTML, CSS, and JavaScript, which have notoriously finicky implementations in different environments, browsers, and versions. In addition to learning the new syntax and object models for these standards, Java developers need to wrap their heads around new libraries, event models, and the prototype-oriented OOP paradigm used by JavaScript. Moreover, IDEs often offer less support for JavaScript compared to Java, prolonging the learning process.

Developers generally need to choose between two approaches for integrating HTML5 into their Java applications:

Use a framework such as GWT or GXT to generate dynamic HTML5 from Java source code
Build an HTTP-based API for the Java back-end application and develop a new client-side HTML5 application

Integrating HTML5 Into Your Java Applications

Frameworks such as Sencha GXT enable teams to leverage Java expertise across both the front end and back end

GXT & GWT: Generating HTML5 from Java

Frameworks such as GXT and GWT enable Java developers to continue using familiar tools and workflows to create dynamic applications across the back end and front end. They typically don’t need to worry about HTML and CSS quirks, and they don’t need to descend into the JavaScript rabbit hole. By coding purely in Java, they can leverage automated, robust generation of optimized HTML5 and JavaScript code. Java developers can customize functionality and styling provided by the framework, and even provide custom UI controls that will be utilized on the client (which requires some HTML/CSS expertise).

The primary drawback is that developers are insulated from the client environment and may need to jump through some hoops in order to tweak certain aspects of the user experience – especially if new environments such as tablets and phones are needed.

Build a New HTML5 Client

Building an HTML5 client is a more complicated, but more flexible, option. The natural separation of client- and server-side code enables teams to manage client and server code independently and leverage the expertise of team members whose skills extend beyond Java. Adapting client code to new target environments can be greatly simplified through the use of adaptive and responsive design approaches in the client application, and the client app can be packaged into a native app through tools such as Cordova for mobile devices and Electron for the desktop.

There is a huge selection of third-party frameworks available to simplify the development experience, providing broad or specialized capabilities. Some frameworks offer only data management or binding, while others focus on UI controls. It’s important to understand which capabilities are needed in a framework because developers may have to use several frameworks plus custom code (and/or tools) to get all the necessary functionality.

Frameworks such as Sencha Ext JS enable Java developers to leverage OO design experience for use on the front end without deep web expertise

Ext JS for Java Developers

The Ext JS framework provides a broad solution, including everything a client-side developer needs with data and layout management, a rich UI library, charting, theming, accessibility and more. There’s no need for multiple frameworks, custom glue code, and associated maintenance headaches. I believe that Ext JS is unique in its ability to address many pain points for enterprise Java developers who choose to leverage a client-side HTML5 framework, because it addresses not only the technical needs of the application but fits well into enterprise Java development workflows.

While Ext JS is an HTML5 solution, developers don’t need to worry about the nuances of browsers, HTML, and CSS. Those details are handled by the framework, so developers can focus on writing code. Ext JS provides a robust object model upon which all functionality is based: MVC/MVVM data management, GUI components with flexible layout managers, events, gesture support, and even user-defined objects. Objects are exposed in a class-based style familiar to Java developers, so they don’t need to master prototype-oriented OOP. Through this class-based model, developers can subclass and extend built-in and custom classes much like they do in Java. In fact, Ext JS code is similar to Java in a number of ways:

Class-oriented approach is easy for Java developers to understand
Well-defined object lifecycle ensures that developers understand how to provide initial configuration and overrides
Object encapsulation enables protection of class members
Namespaces and file system layout help keep code organized
Naming conventions improve code comprehension and maintenance

In addition to helping individual developers and teams work with Ext JS, these source-level capabilities enable tooling improvements that can accelerate productivity gains.

For example, most IDEs provide features such as code completion, code base navigation, refactoring assistance, and automated generation of class scaffolding, which greatly improve Java development velocity. Sadly, their support for JavaScript is typically not as robust – there might be some features around the DOM but very little insight into user-defined objects/prototypes. Ext JS is built to leverage an application’s objects and relationships – including both stock and custom classes – to provide full-featured capabilities for Ext JS code in the IDE, greatly improving Ext JS development velocity.

Of course, writing code is only part of developing software. Building, testing and debugging are all commonly integrated into a Java team’s development process, and Ext JS has a solution for all of these needs.

Ext JS enables Java developers to build complex enterprise applications that leverage HTML5 while avoiding many of the difficulties presented by new languages, paradigms, and tools. Java developers can leverage their class-based OOP expertise to develop well-designed, robust, easy to maintain HTML5 applications that provide a dynamic, engaging user experience on browsers and mobile devices, through web or native application packaging.

If you haven’t yet tried Ext JS or GXT, I encourage to download them for a free 30-day trial. We have some great resources to help you get started, and I think you’ll like what you see. Be sure to follow this blog for more hands-on examples in the near future!