Manufacturing operations personnel and developers of SCADA systems are increasingly being asked to implement components of web-based architectures, and many SCADA software providers are integrating this technology into their platforms. Whatever your role in the process, it’s a necessity to understand the basic architecture and terminology for web technology components in modern automation systems. This is an admittedly broad topic, so we’ll focus just on visualization tools here.
Bridging the Gap
Most industrial control systems have a very predictable system architecture. Control hardware like a PLC is connected via an internal network to SCADA software. The SCADA software provides a visual representation of the system, historical data storage and display, and alarm detection and notification. Client computers can access this information via a separate internal network. The communication methods between the pieces of the architecture vary depending on the hardware and software involved.
Web applications can provide all of this functionality, but the development tools used and the communication protocols involved are not something most industrial control programmers are familiar with.
REST Architecture
First of all, let's go over the REST architecture as it is most likely be used in an automation project. REST stands for Representational State Transfer. The basics of REST are that the client (aka service consumer) and the server (aka service provider) communicate via a set of basic commands (aka services) including GET, POST, PUT, and DELETE. The two services we are most concerned with at this point are GET, which retrieves data from a service provider, and POST, which sends data back to the service provider. In both instances the service provider would most likely be a SCADA platform that has some form of web functionality, but it could be any piece of software that provides REST functionality.
REST Tools
Now that the basic architecture is out of the way, let’s go over the fun stuff: The extensive options and tools available to make your service consumer, or in this case, the web app. If you have some familiarity here, you may remember that simple HTML and CSS can be combined to make web pages. Those days are gone. Modern web pages are a complex system of Frameworks, Build Engines, and “Languages.”
Front End Frameworks
The natural place to start is with a Frontend Framework. This is the tool you will use to build the graphical components of your web page. A few of the most popular are React, AngularJS, Angular 4-5, and Vue.js. Each one of these requires a unique development style, and each have their pros and cons. It will be up to you or your team to make the decision on which one to go with. It is technically just possible to just write plain HTML and JavaScript to make your application work, but a frontend framework will improve developer efficiency because it handles a large amount of the boilerplate work that needs to be done on every web application.
Dependency Management
Once a frontend framework has been selected, the next step is to determine which tool or tools you would like to use for dependency management. Dependencies are the external libraries that you can use to make your code more efficient and to save time writing logic that may have already been created. These libraries can be anything from simple design schemes to the entire frontend framework that we looked at earlier. The first and most essential is NPM (Node Package Manager). NPM is installed by installing NodeJs, https://nodejs.org/ . I won’t go into the what or how to use NodeJs in this post but it is an awesome tool that is used heavily in the web development world. Other popular options are Yarn, Bower, and Webpack, and it is often advantageous to utilize multiple tools like this on larger projects.
Task Runners
Task runners preprocess some of the code to make it run more efficiently in the browser, and they also make it more difficult to view the code in the browser which is great for protecting IP. Preprocessing is very important if development tools are used that a browser cannot natively interpret. Browsers can really only interpret HTML, CSS and JavaScript. If development tools such as Sass, Less, or Stylus are used, the code must be pre-processed so browsers can interpret them. These three “languages” all accomplish the same functionality that CSS provides, but they bring extra added features to make development easier. With a task runner each one of them can then be preprocessed to CSS so the browser can use it.
Learning More
For many, the best way to learn is to do. If you would like to try building a simple web page using React and an Inductive Automation Ignition installation as the REST service provider, take a look at this step-by-step guide.
COMMENTS