template assets

iJungleboy edited this page Jan 14, 2018 · 4 revisions

Optimizing Template Assets / Client Depedencies (JS & CSS)

Purpose / Description

This page is about using DNN Client-Resource-Management aka DNN Client-Depedency-Management in 2sxc templates.

Whenever a template needs additional files, specifically

  1. JavaScripts
  2. CSS Styles
  3. Image Resources
  4. Fonts

These should be included in an optimized form to enhance performance dramatically. This is all about reducing the amount of server requests (very important for end-user performance) and delivering them in the order / places in the HTML-file, optimal for their purpose.

So far 2sxc will take care of your JS/CSS files by bundling and minifying them, at the position and order you need.

How to use

Here's a trivial example for optimizing a CSS with default settings:

<link rel="stylesheet" href="/style.css" data-enableoptimizations="true" />

Here's a more typical example, showing an optimization for a style & js which are inside the app-folder. This example uses Razor, so we use @App.Path to ensure it's picking up the right folder (use [App:Path] in token-templates):

<link rel="stylesheet" href="@App.Path/assets/style.css"
    data-enableoptimizations="150" />
<link rel="stylesheet" href="@App.Path/assets/lazy.css"
    data-enableoptimizations="bottom" />
<script type="text/javascript" src="@App.Path/assets/scripts.js"
    data-enableoptimizations="200:bottom" />
</script>

This shows:

  1. a CSS with lower priority (150 instead of the default 100)
  2. a css with which will be placed at the page bottom (so it will load later)
  3. a script-tag and specifies priority and placement inside the HTML document

How it works

Basically all <script> tags and all <link rel="stylesheet"> tags can have a data-enableoptimizations attribute, which the system will parse according to the environments capabilities. In DNN 7/8/9 this means it can

  • can assign priorities (to ensure load-order)
  • can assign placement in the html-document (head, body, bottom)

Understanding Priorities

There is a fairly complicated article in the dnn wiki about client resource management which explains most of it. In general you can say that all DNN scripts load with priorities below 100, the default for all standard scripts is 100, and from there you can order things as you need them.

We usually prioritize libraries like 2sxc or angular.min.js with 100 or larger, and then place our own script (like an app-blog.min.js) at numbers like 200.

Understanding Placement

Placement information can only be supplied in 2sxc 8.9 or higher. The three positions are:

  • head meaning that the resulting data is requested in the HTML header. So it will be loaded before the page is rendered, meaning it's available right from the start but also delays page-build. This is often detrimental in terms of page-load times.
    this is the default location for CSS files
  • body meaning it will be loaded in the beginning of the HTML body tag. Again this means it's there very early, but will slow down page buildup.
    this is the default location for JS files
  • bottom meaning it will be loaded at the end of the html document. This is actually great for page-loading performance to improve above-the-fold loading. But it takes a bit of work to perfect its application.

Read also

Demo App and further links

You should find some code examples in this demo App

  • basically this is used in every app in the app-catalog

History

  1. Introduced in Version 04.00 with true/false
  2. Enhanced in Version 06.00 with priority numbers
  3. Enhanced in 08.09 with position head/body/bottom
Documentation Overview

This is where you can find things like...

Concepts / Features

Basic Concepts / Features
Advanced Concepts / Features
Developer Concepts / Features
For Contributors

API References

C# API
C# API in Razor
C# API in WebAPI
DataSources
Field Data Types
Field Input Types
HTML & JS API
REST API / WebApi
Templating
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.