Hi everybody, I’m Andrea Coiutti (ACX in the forum), RuneAudio’s co-founder and designer and developer of RuneUI. This is the first entry in this new blog section on RuneAudio website, and I’m going to launch it with a developement post.
Months have passed since we released the first version of our PlayerUI (that was its former name) in september 2013. We unveiled it under RaspyFi project in its 1.0 release, giving an important contribution to its huge popularity boost in that circumstance. Development went on under the new RuneAudio project, keeping the same design principles and usability vision, so more improvements and new features had been introduced in the two first releases.
At some point we felt that we had to stop for a while. It was time to take an hard decision: temporarily delay new feature development (we receive a lot of requests in that sense), and focus on a priority task. A deep under the hood rework of RuneUI was needed, before adding further work on the old code base.
The following article aims to be a preview of the big changes you will find in the next RuneAudio 0.3-beta release.
The front-end – rendering performance optimizations
The first step was done on the front-end side. The original CSS code was far from being optimized: I developed it in hurry and it was full of unusued rules, overwrites and performance-expansive proprieties. This resulted in bad rendering performances on under-powered tablets and mobile devices, and consequently a weak user experience. This had to be changed.
I decided to start with the upgrade of Twitter Bootstrap (the front-end framework on which the UI is built) to the last 3.1.0 version. Version 3.0 Bootstrap is responsive from its core, and comes with the approach of Mobile First:
Nearly everything has been redesigned and rebuilt to start from your handheld devices and scale up.
This new approach translates in a remarkable boost on layout and rendering performance. Structural choices in a CSS framework can have a tremendous impact on it, and Bootstrap went in the right direction with this, aiming to the important 60 FPS draw rate for scrolling and animation on every device.
Upgrading Bootstrap from 2.x to 3.x was not a quick task, because the 3.x version is not backward compatible: many class names and common markups had changed, so it forced me to review the entire HTML code in the templates. But the effort was worth the price, because the performance had a clear boost right after the switch.
The next move was to get rid of Flat UI, the Bootstrap theme we used to set the original look of the UI. That is a great piece of software, but we were using only a small fraction of its potential, therefore loading a lot of unusued CSS in the browser. I decided to rewrite those styles by myself, coding only the necessary ones.
At this point I had in front of me the opportunity to restart everything almost from scratch. I did what I was supposed to do from the beginning: I embraced LESS.
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
LESS turned out wonderful: it let me recompile Bootstrap’s CSS choosing only the components I needed, and add my custom styles in a smart way. This was limiting code redundancy and rules overwrite. I could keep the source code well organized and modular, and quickly upgrade some parts or include others such Bootstrap third party addons. The final result is a compressed and much lighter compiled CSS, that makes page loading time faster and improves rendering performance.
The last step was the optimization of the Javascript code. This part was made together with Cristian Pascottini, who joined us as contributor and gave a big contribution in cleaning the code and rewriting some functions in a more efficient way. Welcome to RuneAudio and thank you!
The backend – mechanics optimizations
The second focus was put on backend side, on where the RuneUI interacts with the Music Player Daemon (MPD) . Simone De Gregori (Orion in the forum, co-founder of RuneAudio) is the master of that part.
We knew that standard Comet implementation of the PlayerUI was far from being perfect. Its Achilles’ heel was the php-fpm process management over multiple page views: too many PHP processes were spawn when requesting data updates from clients.
To contain this behaviour, a sort of rude control mechanism was introduced – the system daemon rune_wdog. When the total number of php-fpm processes was exceeding the maximum of 12 units, the daemon restarted the php-fpm service, bringing the total number of processes to the initial 5. The side effect of this mechanism was an increased system load, and in some borderline cases it could generate problems that were also affecting the playback quality.
After evaluating the possible options to solve the problem, Simone chose to use the Nginx Push Stream Module, a pure stream HTTP push technology that could be integrated in our Nginx existing setup. This required to recompile Nginx and properly set up the configuration of the channels. All the background mechanics of RuneUI were reworked to take advantage of the “full-push” technology offered by PushStream-module.
The results were as we had expected: much more stability (a fixed number of 4 PHP processes are now used to serve HTTP requests in all conditions), less latency in commands and updates of the UI, and higher general speed.
PHP-FPM (rel. 5.5.9) was also recompiled by activating only the necessary modules (integrated as static functions), and this resulted in an amazing performance boost of over 100%!
Backend / Frontend communication was improved introducing HTML5 Websockets, leaving COMET Long-polling technique only as a fallback to guarantee old browsers compatibility.
Simone finally integrated Plates, a native PHP template system that’s fast and easy to use and extend, with the aim to make the backend structure more rational and make the introduction of new features easier and quickier. That required to review the entire PHP code base, with the opportunity to clean and further optimize it, and all these operation contributed on an extra performance boost.
RuneAudio 0.3-beta is on the way
As you could see in the screenshots along this post, we already introduced many cosmetic and UX improvements. We are currently working on introducing new interesting features and polishing the last details. The next RuneAudio 0.3-beta release is on the way, so be ready to put your hands on the shiny new RuneUI 1.3.