This document introduces Patterns, a new Javascript framework for Plone. It summarizes the current state of Javascript development in Plone, which involves many individual JS files and no standard testing. The document then proposes adopting existing Javascript tools and best practices, including Yeoman for scaffolding, Grunt for building and testing, Bower for packages, and Mocha for testing. It demonstrates a new approach called Plone Mockup that uses these tools to provide pre-compiled and tested JS code through patterns and bundles. Generators are also introduced to easily set up new Mockup projects which produce a build folder with all necessary JS files.

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

8. 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.

9. 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

10. 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.

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

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

13. A Pattern

14. A Bundle

15. Practical example

16. Practical example

17. Don't forget to test

18. 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

19. 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

20. How your reaction should be...

21. How your reaction should be...

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

23. Thank you !