Migration Plone 4 Javascript to Plone 5

Plone 5 comes with a new resource engine. This engine called Mockup is powered by lots of cool javascript frameworks. But this innovation does help you nothing if you just want your old code up and running. It's more like facing the mount Everest to clinb on your way to the bakery.

My starting point was:

I have 600 Lines of generic AJAX JS code wich

* maps a whole lot of dexterity based add, edit, delete views into popups - by the virtue of jquery-UI

* shows containers as jDatatables

100% of the views designed for Plone 4 worked on Plone 5. But 10% of the widgets are gone - the date-time widgets.

After two days of debugging I had understood the problem well enought to ask for help

http://stackoverflow.com/questions/35688167/plone5-mockup-widgets-like-pat-pickadate-not-working-for-dynamically-generated-c

It took this day to solve the problem. So here come the answers.

1) Don't expect a simple OOTB solution - there is none. Plone 5 is quite new and the proposed way to migrate old JS called "Plone-legacy" is not well documented and seems to be broken.

2) Use Mockup. I don't really like to use a technology their inventors state that it will be obsolete in 1-2 years but it seems to be the only usable way to be to procede with JS for third-party plone products. Currently nobody but the Packages Products.CMFPlone and Mockup are using it - but it is a proposed standard for Plone for the next two years - yiepie a yeah!

3) Don't hook your JS Code into the "Plone" or the "Plone-legacy" bundle! If something is wrong with your code you will be locked out of the resource-registry-control-panel. It is really hard to delete things from the plone registry and it is sometimes impossible without a commandline debugger. And even with a debugger it is hard to delete bundles of the registry.

My "solution" presented here is not a productive grade solution. It is a pointer to help your self to understanding and to perform better.

The starting point for the solution was the mockup-minimalpattern package. The package and if you have installed it is quite huge for a minimal package. But if you break it down it comes to only a hand full of files that are really needed.

Clone this repo, bootstrap it,  include it into your build as dev package, restart your plone and install the package.

Then point you Browser at <your-Plone-site>/@@minimalpatterndemo . If you see three lines "uh what" and others red with blue background you have a working ground to start from.

If you see three lines with "uh what" on non blue background - then you strafe  an error in mockup-minimalpattern https://github.com/collective/mockup-minimalpattern/issues/2 preventing the modul for compling under plone 5.

Of mockup-minimalpattern only a few files are really needed:

js/js/config.js

js/js/bundles/minimalpattern.js

js/js/patterns/minimalpattern/pattern.js

configure.zcml

profile/registry.xml

If you are familiar with generic setup you will have no problems to understand these files and adjust them to your needs.

The JS code of your Plone 4 Package goes into the "init" statement of the "js/js/patterns/minimalpattern/pattern.js" file.

Now place a

<div class="pat-minimalpattern"></div>

in your page template and a bundle with your JS included will be load and excecuted.

Now rebrand the code to become yours.

Best

Volker