TECH RADAR — Real-time data visualization with Nuxt
When thinking outside of the tech box resulted in optimized decision-making
Our clients must make informed decisions to succeed in their business, which makes decision-making support vital. Take one of our large manufacturing clients. Their facilities’ success relies on numerous machinery operating efficiently. Getting immediate insights about function and performance is essential for optimizing operations, predicting maintenance and minimizing downtime.
Unfortunately for this use case, existing solutions lack the necessary immediacy for informed decision-making, leading to inefficiencies and financial losses.
Our solution: a robust web app that delivers real-time and visualized data for immediate and understandable insights, enabling swift and educated decisions. To deliver, our developers thought outside the box with a Nuxt3 tech stack that can handle many messages from a message queue, aggregate their data and visualize it in real-time in the web browser
Though unconventional — as we didn’t ship an SEO optimized, presentational website — the full-stack capabilities of Nuxt have proven a success for our clients to solve their business application needs.
The technical challenge
The core technical challenge was gathering, processing and condensing lots of real-time data swiftly to present it comprehensively as chart visualizations in the browser to users. (FYI, “lots of real-time data’’ means approx. 500 data points recorded per machine per second for a fleet of 10 to 20 machines per application instance.) Doing so required seamless integration of RabbitMQ for data ingestion from IoT sensors to Nuxt and of web sockets for sending visualization data from Nuxt to the browser. Furthermore, the measured data needed to be stored efficiently to retrieve it for quick historic data analysis and traceability.
An outside-of-the-box solution
To bring it all together, we leveraged Nuxt’s back end capabilities to always have the latest measured data point values available for distribution to all connected browsers via websocket messages. Nuxt’s different rendering strategies allowed us to prepare infrequently changing data on the server side, and render continuously changing data, like charts, on the <client-only>. This resulted in a very snappy user interface to navigate through. Using TypeScript throughout the entire project simplified and streamlined development, because the team could work full stack, end to end, from frontend components to backend services with the same language.
In addition to enhancing project efficiency, using Nuxt in this way also enabled greater focus on solving features to create the best possible Vue3 powered user interface for the client. With it, we successfully integrated RabbitMQ with the Node.js amqp library to consume and publish messages, web-socket communication with socket.io, and TimescaleDB with Prisma to query historical data.
Lessons learned
From prototype to production, our developers showcased Nuxt’s extensibility and ease of use in creating applications that facilitate data from different sources. It also proved a great choice for building full-stack applications within one code base. Some thought needs to be put into structuring the backend code of course, because the framework doesn’t define any conventions, but the freedom it offers makes code even more fun to write.
This project also serves as a blueprint for IoT data integration into web-based visualization applications for daily decision-making support. I think it’s clear that Nuxt is up to creating business applications with low to medium business logic complexity. You can imagine how well a similar approach would work for other kinds of business applications and use cases.
Overall, it’s important to understand that sometimes the less obvious approach is the best solution. Evaluating pros and cons of technical building blocks and mixing them up in unique combinations can lead to impressive results!
This article was written for Sclable’s blog on Medium by our Director of Technology, Christoph Ambichl. Follow us on LinkedIn to get notified of new posts or check out our website to see the work we do!
If you liked it, give it a 👏 and share if you ❤️.
