close

Filter

loading table of contents...

Blueprint Developer Manual / Version 2406.0

Table Of Contents

5.4.12 Client Code Delivery

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.

NameDescription
description A description of the purpose / contents of the code.
code The code stored in a CoreMedia XML property following the CoreMedia RichText schema. This allows for embedding images directly in a code fragment and enables quick fixes of client code in the standard CoreMedia editing tools.
include Other code elements that should be deployed together with this one.
dataUrl An (optional) URL of the code on an external system. Allows to also manage all code included from third-party servers as if it was part of the CoreMedia repository.

Table 5.14. Client Code - Properties of 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

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

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

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

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.

The process of merging only applies to source files, that don't have a Data URL property. If a 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

To enable merging of JavaScript and CSS files you can use the property cae.merge-code-resources switch to control the behavior. The default is false.

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.

Note

Note

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

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.