Re: Convert JavaScript from MooTools to jQuery project proposal for GSoC 2013

[Anibal]

Hi Ashan,

 

Great to hear about your proporsal! 

I has been working to convert Joomla Installer to JQuery. Also, in the migration, simplify the Javascript vanilla code introducing modern JS libraries like RequireJS (as dependency manager), Backbone, Underscore, etc.

https://github.com/anibalsanchez/joomla-cms/tree/master/installation/template/js

As an example, in these early steps, I've submitted a pull request to fix how Joomla process the Json-encoded forms:

https://github.com/joomla/joomla-cms/pull/1023

Which is your idea? Are you planning to translate the same code?, or re-write/improve how it's currently implemented, new code style jslint, libraries, etc ?

Regards,

Anibal

[Nick Savov]

Hi Ashan and also Anibal,

Thanks for taking on the MooTools to jQuery conversation. It's definitely
needed!

Kind regards,
Nick

> Hi Anibal,
>
> Glad to see more structured JS is becoming part of Joomla!. Basically
> within the scope of the project I'm going to reduce the dependency of
> MooTools from Joomla! by translating the same code.
>
> Definitely it won't stop there. I would like to improve how it's currently
> implemented which I hope to do after the project. May be we might be able
> to bring Joomla! closer to a SPA reducing full page loads in future. The
> modern JS libraries you used in installation section is very suitable for
> that :)
>
> Thanks
> Ashan

> --
> You received this message because you are subscribed to the Google Groups
> "Joomla! CMS Development" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to joomla-dev-cm...@googlegroups.com.
> To post to this group, send an email to joomla-...@googlegroups.com.
> Visit this group at
> http://groups.google.com/group/joomla-dev-cms?hl=en-GB.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>
>

[Anibal]

Hi Ashan,

Excellent! 

About SPA, I've been also thinking about it. But it's complex since the current MVC generates all the page in one step. Eg one template view, one component, and all modules.

At this moment, a full migration from Mootools is already a challenge.... and a dependecy manager would be great ;-)

For example, to modularize the current injected code from the API:

http://docs.joomla.org/JDocument/addScript

http://docs.joomla.org/JDocument/addScriptDeclaration

(trying to avoid current conflicts from multiple JQuery versions)

Regards,

Anibal

[Ashan]

Hi everyone,

I have updated the proposal document by adding a diagram of dependencies overview with MooTools, and excluding Installation section since its already done by Anibal :). The approach includes dividing Codebase into high level sections (e.g administrator, user, templates and etc.) and then reducing dependencies in each section. It also includes extra effort for testing after modifying each section, since its much needed. Your feedback is really appreciated for further improvements.

Proposal: http://www.google-melange.com/gsoc/proposal/review/google/gsoc2013/ashan_fernando/31002#

Thanks,

Ashan

[Ashan]

Hi everyone,

During past two weeks, I was looking at the implementation possibilities to reduce MooTools usage in Jooma!. One of the observations was that it requires to keep jQuery and MooTools side by side (Reduce the conflicts with extensions, templates & etc.) but using jQuery with $ (Which is used by MooTools) variable is not directly possible. I came up with the following approaches to do the implementation (Since using jQuery instead of $ for selector is not nice).

1) Scope the MooTools dependent sections with anonymous functions and assigning $ for jQuery within that scope and implement it using jQuery (Removing the MooTools dependencies).

(function($){

    // Removed Mootools dependent code with jQuery

})(jQuery);

2) Instead of the above approach, change the way that the application loads using  jQuery and other libraries by using a modular script loader like Require.js. (This is already used by Anibal for installation section).

define(["jquery"], function($) {

    //jQuery dependent code

});

What are your suggestions?

Regards,

Ashan

[piotr_cz]

...using jQuery with $ (Which is used by MooTools) variable is not
directly possible...

Why is it so?

I mean, when jQuery is loaded after MooTools, it should reassing the
window.$ to jQuery, no?

I'd then adjust MooTools code to use
`document.id('wrapper')` instead of `$('wrapper')` and
`document.getElements('.wrappers')` instead of `$$('wrappers')`


IMO introducing modular script loader might be too complex for CMS
(although I'd really like to have such option in JDocument)

On May 14, 5:44 am, Ashan <ashan...@gmail.com> wrote:
> Hi everyone,
>
> During past two weeks, I was looking at the implementation possibilities to
> reduce MooTools usage in Jooma!. One of the observations was that it
> requires to keep jQuery and MooTools side by side (Reduce the conflicts
> with extensions, templates & etc.) but using jQuery with $ (Which is used
> by MooTools) variable is not directly possible. I came up with the
> following approaches to do the implementation (Since using jQuery instead
> of $ for selector is not nice).
>
> 1) Scope the MooTools dependent sections with anonymous functions and
> assigning $ for jQuery within that scope and implement it using jQuery
> (Removing the MooTools dependencies).
>

> *(function($){*
> *    // Removed Mootools dependent code with jQuery*
> *})(jQuery);*

>
> 2) Instead of the above approach, change the way that the application loads
> using  jQuery and other libraries by using a modular script loader like
> Require.js. (This is already used by Anibal for installation section).
>

> *define(["jquery"], function($) {*
> *    //jQuery dependent code*
> *});*
> *
> *

[Fedir]

Ashan is right, using $ in the globals is very bad idea.

Need beat on finger anyone who use $ as the global variable ...

I think for small piece of the code enough just jQuery('#something') 

or some own short like:

$j = jQuery.noConflict();

$j('#something');

for a big (as suggested):

(function($){* 

    // Removed Mootools dependent code with jQuery* 

})(jQuery);

about second suggestion for using  Require.js (or similar) need think more,

because, for me not clear how it will work for the extensions

Вівторок, 14 травня 2013 р. 11:05:06 UTC+3 користувач piotr_cz написав:

[Fedir]

some more thoughts :)

for avoid any problem with $ will be perfect just call jQuery.noConflict(); directly after the jQuery connect

and then who want can use 

jQuery() or $myJ = jQuery;

who want can use 

(function($){
})(jQuery);

for a core can be like

Joomla = {};

(function($){

  Joomla.someCoreAction = function(){

    //some jquery code

  }
})(jQuery);

just additional thoughts :)

Вівторок, 14 травня 2013 р. 14:21:24 UTC+3 користувач Fedir написав:

[Ashan]

Hi Piotr,

Thanks for the quick comments. The problem I had was that introducing $ to the global scope will affect the extensions (Which is out of our control) and wanted to reduce the impact of reducing the dependencies with MooTools. 

I also agrees with you regarding the Modular Script Loading, which might be complex at this moment of time to be added to CMS and my concern was that since its already being used in installer, is there any vision to include it in CMS core also.

Ashan

[Ashan]

Hi Fedir,

Thanks a lot for the valuable thoughts. I too agree with your suggestions specially not to introduce $ (jQuery) to the global scope and this is a great place to start the project :)

Ashan