A Hybrid Architecture for Mission–Critical, Real–Time Web Client

Applications

EFREN CORONEL, ILSE LEAL

Instituto de Investigaciones Electricas

Gestion Integral de Procesos

Reforma 113 Col. Palmira, Cuernavaca Mor.

MEXICO

Abstract: This paper describes a hybrid software architecture that can be used to develop powerful, real–time Web

applications for monitoring industrial processes with a high degree of reliability and availability. Our architecture

enables developers to combine traditional desktop software development techniques with new Web development

methodologies in order to achieve multiplatform, mission–critical applications that are visually attractive, ﬂexible

and modern.

Key–Words: Web Application, Real-Time, Process Monitoring

1 Introduction

In practice, mission-critical monitoring systems are

developed using proprietary software with highly spe-

cialized code. These systems usually communicate

with data acquisition modules or measurement in-

struments using different proprietary protocols like

ModBus [1], DNP3 [2], OPC [3], IEC 61850 [4],

etc. Therefore, these systems are platform–dependent.

Since these systems are used to supervise and monitor

critical processes, they must operate with a high level

of reliability and availability.

Over the years, as technology has advanced, mon-

itoring systems have become obsolete. Hence, organi-

zations face the need to migrate their systems, which

implies large investments and operational risks.

The hybrid architecture that we describe in this

paper, can be used to develop mission–critical, mod-

ern Web applications that are capable of acquiring

data in real time from different data sources using a

wide range of specialized protocols. Therefore, sys-

tems based on our architecture can offer reliable data

and high availability. By incorporating modern Web

technologies, our architecture enables the develop-

ment of responsive, attractive and ﬂexible human ma-

chine interfaces that can be used in different devices.

In addition, because our architecture supports multi-

platform development, the resulting systems can op-

erate in different operating systems such as Windows,

Linux and OS X. This helps reduce development and

deployment costs.

2 Hybrid architecture

To understand our concept of hybrid architecture, we

start with a conceptual model which is based on the

fact that critical process monitoring systems were de-

veloped as platform–dependent desktop applications.

With this, developers seek to ensure that resulting sys-

tems are fast and robust enough to operate reliably for

extended periods of time. This kind of systems offer

real–time communication mechanisms with excellent

performance and unmatched multiprocessing capac-

ity.

However, over the years, new application devel-

opment technologies have emerged and progressed

rapidly. These new technologies are mainly oriented

to the creation of modern Web systems, which can of-

fer superior ﬂexibility to design highly functional hu-

man machine interfaces that can be deployed in a wide

variety of devices: from desktops to smart phones.

In this paper, we propose a Web architecture

that combines the best of both worlds: the robust-

ness, availability and real–time responsiveness of tra-

ditional desktop systems with the ﬂexibility and mul-

tiplatform capacity of modern Web systems.

2.1 Mission-critical systems requirements

By deﬁnition, mission critical systems have substan-

tial impact on an organization’s processes and opera-

tions. For critical industrial process, it is important to

have highly effective and reliable monitoring systems

that reduce or eliminate operational risks that could

cause service shortages, ﬁnancial losses or security

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022

risks. The following are some of the most important

requirements in a mission–critical system:

◦High degree of reliability and availability

◦Low latency in communication and the capacity to

acquire data from several data sources

◦Ease of use

◦Correct and timely presentation of information

◦Secure access to critical data

In light of the foregoing requirements, the rea-

son why most mission–critical systems use special-

ized software that runs on well–known, robust plat-

forms becomes clear [5]. Still, only a few companies

develop this kind of systems. Therefore, their soft-

ware licenses are usually very expensive.

Web applications, developed with the most recent

open standards, offer the advantage of minimizing the

cost of software licenses while making it possible to

develop attractive user interfaces. Nevertheless, their

main disadvantage is the lack of reliable and low–

latency communication and data acquisition mecha-

nisms.

2.2 Why use Web Technologies?

Web application development has been on the up-

swing mainly due to great advances in consumer de-

vices as well as new hardware technologies that are

more efﬁcient and powerful. Additionally, new soft-

