1.
Patterns: The new Javascript framework
Franco Pellegrini
@frapell
PloneConf 2013 – Brasilia, Brazil

2.
Current status
● Developing as if it were 2004
● 41 Javascript files registered on a fresh Plone 4.3.2
● 7 Disabled
● Resource Registry

3.
Current status

4.
Current status
● New releases of Javascript technologies require a new
release of the plone product that integrates it.
● As what happened with skinning before Diazo, you cannot
do Javascript in Plone if you're not a Plone developer.
( Not *that* bad as it was with skinning, but still... )
● Developing as if it were 2004
● 41 Javascript files registered on a fresh Plone 4.3.2
● 7 Disabled
● Resource Registry

5.
Current status
● You can easily mess JS order, compression, etc in
Resource Registry

6.
●NO TESTS
Current status

7.
Let's change the approach
● Javascript is not just a script language to make minor
modifications to a web page.
● People are building powerful applications.
● Node.js, AngularJS, EmberJS, Batman.JS, etc.
● Require.js, almond.js, Closure, UglifyJS, etc.
● Reuse and not reinvent.

8.
Say hi to Plone Mockup
● No buildout for front-end devs.
● Provide Javascript code already compiled, compressed,
mangled, etc
● No Python packages
● Friendly for Javascript developers

9.
Using existing tools
YEOMAN
● YO – Used to create the basic skeleton for Javascript
applications. Equivalent to paster.
● GRUNT – Used to build, preview and test, through tasks.
● BOWER – Package manager.

10.
Using existing tools
PATTERNSLIB
● Javascript library
● Fast prototyping
● Introduces the concept of a “Pattern”
● Mockup just uses the registry

11.
Using existing tools
KARMA-MOCHA
● Karma Plugin for use with Mocha
● Karma is a test runner
● Mocha a test framework
● Chai the assertion library

12.
A Pattern

13.
A Bundle

14.
Practical example

15.
Practical example

16.
Don't forget to test

17.
generator-plonemockup
● Depends on YEOMAN
$ npm install -g generator-plonemockup
$ yo plonemockup
● After answering a few questions, you should end up with
- bower.json
- config.js
- Gruntfile.js
- js
| - bundles
| | - widgets.js
| - patterns
| - my-pattern.js
- package.json

18.
generator-plonemockup
● If it didn't throw any error, a new 'build' folder should be
there.
● This is the Javascript you need to include in your projects
$ grunt

19.
How your reaction should be...

20.
How your reaction should be...

21.
Resources
● https://github.com/plone/mockup
● https://github.com/plone/plone.app.widgets

22.
Thank you !