Friday, 09 July, 2021
Case Study: An embedded Laravel and Vue.JS Website
Building an embedded Web Application on Linux with Laravel and Vue.JS
Audio Design Reading Ltd (ADRL), a supplier of professional audio equipment for the broadcast sector, were looking to update an almost legendary product of theirs called the SyncroGenius.
The SyncroGenius is an audio and video master clock generator and synchronisation tool. Explaining exactly what a master clock generator does is not easy, but in essence it's a highly accurate and robust clock used to reliably synchronise the timing of devices in recording studio environments to prevent audio drift and jitter (pops and clicks) in the combined audio.
Read on to find out more.
The new SyncroGenius would be a 1U rack mounted unit running on Linux. It would require a web server to host a "command and control" Web Application which would need to:
- Reflect the unit's state and configuration in real-time.
- Have a small resource footprint on the server.
- Enable a way to update the unit remotely.
- Work on an intranet without an external connection to the internet.
There are multiple Web Servers available for Linux, including the Apache, Nginx and Lighttpd. Typically, these run server side code under PHP or NodeJS, but there are other options such as Ruby, Python or Java, even potentially ASP.Net Core.
The real-time updates would required the receiving regular data updates from with the server, possible options included Polling, Web Sockets and Server Side events.
We went for an Apache Webserver with Laravel PHP server side, Vue.JS and BootstrapVue for the frontend, a PHP API for issuing commands, and Laravel Echo(Web sockets) for receiving real-time updates.
Laravel is a grownup PHP framework based on sound software engineering principles and patterns, offering many useful features out of box, such prebuilt components for securely handling user login and URL routing, helping to improve the speed of development and overall security of the application.
Laravel also comes with support for SQLite to enable the web application to persist state information on the server (such as user profiles and preferences). It comes with Laravel Mix, a wrapper around Web Pack, allowing developers to minimise and bundle code for better performance; and its documentation is tremendous.
Vue.JS was chosen to enable the easy creation and reuse of user-interface components. This was paired with Bootstrap Vue to give a common set of controls out of the box. Updating the dashboard to visually represent the data arriving via Laravel Echo using Vue's data binding facilities was natural and elegant with the view updating as the data flowed in to the application.
Laravel isn't designed with embedded systems in mind, some features expect the website to be hosted on a traditional webserver, with full online access to the internet and its myriad of cloud services. Occasionally this caused a problem and required thinking outside of the box and finding solutions other to those recommended by the documentation.
For example, to deploy and update new versions of the application we needed to wrap the website files up along with some system (hardware) file updates and bash scripts, these needed to zipped and signed using OpenSSL and to be remotely applied using the web interface. Laravel and Laravel Mix just don't imagine being used this way! To resolve this issue we had to build a Grunt task runner wrapper around Laravel Mix to support our installation build process.
This was an enjoyable project.
Laravel and Vue worked well to produce an attractive real-time dashboard interface, although there were some off-road challenges implementing many of the embedded system's requirements and features, the versatility of Vue.JS and fantastic Laravel documentation really helped resolve the issues and signpost me towards potential solutions.