ware development standards improve user productiv-

ity because of their ﬂexibility.

One of the main advantages of Web applications

is their ease of development because of the wide range

of standards that can be used. HTML5 offers an ideal

set of features that facilitates the development of in-

tuitive and attractive user interfaces. CSS3 provides

great ﬂexibility by making it possible to easily deﬁne

and modify the appearance of a Web page. Another

powerful standard is SVG (Scalable Vector Graphics),

which makes it possible to specify two–dimensional

vector images in XML format.

In addition, JavaScript makes it possible to ac-

cess HTML, CSS3 and SVG elements through ob-

jects, which are instantiated in memory. Therefore,

with JavaScript, developers can directly modify ele-

ment behaviors, styles and shapes within Web appli-

cations. This enables Web developers to generate rich,

dynamic content.

However, traditional Web applications are not

usually used to develop mission–critical applications

due to certain disadvantages regarding the way they

operate internally. One of the most important fac-

tors is that, in this type of applications, there is only

Browser Client

Ajax Web Application Model

Server-side systems

AJAX Engine

Web and/or XML Server

Datastores, backend processing, legacy

systems

User Interface

HTTP Request

HTML + CSS Data

JavaScript Call

XML Data

Figure 1: Tradicional Web Application

one main execution thread. Therefore, multiprocess-

ing is not possible. Even though developers can use

timers and event handlers that can be launched asyn-

chronously, these elements are still executed in the

main thread cycle. This can lead to problems that

cause the application to become intermittently unre-

sponsive.

Finally, by considering advantages and disadvan-

tages of both architectures, desktop and Web, we have

created a hybrid architecture that combines the best of

both, managing to meet the requirements described in

section 2.1.

2.3 Main concept

As we have mentioned, the key idea in our architec-

ture is to integrate high performance, low–latency and

high availability communication mechanisms, which

are available in traditional desktop systems, with the

advantages of ﬂexible, multiplatform, modern Web

applications that can operate ofﬂine, without the need

for a Web server. This is possible because in our ar-

chitecture, application elements are loaded only once.

Therefore, our applications have all the information

they need to operate and do not need to query a Web

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022

server since objects can be accessed directly in mem-

ory. We have achieved this by designing a layered

architecture that combines Java and Javascript along

with other standards such as HTML5, CSS3 and SVG.

Figure 2 shows the various modules that make up our

architecture.

Java handles the core modules of the application.

These modules communicate with JavaScript in order

to link communication and data processing tasks. Pre-

sentation tasks, such as the display of information, are

executed in the Web browser.

As we mentioned before, in a traditional Web ap-

plication, there is only one main thread, which runs

on a browser and can be accessed by JavaScript. By

implementing core modules in Java, we can incorpo-

rate Java threads and achieve true multiprocessing ca-

pabilities. In order to integrate Java capabilities to

Web applications, our architecture enables informa-

tion exchange between Java and JavaScript. With this

methodology, data acquisition from legacy systems,

databases or Web services can be performed directly

in Java by using asynchronous execution threads.

Once acquired data are in memory, they can be ac-

cessed through JavaScript and presented in real–time

to users. This mechanism is explained in more detail

in section 4.1.

3 Solving Traditional Web Systems

Limitations

One of the most important elements in any monitoring

system is the possibility to connect to different data

sources. This enables information exchange between

measurement devices or data servers and the system.

This is usually done by implementing different com-

munication protocols. In traditional Web applications,

there are very few technologies that can be used to

communicate with data acquisition devices which use

protocols based on TCP/IP such as ModBus, DNP3,

RTP, etc. The same applies for SQL connectors or

Web services, which are done with server–side tech-

nologies. In our architecture, information requests are

performed directly by the client.

Another important limitation is multiprocessing

capacity, which is essential for real–time systems that

must operate asynchronously in order to be able to

perform several tasks in parallel.

3.1 Real-time data acquisition

Real–time systems are deﬁned as computer systems

that are subject to time constraints and therefore must

respond in a certain amount of time. For this kind

of systems, correctness is not enough by itself: tasks

JavaScript Engine

Browser Web App Client

