7. RequireJS
<!DOCTYPE html>
<html>
<head>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
• Include require.js </html>
// File: app.js
// For any third party dependencies, like jQuery, place them in the lib folder.
!
// Configure loading modules from the lib directory,
// except for 'app' ones, which are in a sibling
// directory.
requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
!
// Start loading the main app file. Put all of
// your application logic in there.
requirejs(['app/main']);
• Add all your dependencies
in Javascript
• Async loading of files and
modules
15. LESS Vars
<!-- Mixins vars for less with the paths -->
<record name="plone.lessvariables">
<field type="plone.registry.field.Dict">
<title>Less variables</title>
<description>Variables that are going to be compiled on less</description>
<key_type type="plone.registry.field.ASCIILine" />
<value_type type="plone.registry.field.TextLine" />
</field>
<value>
<element key="bowerPath">"{site_url}/++plone++static/components/"</element>
<element key="mockupPath">"{site_url}/++resource++mockup/"</element>
<element key="mockuplessPath">"{site_url}/++resource++mockupless/"</element>
!
<element key="plone-link-color">rgba(0,123,179,1)</element>
<element key="plone-gray-lighter">lighten(#000, 80%)</element>
<element key="plone-gray-light">lighten(#000, 46.5%)</element>
!
<element key="plone-toolbar-bg">rgba(0,0,0,.9)</element>
<element key="plone-toolbar-submenu-bg">rgba(20,20,20,.9)</element>
<element key="plone-toolbar-font-primary">'Roboto Condensed', sans-serif</element>
17. Development & Production
<record name="plone.resources.development">
<field type="plone.registry.field.Bool">
<title>Frontend development mode</title>
</field>
<value>true</value>
</record>
• Compile on browser on each
reload using RequireJS / LESS
• Develop static HTML with
compiled bundles
• Grunt using browser config.js/
mixins.less
• Get the compiled css/js
bundles
• Deployment with compiled
css/js
28. Migration
• Resources defined as pattern and less file
• Always generate production bundle
• Move jsregistry and cssregistry to registry.xml
• On/live jquery 1.11 modifications
• Never loose hope
29. Questions ?
• Additional info at:
• https://www.nathanvangheem.com/news/plone-5-
resource-registries
30. SPRINT
• Static CSS/JS for mockups / CDN
• Cooking on production
• Mockup issues
• Write documentation!!
• Write tests!!