18. 09. 2020
Development, NetEye
29. 06. 2020
Valentina Da Rold
NetEye, Unified Monitoring
Icingaweb2 Module Tornado: Building a NetEye Module with Vue
The Tornado module is improving release after release. With NetEye 4.12 we reached one of our main goals: Tornado is now configurable within the graphical interface, and you can now create new nodes and rules, or edit and delete your existing ones.
The icingaweb2-module-tornado module (i.e., the graphical interface of the well-known Tornado module) is the first icingaweb2 module completely based on the Vue.js framework. We (the R&D team) are always trying to innovate with NetEye and for this reason we decided to start moving away from a more traditional way of creating software interfaces (for example using the PHP-based Zend Framework) to newer technology.
To create a good user experience, it is important to choose a suitable web application architecture.
Multi-page applications work in a “traditional” way. Any change in the browser (e.g., display or transmission of data) involves retrieving new pages from the server. Routes are registered on the server, and each HTTP request from the client to a server involves retrieving a new HTML page.
This means that the request sent to the server will always retrieve the page showing the results of the request (a so-called view), or an error. Most of the application logic is on the server, and the client is only the recipient of the retrieved page.
A single-page application is a complete web application with only one page that serves as a “shell” for all parts of the user interface. Most resources (Javascript, HTML, CSS) are loaded only once throughout the application work cycle, and data is transmitted from the previous to a new state. The initial HTML document uploaded when an application first opens represents the starting point for the rest of the application. Each subsequent part is loaded dynamically and independently of the “shell”, without reloading the whole page, giving the user the perception that the page has changed.
Some of the advantages of a single-page application compared to Multi-page applications are the following:
- Quick Response Time: Single-page applications take on the structure of the site in advance, there is no need for constant requests to obtain a new site from the server. When a user clicks on an area, changes are made nearly instantly, which imparts an increased sense of interaction to mobile or desktop applications. The user does not have to wait or, at least, does not have that “feeling” of waiting. This is a great advantage and the reason why single-page applications are so popular today.
- Separating presentation from business logic: The code that manages the user interface behavior is contained on the client-side instead of on the server. This allows developers to focus on what’s important to the user experience apart from the critical business logic elements on the server.
- Faster and easier data transfer: Transactions with the server are easier and faster because, after initial delivery, only data is sent to or received from the server.
After analyzing and comparing the three most famous JavaScript frameworks (React, Angular, and Vue.js) we decided to base this new module implementation on Vue.js.
Vue.js is one of the fastest-growing Javascript frameworks today. On its official pages, it’s described as accessible, comprehensive, and high performing. Vue.js uses a virtual DOM which does not exist in the browser, but rather in memory, with the result being much faster access than in the actual DOM.
Moreover, components are one of the most powerful features of Vue.js, helping you extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements onto which Vue.js’ compiler can attach a specific behavior. For this reason, we are also developing our library (the Design System) to contain useful components to ease the process of making complex app shells.
We are very excited about this new challenge, and we hope that this amazing technology will be useful for developing many new future NetEye modules. In my next blog post, I’ll go deeper into the description of our Design System in order to describe the project, its value, and the reason why we decided to create our own library instead of relying on a well-known existing one.
Valentina Da Rold
Hi, I'm Valentina and I'm a Frontend Developer at Wuerth Phoenix. I started out my career applying my Cryptography skills to coding, but really quickly fell in love with the web. I have been making websites and applications since 2012 and I still can't get enough of it. Along the way I found a passion for front-end development, and I use this passion to create interfaces that solve problems. When I'm not creating beautiful solutions, I enjoy cooking or doing sport, while listening to beautiful music.
Author
Latest posts by Valentina Da Rold
19. 12. 2023
Development, Events, NetEye
We spent a (Vue)day in Verona