Java Plug-in

User Interface

JavaScript

Memory

Java Connector

Communications

Processing

Data

Memory

HTML5 CSS3 SVG

EVENTS

JavaScript Engine

AJAX Engine

WEB SERVER

(Host: HTML Pages, CSS Documents, JavaScript Files)

HTTP Request

HTML + CSS + JS Data

GET APP

Legacy System

(ModBus)

Legacy System

(DNP3)

Legacy System

(any TCP/IP based

protocol)

Legacy System

(IEC 61850)

Modern System

(SQL Database)

Modern System

(Web Services)

TCP/IP SOCKETS

Figure 2: Main Concept

must execute in a certain period of time [10]. There

are two types of real–time systems: hard real–time

systems, in which time constraints are very strict and

soft real–time systems, which can tolerate occasional

delays.

The correct implementation of mission–critical

systems, such as industrial monitoring systems, using

Web technologies is particularly complicated, mainly

because these technologies were not designed with

high–demand systems in mind. New technologies are

emerging to ﬁll this gap, but they have limitations.

One example is Websockets [6], which enables

the use of sockets in Web applications. However, this

technology is still at an early stage of development and

has some major limitations. One of the most impor-

tant is that developers cannot implement proprietary

TCP/IP protocols. This is due to the fact that, in order

to develop applications, developers need access to a

Websockets server.

By using Java as the core of an application, de-

velopers can take advantage of a considerable set of

software libraries that allow applications to connect to

different data sources through native TCP/IP sockets.

With this, proprietary protocols can be implemented

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022

just as if Web applications were traditional, platform–

dependent desktop applications. Therefore, applica-

tions developed using our architecture can communi-

cate with both legacy and modern servers.

3.2 Historical data acquisition

In section 3.1 we mentioned real–time data acquisi-

tion. However, another key feature in our hybrid ar-

chitecture is the capacity to acquire historical data. To

achieve this, evidently, it is necessary to have access to

servers that store and provide this information. With

historical data, systems can provide reports or trend

graphs that illustrate the state of monitored processes.

Java’s extensibility makes it possible to access

Web services, perform SQL queries or communicate

with OPC or PI (OSIsoft) servers. In Java, this infor-

mation can be obtained through a dedicated acquisi-

tion thread or can be triggered on–demand by users as

they interact with the user interface.

3.3 Multiprocessing

In the context of Web systems, there is no hard

multiprocessing concept such as the one needed for

mission–critical monitoring applications. Instead,

there are several techniques that are used to simulate

multiprocessing through asynchronous data requests

via AJAX or PHP. One example is a new technology

known as “Web Workers” [7], which enables the ex-

ecution of small pieces of JavaScript code in parallel.

However, there is a limitation on the maximum num-

ber of Web Workers that can be executed simultane-

ously. In addition, web workers do not have access to

the DOM (Document Object Model).

Java offers a very useful and powerful alterna-

tive, which is widely used in high-level languages:

multithreading. With multithreading, it is possible

to create several threads that can be used for differ-

ent purposes. For example, developers can create one

thread for each connection to legacy systems. In this

way, if an application needs to connect to 20 differ-

ent devices, it is possible to create 20 threads. In this

scenario, each thread would execute at its own pace,

asynchronously acquiring data at different frequen-

cies. This information can be stored in shared memory

areas which can be accessed by the Web browser and

then presented to users. Threads can also be used to

perform complex computations without affecting sys-

tem responsiveness. Threads allow developers to take

efﬁcient advantage of hardware resources, especially

with new multi–core processors, which allow execut-

ing each thread on a different core.

4 Developing a Mission-critical Sys-

tem with our Hybrid Architecture

Our hybrid architecture is not just a conceptual de-

sign. Instead, it is intended as a speciﬁcation of var-

ious layers of software that enable developers to de-

sign and develop mission–critical Web–based systems

in an easy and reliable manner. Therefore, developers

do not need to start from scratch or dig deep in techni-

cal aspects to achieve their objective. In addition, our

architecture is ﬂexible because all modules that make

up the Business, Data Exchange and Presentation lay-

