Requirements

Client code such as JavaScript and CSS is changing more rapidly than frontend templates and backend business rules. To deliver JS and CSS changes conveniently it is a common pattern to consider those as content and use the common editorial workflow (create, approve, publish) to deploy these to the live environment.

Solution

CoreMedia Blueprint provides the content types CMCSS and CMJavaScript which both inherit from the common super type CMAbstractCode.

Client code is associated with themes or site sections. CMTheme and CMNavigation content items contain references to the CSS and JavaScript items to be used within the section. Child sections inherit code from their parent if this code is defined in a theme. They can extend it to refine their section layout. This enables editorial users to quickly associate new design to sections that stand out from the rest of the page, or even roll out a site wide face lift without having to redeploy the application itself.

Note

CSS and JavaScript added to a page will only apply to this page and will not be inherited. To apply layout changes to all subpages of a page, it is recommended to create a new theme.

Additional web resources for preview and fragment preview

Additional resources for preview

Note

For preview and fragment preview settings and resources it is recommended to manage them in the theme, since it is now possible to define settings there. For more information see Frontend Developer Manual.

Additional CSS and JavaScript can be added to sites for use in CoreMedia Studio and the embedded preview. CSS will be included in Page._additionalHead.ftl and JavaScript in Page._bodyEnd.ftl after the regular web resources.

The settings are organized as linklist properties. The name of the linklist for CSS itself must be previewCss and previewJs for JavaScript. The settings must be attached to the root channel of a site.

Warning

In earlier versions the css/preview.css and js/preview.js of the theme were attached via this setting as well. This is no longer needed as the theme build mechanism will handle adding preview related resources itself.

Additional resources for fragment preview

Additional CSS and JavaScript can be added to sites for use in CoreMedia Studio and the embedded preview for fragments, for example, Articles. CSS will be included in Page._additionalHead.ftl and JavaScript in Page._bodyEnd.ftl before the regular web resources.

The settings are organized as linklist properties. The name of the linklist for CSS itself must be fragmentPreviewCss and fragmentPreviewJs for JavaScript. The settings must be attached to the root channel of a site.

Note

Keep in mind: The CSS and JavaScript for preview are loaded after the regular web resources and the ones for the fragment preview are loaded before them! Both additional web resources can be combined.

Web Performance Optimization

Besides the concepts for managing and deploying client code from within the content repository, CoreMedia Blueprint also features mechanisms to both speed up site loading and reduce request overhead during the delivery of web resources.

Reducing the overhead of both client request count and data transfer sizes for client codes and web resources such as JavaScript and/or CSS.

Merging

CoreMedia Blueprint offers a merging process which merges all JavaScript and CSS files into a single one each. Client codes are also combined by default.

Caution

The process of merging only applies to source files, that don't have a set IE Expression or Data URL property. If an IE Expression or Data URL is set, the file will be skipped and result in each file rendered separately into the source code of the page.

Configure merging

For debugging purposes during the development, it might come in handy to disable the merging feature. You do that by turning on the delivery.developer-mode property switch, either provided with a standard property file, or via a Maven switch. Inside the cae-preview-webapp module, all you have to do is to start the preview CAE web application locally using the Maven Tomcat plugin.

In some cases it might be useful or even necessary to avoid merging of JavaScript and CSS files without enabling the developer mode. For this you can use the cae.merge-code-resources property switch to control the behavior. If set to true (which is not the default), code resources are merged when development mode is off, that is, if no developer is given to construct a page.

Warning

Instead of merging resources in the CAE, it is generally recommended to do it during the build process in the frontend workspace.