Joomla! Documentation™

The JavaScript Working Group is a Production Working Group. It is responsible for establishing standards for JavaScript and seeing that the JavaScript and/or JS frameworks are integrated and maintained.

Coordinators & PLT Contact

• The coordinator for this working group is Joe LeBlanc.
• The PLT Contact for this working group is Andy Tarr.

Announcements

• There is now a JavaScript GitHub group: https://github.com/Joomla-JavaScript
• Much of our work overlaps with JUX. Join here as well: http://ux.joomla.org/
• For now, communication will occur on the Joomla CMS Development Google Group: https://groups.google.com/group/joomla-dev-cms If we end up needing more space, we may create a separate group in the future.

External resources

Code Quality / Utilities

• JSHint: http://www.jshint.com/ https://github.com/jshint/node-jshint/
• JSLint: http://www.jslint.com/
• Node.js: http://nodejs.org
• Travis: http://travis-ci.org/

Libraries

• MooTools: http://mootools.net/
• jQuery: http://jquery.com/
• Zepto: http://zeptojs.com/

• Bootstrap: http://twitter.github.com/bootstrap/
• Sencha: http://www.sencha.com/

• Underscore: http://documentcloud.github.com/underscore/
• Backbone: http://documentcloud.github.com/backbone/

Deliverables

Loads of beautiful JavaScript!

Communications

Primary communication will occur on the Joomla CMS Development list. The JUX site will also be used for specific tasking and discussion.

Roadmap

Ultimate Goal

Make Joomla an enjoyable and preferable tool for JavaScript programmers to use.

Intermediate Goals

• Come up with JavaScript coding standards for the Joomla project, based on existing ones
• Integrate jQuery with noConflict mode enabled by default
• Replace frontend MooTools dependencies with jQuery code
• Add JavaScript library management and CDNs
• Replace code that interpolates JavaScript and PHP
• Unit test JavaScript in Joomla

jQuery Integration Plan

The overall goal for integrating jQuery is to maintain backwards compatibility in a predictable fashion, while having a plan for upgrading as newer versions come out. While jQuery has broken backwards compatibility in the 1.x series, it always happens with minor releases and not patch releases. They are planning on removing things in 2.0 while deprecating them now: http://blog.jquery.com/2011/11/22/call-for-jquery-1-8-ideas/

For Joomla, the general policy should be to stay with a specific minor release of jQuery for a specific minor release of Joomla. That is, if jQuery 1.7.x is still current, Joomla 3.0 will adopt it. If jQuery 1.8 comes out before Joomla 3.1 is released, Joomla 3.0 will continue to stay on the 1.7.x branch of jQuery. If Joomla 3.0.1 ships with jQuery 1.7.2 and then jQuery 1.7.3 comes out, 1.7.3 would be rolled into Joomla 3.0.1 after testing core functionality.

Rare exceptions to the general policy could be made in the event of a security issue or some other such pressing need.

Meetings

J! and Beyond 2012

Managing jQuery noConflict, potential solutions:

• add at the end of jQuery javascript file
• load no_conflict.js
• patch submitted by Beat: pre/post JavaScript

Miscellaneous

• clean up library manager plugin
• JSLint - add to the unit tests
• JavaScript compression
• Stop writing JavaScript in PHP!
• Idea: module parameters for adding CSS and JavaScript (rather than adding it in the HTML body)
• Ordering: Ability to add a declaration before or after

Caching

• Browser Caching - ?#342384623749873 <--- cache bust
• Joomla Caching - addScriptDeclaration: doesn't cache properly.
• Different behavior in modules vs. components

Where to load JavaScript?

• Add JavaScript at the END of the document.
• OR: use defer for asynchronous loading.

Possibility: add code on the client side to detect whether libraries are loaded.

• Would need to document
• Or: Joomla.library('nameoflibrary', '1.0', 'libraryurl');
• Just use Require.js (or don't, it's madness, has ordering issues because it's asynchronous)
• Just use the plugin Joe authored. Or the patch Beat submitted.

Stop

• writing inline JavaScript! (causes "flashes") (although Geraint disagrees (and so does Peter (and Danielle)))
• Don't code onClick events directly into markup! Use stopPropagation.
• Geraint brings up a good point: maybe you need to do something before DOMready... but it's on the level of eval()

MooTools

• Optimize: We're currently loading everything.
• As long as we're still using it, use it modularly, the way it was intended.
• Might have to be done server side.
• Look at LABjs.

Follow up

• Start a GitHub branch
• Start a Google Group - or do it on the CMS list.
• Sort out 2.5 issues from 3.0 features
• Look at replacing frontend MooTools
• Get email addresses