ers are fully customizable.

4.1 Bussiness Layer

Our architecture’s business layer is in charge of the

logic to acquire and process the information that is

displayed to users. This layer is comprised of data

acquisition, data processing and information storage

modules. This information is used by the upper lay-

ers. In this layer, events are generated in order to ex-

change information with other layers. It consists of a

software core with structured Java objects and classes

that can execute in the browser’s internal memory.

It also implements interoperability between Java and

JavaScript by enabling access to objects in memory

and making it possible to invoke Java methods from

JavaScript and vice versa. In this layer, processes op-

erate asynchronously to handle connections, data ac-

quisition and data processing. This prevents applica-

tions from becoming unresponsive or blocked when

data are being acquired or processed. With this ar-

chitecture, data are available in memory and can be

retrieved immediately thus, achieving excellent per-

formance.

Figure 3 shows a block diagram that illustrates the

operation and structure of this layer.

4.2 Data Exchange Layer

The Data Exchange Layer is used as a link between

the objects stored in the Business Layer and the Pre-

sentation Layer. Its main task is to serve as an inter-

mediary by using basic exchange objects, which are

based on JSON (JavaScript Object Notation) in order

to achieve a high degree of compatibility and reliabil-

ity in data transport.

This layer also processes requests triggered by

events in the Business Layer or in the Presentation

Layer through data serialization. Data are encapsu-

lated in text strings that are exchanged between ob-

jects. Next, this information is deserialized and in-

stantiated as an object that can be used in the Presen-

tation Layer. Since these objects are set up using an

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022

TCP/IP SOCKETS

JavaScript Engine

Bussiness Layer

Java Plug-in

Java Connector

Memory

Concurrent

Access

Controller

Data

Memory

EVENTS

Legacy System

(ModBus)

Legacy System

(DNP3)

Legacy System

(any TCP/IP based

protocol)

Legacy System

(IEC 61850)

Modern System

(SQL Database)

Modern System

(Web Services)

Communications

Thread 1

Thread 2

Thread 3

Thread n

Thread n+1

Thread n+2

Thread 1

Processing

Thread 2

Thread 3

Thread n

Adquisition

Controller

JavaScript

Memory

Connector Exchange Layer

Figure 3: Bussiness Layer

open standard, they are entirely customizable and can

be adapted to developers’ needs.

4.3 Presentation Layer

Users interact directly with the Presentation Layer.

This layer allows to set up a series of visual cues that

enable users to visualize their information effectively

and easily. HTML5 is used to develop the basic struc-

ture of Web pages. CSS3 is used to specify the layout

of elements and to incorporate animation and inter-

active effects. SVG is used to create line diagrams

that represent different processes. For example, in a

power plant, SVG could be used to model the state of

elements such as turbines, pipes, pressure indicators,

valves, switches, etc. JavaScript is used to add interac-

tive behaviors to display data in real time and to mod-

ify elements on the ﬂy, depending on users’ actions.

It also possible to to dynamically create elements and

insert them in HTML5 documents at run time. Hence,

this layer is built with HTML5 documents that contain

static information that can be modiﬁed dynamically

using JavaScript.

Figure 4 shows a sequence diagram that illustrates

the relation between this layer and the Exchange and

Business Layers.

5 Security Considerations

While Web applications offer users attractive user in-

terfaces and ease of use, this kind of applications

present certain risks that need to be addressed [8].

Regarding security, we have implemented several

techniques to enforce security measures. Since appli-

cations based on our archirecture are client–based, all

Presentation

Layer

Exchange

Layer

Bussiness

Layer Data Sources

Activate Acquisition Request Data

Data Response

Low Latency < 5ms

JSONJSON

Request Data Request Data

Request DataRequest Data

Response DataResponse Data

Response Data Response Data

bucle

Write Memory

User Interaction

Figure 4: Sequence Diagram

operations can be performed within a closed and pro-

tected Intranet environment. In addition, the Business

layer requires a certiﬁcate signed by a trusted certiﬁ-

cate authority to operate.

Another relevant aspect is that our architecture

