Spring-cleaning our frontend

July 8, 2015

In a previous article we discussed our current focus on performance improvements for content managers. We're making a significant effort to make pages render faster and give users a sleeker frontend.

State of the art

Over the years we have allowed our JavaScript and CSS to grow - we have been too lax about profiling JavaScript or controlling the output of our SASS/Compass-generated stylesheets. The results is an excess of code fragments throughout the system that are outdated, unused or over engineered. It's time to change this.

As an open source project, we do our spring-cleaning in public, so you're invited to have look at all the improvements we're making. We encourage you to comment and give us feedback, using our issue tracker or our email list for developers.

To drive these improvements, we have introduced the Gulp task manager. Usage and implementation is well documented. Feel free to checkout our development branch and run the Gulp commands such as gulp sass, gulp icons or just simply watch the files through gulp watch. Gulp will help us to be more efficient maintaining the frontend stack within the django CMS.

These improvements will only affect contributors and are by no means install requirements. All files will be shipped compiled, minified and concatenated for you.

Libsass

We have begun implementing libsass instead of using SASS/Compass to decrease the usage of mixins and unwanted vendor prefixes. This makes our styles more sleek and lowers the request time. We have also been working on reducing CSS specificity, and getting rid of unwanted nesting or !important statements.

These are just a few of the measures we've adopted in our effort lighten the load imposed by our stylesheets. There's more:

implementing font icons for our imagery - no more sprites
controlling all assets of our styling through variables
reorganisation of our folder structure for component-driven development
switch from tabs to spaces (yay)
more comprehensive frontend documentation
adapted our code to certain guidelines

JavaScript

We have done a great deal of work on profiling, optimisation and simplification. We are giving our JavaScript some much-needed attention. As well as splitting up files to a component-driven workflow, we are:

minifying and concatenating files for production
switched from tabs to spaces (double yay)
creating smarter ways to protect our namespaces
improve initial load and run times
adapted our code to certain guidelines

Experience

User experience is one of our core goals for the upcoming releases. One effort that we have embarked on recently and posted to the community is the new "simple structure board". This mode will eventually replace the existing rather resource-hungry structure board, to a sleeker, faster alternative. This option can be set by adding CMS_TOOLBAR_SIMPLE_STRUCTURE_MODE = True to your settings.

In the new structure board, all placeholders will be aligned beneath each another. Visual padding will help avoid conflicts with fixed positioned elements. We also separate placeholders from static_placeholders to make it easier for you to distinguish them.

We would like to hear your feedback on all these efforts. If you have additional ideas or just want to help contribute to these efforts, don't hesitate to get in touch with us.