Scratchpad#
Scratchpad for text snippets to be included somewhere else in the training.
General Advises#
Note
When providing static resources (JS/Less/CSS) for Plone 5 resource registry, use plone.resource based resources instead of Zope browser resources. The latter are cached heavily and you won't get your changes built with Zope resources.
Note
A bundle can depend on another. This is mainly used for the order of inclusion in the rendered content. Currently, it doesn't hook in the require JavaScript dependency mechanism.
This means, each bundle gets all their dependencies compiled in, which raise the response payload unnecessarily.
To avoid this, add your resources to existing bundles, like the plone bundle.
Note
The mockup grunt infrastructure is build with a convention over configuration approach in mind.
It is actually very picky about a lot of things: locations of your bundle files, location of your bundle LESS files, location of your pattern JavaScript and LESS files and the require JavaScript IDs of those.
Bundles have to be named mockup-bundles-BUNDLENAME, patterns have to be named mockup-patterns-PATTERNNAME.
Note
There is currently no API to build JavaScript and Less resources programmatically after importing them. Both build steps need the Client side RequireJS respectively Less compilers.
The resources are downloaded to your browser, compiled there and re-upload to the Plone server, where they are stored in ZODB as plone.resource <https://pypi.org/project/plone.resource>`_ resources.
We can pre-build everything using standard JavaScript and Less development frameworks, e.g. via mockup's Grunt infrastructure.
Structure#
- About this training
- Training Agenda
- DAY1
Framework Tools Create Mockup Pattern Integrate Other (Non-Mockup based) JavaScript
- DAY2
Practicing
- Preparing for the training
- About JavaScript, Mockup, Patternslib and Plone 5
History of everything, What's what.
Installation Mockup
- Development environment
JavaScript and editor support Code Linter Grunt Bower Testing
- Whirlwind tour through Mockup, Patternslib and JavaScript in Plone 5
Short explanation of the code tree / main modules: Mockup Patternslib Plone 5
- Developing a Pattern
- A Barebone Pattern
Based on collective.minimalpattern
Pattern explained
Adding a bower.json dependency
Testing the Pattern
- Integrating the Pattern
Integration in Plone 5 Integration in Plone 4 Integration in Mockup w/out Plone
No-Pattern JavaScript in Plone
The require JS (JavaScript) way
The old, require JS-less way
Using other Frameworks in Plone
Angular JS React JS
Comparison to other frameworks
Patternslib and Web Components Patternslib and React Components Patternslib and Angular JS directives Plone and ES 6