Patterns: The new Javascript framework

Franco Pellegrini@frapell

PloneConf 2013 – Brasilia, Brazil

Current status

● Developing as if it were 2004

● 41 Javascript files registered on a fresh Plone 4.3.2

● 7 Disabled

● Resource Registry

Current status

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

Current status

● You can easily mess JS order, compression, etc in Resource Registry

●NO TESTS

Current status

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.

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

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.

Using existing tools

PATTERNSLIB

● Javascript library

● Fast prototyping

● Introduces the concept of a “Pattern”

● Mockup just uses the registry

Using existing tools

KARMA-MOCHA

● Karma Plugin for use with Mocha

● Karma is a test runner

● Mocha a test framework

● Chai the assertion library

A Pattern

A Bundle

Practical example

Practical example

Don't forget to test

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

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

How your reaction should be...

How your reaction should be...

Resources

● https://github.com/plone/mockup

● https://github.com/plone/plone.app.widgets

Thank you !