The Power of HTML5 Web Applications
Jul 18, 2019 | by Adalbero Fernandes Guimaraes | 0 Comments

html5_web_applications

Most DMS platforms like Documentum and SharePoint have their out-of-the-box full clients which are meant to provide all (or most of all) of the platform functionality. Although these full clients can, normally, get customized or configured, they are, however, complex and slow to adopt new technologies.
If you have a specific use case, why start from a complex system and reduce it to your needs? Why not build a custom client that is streamlined and focus on your use case instead? The business logic can reside on the server. But for the client, we are free to use any state-of-the-art modern web framework.
HTML5 (CSS and JavaScript) has revolutionized the web client interface with a lot of new powerful functionalities. Nowadays there are many good frameworks and tools that allow us to rapidly build robust and reliable systems with a rich user interface, that looks like a native App – even with their own storage area on the local device.

Responsive UI
A good system must be responsive and run in a variety of environments. From generous desktop with big screens to tiny mobile displays. With HTML5 we can design the system to be responsive and adapt to each device it is running on. Following guidelines, like Material Design, guarantee that the system will run smoothly on any device without compromising accessibility.

Using Single Page Application pattern, we can create a robust web client in JavaScript, asynchronously requesting data from the server in the backend and rendering it in a reactive UI, thus providing a fluid experience without page reloads.
With new CSS configurations, we can better layout an HTML page without being dependent on TABLE tags and cascading DIV tags to try to reach a specific layout.

Local storage
Modern browsers have local storage that can be used to cache the application-specific static files like HTML, CSS, JavaScript, and images to improve performance or even to allow the application to work offline. In this case, the storage is controlled by the browser. This storage can also be used by the application to store its own content, such as document metadata and file content.

Each web application has its own storage area to manage their data. Other web / native applications do not have access to a specific application storage data.
But we need to be careful. Working with documents on a mobile device can be challenging. In most cases, a mobile device has limited storage capability and a slower connection. This can limit the number of documents that can be cached locally and managing big documents can be a problem. In our tests, we were able to store up to 2GB of cached documents on most devices.

html5

Working while offline
One of the most impressive new Browser features is the ability to configure a web application to be cached and work even when the device has no connectivity.
With Progressive Web App (PWA), it is possible to create a web application that looks like a native app (Desktop and Mobile). It can have its own icon on the user’s home screen, open in its own window (not in a browser window) and, most importantly, it can run even if the device is offline.
In order to run offline, the browser caches the application’s static files like HTML, CSS, JS, and images. For the content, the application can use the browser’s storage to cache data to be used while it cannot reach the server.

Separation of Concerns pattern
The idea of the Separation of Concerns pattern is to divide an application into single modules dedicated to a specific purpose.

According to Separation of Concerns, a web application should be divided into the following components which communicate with strictly defined interfaces to each other:

  • The user interface running in the browser should only handle pure rendering activities. For business logic, it should delegate the related tasks to e.g. RESTful services.
  • At the backend, RESTful services are dedicated to business logic without knowing technical details of the platforms. If platform actions are needed, they are delegated to the platform out-of-the-box services.
  • The platform services access the repository and are usually provided by the platform vendor.

With this modularization, not only are there clear responsibilities and strict application flow, but additional platforms can also be easily added.

html5_local_storage

Challenges
HTML5 (CSS and JavaScript) specifications are dynamic and are constantly implementing new functionalities. However, not all browsers implement them at the same pace. Most libraries do a good job encapsulating the differences between browsers, but sometimes we need to do different implementations based on the specifics of the particular browser.

Notably, Apple’s Safari is slow to implement new functionalities and sometimes has its own interpretation of how to implement some specifications (in order to guarantee their sandbox security).
Microsoft has frozen the IE in version 11 and substituted it by its successor: Edge. So, IE is no longer supported by most cloud services and does not implement these new functionalities. Recently, Edge has adopted Chromium as its web engine. This strategy is going to guarantee that it will follow more closely the evolution of new features – although it may be difficult to have the last version as it is part of the Windows OS.

However, technologies like Progressive Web Applications and IndexedDB for the offline functionalities are nowadays supported by all major browsers.

Bottom Line
Web frontend technologies and tools are powerful enough these days, to create robust clients that run on a variety of devices. There are many new features we can explore to build a rich client – something we were in the past only able to do with server-based systems.
The idea being: if you have a specific use case, let’s use the power of the content server API on the backend, but use a state-of-the-art new web client technology in the frontend which is dedicated to the specific user needs and is, this way, simple and intuitive.

Besides, the power of HTML5 today is constantly evolving. The community is very active and new features are showing up one after another. I’m looking forward to the new features to come in the next few years!

Stay tuned to my blog post for news about HTML5 and other exciting technologies!