Overview
DNN has long had a unique approach to our content editing experience. Many tasks in DNN can be accomplished without requiring a user to leave the page they are working on. Creating a page and editing content is done fully within the context of the page you are building. This approach allows you to quickly and easily make content changes without have to flip back and forth between a content editing tool in one browser and the finished page in another browser. The entire editing and review process occurs within a single browser window.
Maintaining Context
Prior to DNN 9, the administration experience forced you to navigate to another page to make simple administrative changes. If you needed to make an edit to your site CSS, you had to leave the page you are working on. If you wanted to create a new role so that you could give that role special editing permissions to some content on the page, you had to leave your current page. If you wanted to review an error that occurred while attempting to load a module on the page, you had to leave the page. All of this navigation takes time and requires the user to completely break their focus on the current content task. Some users would resort to using multiple browsers to handle administrative tasks, but this meant constantly switching between multiple browsers.
The new Persona Bar in DNN 9 will completely change the administrative experience for DNN. The Persona Bar was introduced in Evoq and has received extremely positive reviews. One of the primary benefits of the Persona Bar is that the slide out interface allows you to quickly access administrative functions and then slide them out of the way when you are ready to go back to editing or reviewing your content. This experience is designed to be easily accessible when you need it, but to get out of your way when you want to focus on the page.
When Speed Counts
When I first tried out the new admin experience in DNN 9, I was blown away by the speed of the UI. Opening the persona bar was blazingly fast. Shifting from admin page to admin page was amazing, and when I was done the persona bar slide out of the way and I returned to my main page with little disruption. The persona bar was so fast that I thought something must be wrong with my install and that it couldn’t possibly be working.
Anyone who has ever run a Web Forms based application knows that it can be snappy with the right tuning. Unfortunately, the post back model of Web Forms means that you are doing a lot of page loading for every little page interaction. If you update a form, you need to refresh the whole page. Edit some content and you need another page refresh. Having to go to another page to make a configuration change means suffering through multiple page reloads.
Getting a DNN page to load under 1 second is certainly achievable without too much effort – as long as you are not an authenticated user. DNN is optimized for anonymous users and is able to short circuit a lot of rendering and permissions. Once you login, DNN has to perform a lot of additional security checks and has a whole new admin interface it needs to expose. All of this turns a 1 second page load into a 2, 3 or 4 second page load. While the times are acceptable, the delays are very noticeable.
The DNN 9 persona bar and admin pages are written using a lightweight SPA based approach. Each admin page is a simple html layout with some JS interaction talking to a web service on the backend. Using this approach, we are able to significantly reduce the amount of work that the browser and server must do to render each admin page.
Going Under Cover
In order to better understand the differences between the two approaches, I decided to dive in deeper to see if I could understand where the performance improvements come from.
In looking at the DNN 8 and DNN 9 interfaces for the Scheduler service I don’t see a lot of obvious differences in functionality. They both show me all of the installed scheduler tasks and which ones are currently active. Looking at the schedule status or schedule history using the module based approach is a multi-second process. With the new SPA based persona bar, shifting tabs is under 300ms as the UI only needs to refresh some data, and we didn’t lose any functionality or information.
Going a little deeper I looked at Chrome’s developer tools to see what was happening in the browser that provided the speed boost. Loading the Scheduler in DNN 8 required almost 2 seconds since the browser had to download and process 87 different assets. The final page size is around 2Mb which is pretty heavy. Also, because most of the rendering task occurs on the server, as server load goes up, the admin experience will suffer. Additionally, due to the number of requests being made, network latency can dramatically alter the user experience.
DNN 9 is fixes many of these problems. Loading the Scheduler page can be done with 9 server requests for data and assets. The whole process completes in just under 700ms and only requires 156Kb of data transfer. Although the load time is a bit deceiving. If you look at the UpdateUserSettings web service call and the TaskScheduler.js loading tasks, you will see that we added a 500ms delay just so things don’t seem too fast. Without that delay we could load the scheduler page in about 150ms. To put that into perspective, we could load the scheduler page twice in the time it takes to blink your eye (a normal blink of the eye takes 300 – 400ms).
Summary
DNN 9 is the most significant UI change we have made to DNN since we introduced the skinning engine in 2004. The new Admin Experience allows you to stay focused on your content and not on administration tasks. When you do need to handle administrative tasks, you can quickly and easily perform those tasks and then get back to managing your content. After all DNN is a Content Management System not a Website Administration System, and the admin experience should reflect that fact.