Some thoughts about frontend improvement


I’ve been quite busy in the last 2-3 weeks building what’s basically a completely new frontend for a customer. It’s not as general purpose as the current info-beamer web dashboard and “only” handles configuration of a single type of package, but it’s basically a complete frontend to manage

  • Authentication (login/logout)
  • Devices (add/remove/rename/group/etc…)
  • Device details (live view/sensor values/device configuration ui)
  • Assets (similar to the new asset page)
  • Setups (add/remove/copy/configure/assign)

This is implemented as a Vue.js based single-page app. In other words: You can upload assets while editing the setup and it’s quite snappy as there’s no page reloads, only API calls. In addition the result can be deployed on any static webserver as there’s no extra backend part required. Only the API is used.

Writing this code proved two things to me:

  • The API is (as expected) fully usable for building almost any kind of frontend on top of it.
  • Modern frontend development can actually be really fun.

The current state of the frontend isn’t optimal and there’s a lot of minor issues that needed to be improved for a while now:

  • Uploading assets while editing a setup’s configuration
  • Major improvements regarding the handling of the auto generated interfaces for setups (like easier reordering in playlists and so on)
  • Sorting/grouping of setups/package/devices

Now I figured I might approach this in a new and interesting way: I might build a new configuration frontend replacing the current Devices/Setups/Packages and Assets tabs using a similar approach as described above. In addition to that, the full source code for that frontend could be released on github. This would enable you to

  • Build your own modification based on the Frontend and deploy it for your customers using the info-beamer hosted service as your reliable backend.
  • Build white label pages for customers while having the full control over how the frontend behaves.
  • See how the API is used (well, technically you can already poke into the API calls made using the web inspector)

Thoughts and feedback welcome. Note that this isn’t a promise and there’s no ETA for any of that.