Re: [Framework-Team] [Plone-developers] JS/LESS integration - result Zidanca Sprint - Feedback

Ramon, thanks for the insightful sum-up! Indeed, there was an impressive
progress on mockup done by the trio Ramon, Nathan and Rob. I was also
there and got my head wrapped around the whole mockup thing a lot more
than before and I'm looking forward using it.

Cheers, Johannes

On Tue, 2014-08-19 at 10:25 +0200, Ramon Navarro Bosch wrote:
> After recovering from a hard week of work, thinking and
> writing/re-writing code we acomplish an important goal in Zidanca
> Sprint, a replacement for Resource Registry adapted to modern
> front-end dev and friendly with mockup widgets.
> 
> 
> The back history :
> 
> 
> Mockup project is a great bunch of widgets/ui elements written in
> less/js using the idea of patterns lib to trigger and configure the
> widgets with data attributes on the html elements. This elements where
> compiled on single files using requirejs/grunt/less so it could get a
> bundle version that can be shipped with plone. The problem of this
> solution is that is outside plone, you get the bundle and you can't
> modify it, split, debug. There was a solution to make it closer to
> plone but you needed a complet setup of mockup repo and every single
> js that you want to integrate with that needed to be stored on mockup
> repository. 
> 
> 
> Some months ago I started a project that needs toons of js/css and we
> were going to use mockup widgets on it, so I started to feel a lot of
> pain when I saw that in order to get it working I needed to fork
> mockup repo, adapt to use a complex grunt configuration and I ended
> having huge problems integrating mockup with other add-ons, js
> projects, ... So I thought that if mockup is needed to be on Plone 5
> and it needs to be friendly with integrators we need to find a better
> solution. 
> 
> 
> On the other hand we needed to find a way to allow people to extend
> mockup, create its own patterns on their packages and finally make it
> easier for people to write their code for plone.
> 
> 
> PLIP :
> 
> 
> At that moment I wrote the PLIP (https://dev.plone.org/ticket/14261)
> with an initial implementation. It's main idea is:
> 
> 
> * As we are using requirejs on mockup for getting the resources and
> less for css
> * As we are using less on barceoneta theme to create a bunch of files
> that defines all the parts of the theme
> * As plone uses plone.app.registry to store the configurations
> 
> 
> * Create a plone.app.registry interface to store the
> bundles/resources. Bundles are a group of resources or one that gets
> its dependencies. Resources are a group of js/css files that defines a
> resource (pattern modal : 1 less , 1 js). All these resources have
> definitions of its requirements ( with requirejs or import less ).
> Bundles have the expression condition as we will have one css/js
> element for each bundle
> 
> 
> * Create a config.js and mixins.less browser views that defines the
> names and urls of all the possible dependencies
> 
> 
> * Define the "oficial" group of external js/css elements that is
> deployed with Plone and its versions. Creating a bower.json on static
> folder in Plone and adding the bower components folder on CMFPlone. So
> if you want to know which jquery version uses Plone5 you have a place
> at bower.json ( you can always update it at your own risk overwriting
> the resource jquery )
> 
> 
> * Define a Dev and Production mode on frontend plone. Each bundle will
> be minified/compiled into a js/css file when you change the status
> from dev to production. 
> 
> 
> * Create a nice UI !! ( nathan rocks soo much ! ) Using the patterns
> library you can see the bundles, resources, modify them, overwrite
> them TTW, define LESS variables, compile them,...
> 
> 
> * Move Tinymce to a oficial version without patches that is already
> translated and works on different languages. One big task is to move
> the tinymce control panel to plone 5, Rob did a really great job on
> it !
> 
> 
> * Define resource configuration, each resource can have a default
> configuration with json so it can be retrieved.
> 
> 
> * Create a legacy importer, we already adapted the jsregistry.xml and
> cssregistry.xml to import its elements to the new registry
> 
> 
> * Be friendly with the Legacy code, in order to support legacy js/css
> code that is not requirejs compatible or less, there is a plone-legacy
> bundle that gets all the resources that are legacy and
> minimizes/compress it for production
> 
> 
> ACTUAL STATUS
> 
> 
> So we could acomplish all our goals, the implmentation is there, it
> needs the resource registry tests to be adapted to the new one,
> upgrade steps, documentation, tests on the ui, some edge use cases
> that need to be tuned (when we should compile legacy code, when you
> install a package ? when you modify the registry ...)
> 
> 
> As the Zidanca sprint was also a plone5 theme sprint, Albert and
> Victor where working hard integrating all the GSOC with plone5. We
> needed the toolbar working, we needed the less compilation and all
> this code is outside of mockup, so we merged our work and actual
> 13787-maintemplate-remove (I know the name is really bad) PLIP
> configuration is the actual merge of the latest plone 5 barceloneta
> theme and this JS/LESS integration.
> 
> 
> There is a JK job for this
> plip.cfg : http://jenkins.plone.org/view/PLIPS/job/plip-main_template-remove/
> 
> 
> 
> 
> What needs to be done ??
> 
> 
> * What we have on global js namespace on plone development mode:
> jquery and all the legacy code. On development mode requirejs loads
> the resources when are needed so we will need to change the plaaces
> where we have inline js/manual script src elements to use require.
> 
> 
> * Feedback, feedback and more feedback. While we were at Zidanca
> sprint we were thinking with all the possible use cases (and rewriting
> the code everytime), trying to be as much BBB as possible and as much
> js/css tech friendly as possible, but I'm sure that we may miss some
> problems. So feedback is really important.
> 
> 
> * Documentation, examples, tests !!! 
> 
> 
> * Plone 4 compatibility, Asko already said that is willing to work on
> that :) so it would be great to have it on plone 4.
> 
> 
> 
> 
> That's all folks!
> 
> 
> 
> 
> -- 
> Ramon a.k.a bloodbare
> ------------------------------------------------------------------------------
> _______________________________________________
> Plone-developers mailing list
> Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org
> https://lists.sourceforge.net/lists/listinfo/plone-developers

-- 
programmatic  web development
di(fh) johannes raggam / thet
python plone zope development
plone framework  team  member
mail: office-//[email protected]
web:  http://programmatic.pro
      http://bluedynamics.com

-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2

iEYEABECAAYFAlPzrQ8ACgkQW4mNMQxDgAdBZgCgkMAFuE6pG9CtpBfELLmZqtuO
KeEAn1HlK3S9j9riX0dT/QVVbBsY4Gpw
=MK0B
-----END PGP SIGNATURE-----