Franco Pellegrini and Johannes Raggam: Ready, set... Mockup!
Talk by Franco Pellegrini and Johannes Raggam at the Plone Conference 2014 in Bristol.
For example the 'moment' pattern:
<span class="pat-moment">some date</span>
That will output a nicer date using the client browser language.
History of mockup. Based on Patternslib, created by Cornelis Kolbach and Wichert Akkerman and others in 2011. Forked by Rok Garbas in 2012, split up in Mockup and Mockup core in December 2013. plone.widgets and plone.app.widgets by Nathan van Gheem in November 2011, an attempt to bring more modern UI to Plone.
- Yo: used to generate base skeleton
- Grunt: comparable to buildout for js
- NPM: node package manager
- Front end: RequireJS.
- Testing: Karma, Mocha, ExpectJS/CHAI
[Showing some code.]
We made a generator for mockup:
npm install -g generator-plonemockup yo plonemockup
Then you answer a few questions and you get a base pattern.
Now do some coding and call make and it will minify, create a bundle, etc.
There is a training that you can follow online:
- Patternslib is still being developed and is of course similar to Mockup due to the shared history.
- Web components, w3c draft. Some experimental projects, Google Polymer, Mozilla X-Tags. Limited browser compatibility. Status: html templates is completed, shadow dom and html imports are in draft.
- AngularJS directives are similar to Mockup. Angular is full stack framework. It will switch to Web Components once it is ready. Hard to migrate Mockup to using AngularJS of course.
Our opinion about Mockup: great framework, big improvement to current situation, nice workflow, but uncertainty about future, maybe Angular could be better. Open space tomorrow at 11:00.
Watch the video of this talk.