enforces an adquate separation between browser pro-

cesses and Java processes. With this approach, our

software creates a secure sandbox environment for its

processes.

In addition, with Java it is possible to implement

diverse authentication mechanisms and data encryp-

tion mechanisms that ensure secure data transmission.

6 Conclusion

While desktop systems require users to use speciﬁc

hardware, modern Web applications can be used in

many other platforms including mobile phones and

tablets. Mobile devices allow users to view the in-

formation they need quickly and make important deci-

sions, even if they are out of their ofﬁce. In the context

of industrial monitoring systems, this has tremendous

potential to improve users’ workﬂow. For example,

in power plants, operators could be viewing the in-

formation they need on site instead of being conﬁned

to an ofﬁce. However, traditional Web technologies

have certain limitations that makes them unsuitable

for real–time, critical systems.

In this paper we have presented a hybrid architec-

ture for developing powerful, real–time Web client ap-

plications. With our architecture, we have been able to

solve two typical limitations of Web systems: lack of

communication and multiprocessing capabilities. Our

architecture enables developers to create modern yet

reliable mission–critical systems that can be used to

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022

monitor industrial processes.

One of the most important beneﬁts of our ar-

chitecture is that applications developed with it are

platform–independent thus greatly reducing software

licensing costs. In addition, our architecture is highly

ﬂexible and can be used to develop powerful Web ap-

plications for monitoring industrial applications.

7 Results

Our architecture has been used to develop a mission–

critical, real–time Web system for a nuclear power

plant [9]. This system has been thoroughly tested,

with good results.It acquires data at very high speeds

from several data souces including RTP acquisition

systems, legacy systems and other devices. It per-

forms complex computations and displays histori-

cal data, with excellent performance. Since it was

developed using our architecture, it is platform–

independent and can be run on any browser, in a vari-

ety of devices.

References:

[1] ModBus Organization. http://www.modbus.org/

[2] DNP Users Group, Overview

of the DNP3 Protocol.

http://www.dnp.org/Pages/AboutDefault.aspx

[3] OPC Foundation, The Interoperabil-

ity Standard for Industrial Automation

https://opcfoundation.org/

[4] Ralph Mackiewicz, ”Technical Overview and

Beneﬁts of the IEC 61850 Standard for Substa-

tion Automation”, SISCO, Inc. Sterling Heights,

MI.

[5] Gabriella Carrozza, Roberto Pietrantuono, Ste-

fano Russo, ”Defect Analysis in Mission-critical

Software Systems: a Detailed Investigation”,

JOURNAL OF SOFTWARE: EVOLUTION

AND PROCESS; 00:128.

[6] Jin-tae Park1, Hyun-seo Hwang1, Jun-soo Yun1

and Il-young Moon1 Study of HTML5 Web-

Socket for a Multimedia Communication Inter-

national Journal of Multimedia and Ubiquitous

Engineering Vol.9, No.7 (2014), pp.61-72

[7] Web Hypertext Application Technology Work-

ing Group. Web workers draft recommenda-

tion, 2010. http://www.whatwg.org/specs/web-

workers/current-work/.

[8] SANS Institute. A Security Checklist for Web

Application Design, 2004.

[9] Coronel Flores Efren Ruben, and Ilse Leal

Aulenbacher. ”A Real-Time Web-based Graphic

Display System using Java LiveConnect Tech-

nology for the Laguna Verde Nuclear Power

Plant”. WSEAS, Advances in Information Sci-

ence and Applications - Volume I, July 2014,

ISBN: 978-1-61804-236-1

[10] Stankovic, John A., and Krithi Ramamritham.

”What is predictability for real-time systems?.”

Real-Time Systems 2.4 (1990): 247-254.

Creative Commons Attribution License 4.0

(Attribution 4.0 International, CC BY 4.0)

This article is published under the terms of the Creative

Commons Attribution License 4.0

https://creativecommons.org/licenses/by/4.0/deed.en_US

EQUATIONS

DOI: 10.37394/232021.2022.2.1

Efren Coronel, Ilse Leal

E-ISSN: 2732-9976

Volume 2, 2022