What are the plans for javascript

dgrammatiko commented 10 years ago

Hi, Recently I made some refactoring to all the modals in Joomla to use the bootstrap script. Playing around I had an idea to solve the different frameworks javascripts that might be needed in one site. The solution is quite simple and similar to this PR https://github.com/joomla/joomla-cms/pull/4074 A rough idea is to extend JHtml to include behaviors that lie in /template/current/behaviors

So for foundation all you have to do is create a file foundation.php in that directory.

and then call it as usual JHtml::_(‘foundation.modal’, ….);

What do you think?

phproberto commented 10 years ago

Hey @dgt41 thanks for your comment.

We have to start avoiding using JHtml for things like that. The main thing behind JHtml is to include JS and markup. And both are not overridable. You are implementing a workaround for that but I think in the wrong way. Templates have to be frontend friendly and JHtml is just the opposite.

My idea for dealing with frontend frameworks is:

Frontend frameworks should be common libraries installed on the system. If your template requires it then it can install it within the installer. With that we get one single library maintainer taking care of the package and providing layouts for them. And probably "official" bootstrap, foundation, whatever packages listed on their websites.
Using modal as example what I use is a main JModal (not with the J prefix on my components) that is a basic object where you can inject things like title, classes, content, etc.
You pass that JModal layout to a modal layout. For example with:

$modal = new JModal;
$modal->setTitle('My cool modal')
    ->setClass('modal')
    ->setId('myModal')
    ->setContent($content)
    ->setOptions(
        array(
            'closeButton' => false, 
            'showTitle'   => true
        )
    );

echo JLayoutHelper::render('joomla.modal', array('modal' => $modal));

With that system as template developer you can do 2 things:

1. Create an override of that layout and customise your modal.

You override the layout on: templates/mytemplate/html/layouts/joomla/modal.php

and then replace the calls and the JS logic inside there to match the framework loaded in your template

2. Call any existing library layout

If you have installed an existing layout (let's say foundation) you create an override of the layout in: templates/mytemplate/html/layouts/joomla/modal.php

And then replace:

echo JLayoutHelper::render('joomla.modal', $modal);

with:

echo JLayoutHelper::render('foundation.modal', $modal);

This is an example with modals but same can be done for example with menus like:

echo JLayoutHelper::render('bootstrap.menu.tabs', $menu);
echo JLayoutHelper::render('bootstrap.menu.pills', $menu);
echo JLayoutHelper::render('bootstrap.menu.list', $menu);

One data type and multiple rendering systems. The layout receives the data and does the job for us.

Benefits

As you see the system is pretty simple and reusable. You don't have to add any logic because layout routes and overrides are already handled by Joomla and overridable at component & template level. Also:

We get rid of JHtml
We share a common way to override things
We share a common place to override things
We have better integration with existing frameworks as libraries (with official support?)
We have better handling of 3rd party libraries conflicts. If everybody uses the same bootstrap we avoid loading it 4 times.
We can easily change the framework used in core if in our joomla.modal without rewriting a lot of code. Inside that layout we are calling a bootstrap.modal. We replace it with bootstrap3.modal and everything still works.
Also I have already developed a layout debug mode that will allow us to cache layouts and check loading times of every piece of our site. So you can check for example the performance with bootstrap vs the performance with foundation.

If you are interested in helping us to make this things happen please ping me. We need help in a lot of areas to improve current frontend for v3.5 and I think you can be a great help.

dgrammatiko commented 10 years ago

Sounds SOLID! You have some code to take a look?

You can count me in if you think I might be helpful here (although I still haven’t really grasp the Layout system).

Side note: I hope, is that all those modals modification I made are not way of the chart…

phproberto commented 10 years ago

This is my 1st try to get the menu system into Joomla 1,5 years ago: https://github.com/joomla/joomla-cms/pull/738

I implemented a very basic modal system with layout support for redCORE 1 year ago:

https://github.com/redCOMPONENT-COM/redCORE/wiki/Layouts#modal

Any modification done in current JHtml libraries won't break anything. Once the layout system is developed we can replace code inside the JHtmlBootstrap::modal with the layout call. So it's 100% B/C.

My skype is phproberto. I hope to see you there :dancer:

dgrammatiko commented 10 years ago

We ll keep in touch mine is velocity-gr . Let me first read some code...

joomla-projects / cms-naked