Requirements
Client code such as JavaScript and CSS is changing more rapidly than JSP templates and back-end 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. |
disableCompress
|
Prevents the CAE from compressing the code. Setting this flag is recommended if the code
is either already compressed or if it is not compatible with the compression engine. The
CSS Importer and the
coremedia-webresource-content-maven-plugin automatically set this flag
if the compatibility test fails or 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 6.15. Client Code - Properties of CMAbstractCode
Client code is associated with site sections. CMNavigation content items contain
references to the CSS and JavaScript items to be used within the section. Child sections inherit
code from their parent. 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.
| Name | Description |
|---|---|
javaScript
| The CMJavaScript scripts used within the context. |
css
| The CMCSS style sheets used within the context. |
Table 6.16. Client Code - Properties of CMNavigation
Additional resources for preview
Additional CSS and JavaScript can be added to sites for use in
CoreMedia Studio and the embedded preview. CSS will be included in
Page.head.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.
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.
Requirements
Reducing the overhead of both client request count and data transfer sizes for client codes and web resources such as JavaScript and/or CSS.
Solution
- Minification of client codes: 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. For the CAE, the minification of web resources is turned on by default. 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.
- Merging of client codes: 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 merged by default. As a matter of fact, both features cannot be turned on or of separately.
![[Caution]](../common/images/caution.png) | 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 cae.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.
 |  |  |
 |