Our 1-2nd vision - how we made content-editing 10x faster in 2sxc 8.0

Our vision is to get things done in 1-2nd (one second :). Imagine a world where you don't feel remotely connected but just getting things done. For this to happen, interactions must be fast, immediate and efficient. So in keeping with this vision, we asked ourselves:  

• What are the most time consuming interactions? 
• How often do I do them? 
• Which ones could we automate - or remove completely? 
• What are missing actions - which I cannot do - but would save me a lot of time? 
• What are the features in 2sxc which save time, but unknown to web designers - so don't currently benefit the end user? 

With this and more we went to work and basically reworked everything. The first thing you'll notice on 2sxc 8 is the speed - which is funny, because in 10 minutes you won't notice it any more, but curse about all other components which don't react as quickly. Here's a short list of our core improvements - if you're a module developer, you may want to try some in your module as well: 

1. In-Page hover-edit-buttons in view mode - this is very important, because in the common "edit" mode dnn adds a lot of things to the page which need a lot of javascript (jquery) work in the browser, and really kills UI performance on longer pages. Since the Content-module is often used on long content-pages or even single-pagers, this was a real problem - and since our buttons only appear on mouse-over, they don't hurt the view-mode. 
2. Super-fast light-box - here too we had to go our own way using a full-screen iframe and a semi-transparent background. This is very important because of the way dnn handles dialogs, save-actions and similar, which often do MULTIPLE full page-reloads (with everything inside including viewstate) just to finish a save-operation. 
3. Refresh edited content in the page using AJAX - so after saving, the page does not reload in Content-mode (it does in app-mode for now). This is great in terms of speed, but even better when you remember all those times you had to scroll back to the right position to check the result… 
4. ADAM (automatic digital assets manager) - this guy reduces image and document upload time to the desired 1-2nd - from originally at least 30 seconds (picking remote folders, selecting local folder, wait for upload, re-select the image, click ok… - all gone now :) 
5. Plain HTML Edit-UI - so we're getting ready for a future without asp.net, without viewstate and without dnn the way it works in 7.x or even the upcoming 8.x. So actually our UI is a simple HTML-page (ui.html) which has ZERO server-side code. Since the ui doesn't load a dnn-page, it's really, really fast… 
6. Dialog-Parameters in the fragment-identifier (#) instead of search (?) - this is really cool, because the browser doesn't re-request ui.html (with a search-param it would) and in addition to that, we can use a LOT of parameters (while the search-param is limited to about 1000 characters, depending on the browser) 
7. Merged JS-Libraries - we use a special Grunt-job to merge all the js-libraries we need (like AngularJS, angular-translate, angular-switch and many more) into one single .min.js file. This has a massive impact on performance and is much more reliable than using client-dependency 
8. Merged JS code - our entire application has about 10'000 lines of JS code, which are distributed in around 100 files. But the client only gets a merged, compacted and minified version of this - which means speed, speed, speed. 
9. Minified JS - we noticed an extreme performance boost using minified JS, so again we use Grunt to minify our JS. There are different theories out there, but we believe it's really significant. 
10. Merged and minified CSS 
11. and before I forget it - doing it all in the browser using AngularJS is amazing - both from UI performance as well as developer speed (after an initial, steep learning curve...)

We also added many new features which make content-work more efficient, but I'll save those for another post...

Love from Switzerland,