Blueprint Developer Manual / Version 2406.0
Table Of ContentsRequirements
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.
| Name | Description |
|---|---|
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
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.
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
Instead of merging resources in the CAE, it is generally recommended to do it during the build process in the frontend workspace.
