close

Filter

loading table of contents...

Blueprint Developer Manual / Version 2107

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.
disableCompress

Prevents the CAE from compressing the code. This flag only has any effect if a corresponding com.coremedia.blueprint.cae.view.processing.Minifier is provided to the com.coremedia.blueprint.cae.view.MergeableResourcesView that handles the given content type. If this is the case, setting this flag is recommended if the code is either already compressed or if it is not compatible with the compression engine. The Theme Importer automatically set this flag if the file extension is .min.js or .min.css.

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.

Minification

In order to reduce the data transfer to the client, JavaScript and CSS files are usually minified, meaning, that all unnecessary characters are removed from the source code. This results in smaller files, hence reduces the amount of data that needs to be transferred to the client. This can especially be useful for mobile clients. Each needed source file is processed by a minifier. The minifier strips all comments, whitespaces and any other unwanted information from the source code and compresses it. The ideal result will be a source file with just a single line of code.

Themes build with the Frontend Workspace will automatically be minified. If for any reason you only want to minify the client code on delivery side you can implement the com.coremedia.blueprint.cae.view.processing.Minifier interface and provide your minifier to the corresponding bean of type com.coremedia.blueprint.cae.view.MergeableResourcesView.

Merging

CoreMedia Blueprint also offers a merging process which compresses all JavaScript and CSS files into a single one each. The merging, if turned on, immediately follows the minification step. Client codes are also combined by default. As a matter of fact, both features cannot be turned on or of separately.

Caution

Caution

The process of minification and 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 in both process steps and result in each file rendered separately into the source code of the page.

Configure minification and merging

For debugging purposes during the development, it might come in handy to disable the minification and 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 the minification and 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

Warning

Merging code resources improves website performance and is generally recommended for live sites.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

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