Rebuilt Web Interface in Lightmeter 1.1.0: Benefits of adopting Vue.js

Sam Tuke Dec 26 2020 Share

The interface of today’s Lightmeter 1.1.0 release looks the same, but under the hood is a new, and now separate, front-end application powered by the Vue.js Javascript framework. This change brings immediate benefits to Lightmeter users and developers, and opens exciting opportunities for the future.

Vue.js end-user benefits

Dynamic real-time UI

One immediate benefit is that changes within the Lightmeter Web UI are now virtually instant, and Lightmeter is more dynamic as a result. This is because the front-end is now a Single Page Application which communicates in real-time with the back-end, without page reloads or additional API calls.

New insights appear as soon as they are generated, instead of refreshing every 30 seconds as before. When the language used by Lightmeter is changed from e.g. English to German, all parts of the page now instantly adapt.

Feature fuel

As a best-in-class front-end framework Vue.js is a powerful ingredient of future Lightmeter features. With more dynamic graphing, log navigation, and support for large email networks on the roadmap, real-time data display and manipulation will be core to future Lightmeter releases, and Vue is ideally suited for the job.

Building native mobile applications will also be more easily achievable thanks tooling and frameworks in the Vue ecosystem.

Vue.js developer benefits

Developer experience

As well as end-user benefits Vue.js also rewards Lightmeter’s front-end developers.

Firstly it enforces discipline which improves code layout and readability. Developers are rewarded with rich and convenient tooling on the commandline, in IDEs, and browser extensions, for automatically compiling, minifying, serving, debugging, and updating code. A new front-end development workflow for Vue is documented in README.md.

Additionally, support for Javascript engines in older browsers comes “for free” thanks to Babel JS compiler plugin for Vue. Now we can write modern ECMA script without concern about execution on Internet Explorer.

Try it out

If you’ve already upgraded to Lightmeter 1.1.0 then you’re benefiting from Vue.js already. But that’s just the start!

Lightmeter is Open Source: try building it for front-end development using the three-step guide in README.md file. The front-end and back-end now operate completely independently which makes front-end development even simpler. If you get stuck at any point, drop by the forum, the Fediverse, Telegram, Twitter, or email.