AngularJS used in revamped, dramatically faster Joomla dashboard

Today the entire team here at Watchful are thrilled to finally share a project we have been quietly working on for months: the third iteration of the dashboard.

As you can see in the screenshot above, the new dashboard has been redesigned for maximum efficiency and rapid decision making.

You can try the new dashboard today as we launch this feature as a public BETA. Simply log in to your account and click the New Dashbord button. Currently, you can switch back to your current Dashboard in the same way.

Making space

The first change existing Watchers will notice is that the toolbar is no longer displayed when you first visit the dashboard.

In fact, all the buttons and links that previously allowed you to analyze your website or perform maintenance are no longer present in the default interface.

This change leaves more space to view more of your sites at once.

What you need to make a decision

We’ve also re-focused the information presented for each website.

Links to the frontend and backend are no longer displayed by default. Rather, we’ve increased the prominence of the tags. While these can be used to filter your dashboard (more on that below), it is common for our users to add important maintenance details in the tags.

For example, you may include maintenance contract status as a tag, which will be very helpful when making maintenance decisions.

Looking closely, you will also notice that the exact time of the last backup is now displayed in addition to the date. For busy sites, being able to quickly see the time of the last backup often saves a few clicks when deciding if maintenance can proceed.

Prioritising maintenance

For many Watchers, the decision making process is not a question of which sites need maintenance, but which sites need maintenance right now.

It is a question of priority.

Perhaps the most important factor that decides maintenance priority is the number of updates pending for each site. Thus, we now display the number of pending updates right on dashboard.

This value is much more informative than only the red/green indicator used in previous versions of the dashboard.

Powerful tools for filtering and sorting

The new dashboard also improves the tools for sorting and filtering the sites in your dashboard, which also help in the decision making process and prioritization.

Sorting the dashboard requires just a simple click of one the column headers.

Filtering is more powerful, and faster also. Just start typing in the site field and the list of sites is filtered in real time. This feature made the existing Search button obsolete, saves on mouse clicks, and makes for an more efficient experience.

Perform maintenance without the page refresh

Many Watchers have commented that their decision making process and site maintenance tasks requires a lot of switching between two views: the dashboard and site detail.

Since the new dashboard improves the decision making process, the next important task for us was to improve this inefficient workflow.

Maintenance is now performed by simply clicking the site name to reveal the detailed site info and all the available tasks. We call this the drawer.

As you can see in the screenshot below, selecting the Updater button inside the drawer allows updates to be performed in a modal popup.

When maintenance is complete, the modal is closed and maintenance can continue without waiting for a page refresh.

Modals are also used for adding and editing sites, and adding and editing tags. The latter is a huge improvement as tags can be modified on the fly without leaving the dashboard.

Faster with AngularJS, especially for large accounts

To realize our goals, it was clear that HTML and CSS would not be sufficient.

Thankfully, a number of excellent javascript frameworks are available and we chose AngularJS from Google.

Importantly, when you visit your dashboard, all of the sites in your account are loaded in a single query to the database.

Thus, the dashboard filters, sorting, and other dynamic features occur instantly.

The result is a fast and efficient workflow that very closely resembles a desktop-app experience.

Even pagination, which traditionally requires requesting new data, happens quickly as all the site data is already loaded. For users with dozens or hundreds of sites, the effects will be dramatic.

How we got here

What really kicked off this initiative was developing the Restful API for Watchful that we announced last summer.

Having all the features available in an API made it easy to focus on the UI.

Following the Watchful Executive Summit in February, the Watchful CTO Pierre-André Vullioud held a three-day UX sprint in Lausanne, CH with a long-time colleague: Yves Koekkoek of Labo Internet (Nîmes, FR).

Yves is a UX expert, and was instrumental in forming the theoretical basis of the new dashbaord.

Based on Yves analysis, the changes above were implemented with the help of our entire engineering team and design teams, and lots of internal testing.

As you can see below, the Watchful dashboard has really come along way during it’s evolution over the last 2.5 years and we look forward to feedback from Watchers on this important update to the UX.

Testimonial

Enoch Lavender
Watchful provides a clear-cut overview of my web sites, enabling me to easily keep them up-to-date with the latest Joomla/components updates as I choose. If I need support, their support is quick and effective. Enoch Lavender / easyjoomla.com.au