Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Javascript FAQ: Difference between revisions

From MoodleDocs
Line 26: Line 26:


== What JavaScript library does Moodle use? ==
== What JavaScript library does Moodle use? ==
=== JQuery ===
As of Moodle 2.9, [[jQuery]] is the preferred javascript library. Most of the code is still using YUI though as we are beginning to transition.


=== Yahoo! User Interface Library (YUI) ===  
=== Yahoo! User Interface Library (YUI) ===  
Moodle uses the Yahoo! User Interface Library (YUI).
Until Moodle 2.9, the Yahoo! User Interface Library (YUI) was the preferred javascript library. From Moodle 2.9 onwards, jQuery is the preferred javascript library.  


==== Online resources: ====
==== Online resources: ====
* [http://jquery.com JQuery]
* [[jQuery]] in the Moodle documentation
* [http://yuilibrary.com Yahoo! User Interface Library (YUI)]
* [http://yuilibrary.com Yahoo! User Interface Library (YUI)]
* [[YUI]] in the Moodle documentation
* [[YUI]] in the Moodle documentation


==== Books: ====
==== Books: ====
* [http://addyosmani.com/writing-modular-js/ Writing Modular Javascript]
* [http://jqueryenlightenment.com/jquery_enlightenment.pdf JQuery Enlightenment]
* [http://shop.oreilly.com/product/0636920013303.do YUI 3 Cookbook] by Evan Goer
* [http://shop.oreilly.com/product/0636920013303.do YUI 3 Cookbook] by Evan Goer
* [http://shop.oreilly.com/product/0636920025245.do Maintainable JavaScript] by Nicholas C. Zakas
* [http://shop.oreilly.com/product/0636920025245.do Maintainable JavaScript] by Nicholas C. Zakas


==== How/Why was YUI chosen for Moodle? ====
==== Why are we moving away from YUI ? ====
The decision to begin the transition from YUI to JQuery was made here:


The decision was made in [http://moodle.org/mod/forum/discuss.php?d=48478 this thread in the General Developer Forum].
https://tracker.moodle.org/browse/MDL-47036


Since this decision was made, it's continued use has been questioned several times. Some of the main reasons for it's use include:
This is in response to Yahoos announcement that they will be ceasing all further development on YUI (although it is still maintained).  
 
http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui
* good documentation;
* an active developer community;
* code modularity;
* a powerful loader system separating loading from execution and adding dependency resolution; and
* sandboxing of code as standard.
 
Most other major libraries do not offer many of these major features including the powerful loader and dependency system which are particularly useful in the modular environment of Moodle.


== What other JavaScript libraries are around? ==
== What other JavaScript libraries are around? ==

Revision as of 06:34, 28 April 2015

What is JavaScript?

JavaScript is a scripting language widely used for client-side web development. It is also known by a number of other names including ECMAScript, and JScript (these are all the same thing but exist due to issues over the licensing of these names).

If you have a spare 27 minutes and would like a quick background on JavaScript and it's origins, see this video from Douglas Crockford 'JSeverywhere: Douglas Crockford - JavaScript, The World's Most Misunderstood Language'.

Where do I find general information about JavaScript?

Online resources:

Books:

How is JavaScript used by Moodle?

Where do I find more information about JavaScript in Moodle?

What JavaScript library does Moodle use?

JQuery

As of Moodle 2.9, jQuery is the preferred javascript library. Most of the code is still using YUI though as we are beginning to transition.

Yahoo! User Interface Library (YUI)

Until Moodle 2.9, the Yahoo! User Interface Library (YUI) was the preferred javascript library. From Moodle 2.9 onwards, jQuery is the preferred javascript library.

Online resources:

Books:

Why are we moving away from YUI ?

The decision to begin the transition from YUI to JQuery was made here:

https://tracker.moodle.org/browse/MDL-47036

This is in response to Yahoos announcement that they will be ceasing all further development on YUI (although it is still maintained). http://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui

What other JavaScript libraries are around?

jQuery

jQuery is another popular JavaScript library, used among others by Drupal, Joomla and WordPress. It is probably the most widely known JavaScript library at present. It is possible to use jQuery in Moodle, but it is not recommended.

JavaScript written using jQuery will not be accepted within core Moodle code. However since Moodle 2.5 jQuery and jQuery UI libraries are included in default installation, these are intended to be used in add-ons only. See jQuery page for more information.

Can't we switch to jQuery in core?

Although jQuery is very popular with many developers and has stood out in recent years, there are a number of key infrastructure reasons which have the potential to cause major issues in a system like Moodle. As an example, some of these core infrastructure-type reasons include:

  • jQuery does not encourage sandboxing of code
  • jQuery does not have a decent modular system - plugins typically exist in the global $ namespace (and due to lack of sandboxing), this means that:
    • they can be modified after loading so other modules on the same page could modify a library function; and as a result
    • it is possible for jQuery to overwrite itself and break your page
  • jQuery does not have a loading system. You are typically expected to use the <script> tag which:
    • can be inefficient
    • means that your code is executed as soon as it loads;
      • which means that load order is often very significant
    • has mixed browser support with some of it's advanced features;
    • makes it difficult to make use of a combo loading system to load JS modules.


Whilst these reasons may not seem very important as they're just nuts and bolts JS issues, when considered in combination with the modularity of Moodle itself they make a lot more sense. Bearing in mind that Moodle encourages use of contributed plugins (blocks, modules, question types, etc):

  • a number of Moodle-specific YUI modules exist to encourage re-use of user interface components and functionality:
    • so we need dependency management;
    • and to ensure that load order of components does not matter;
    • and that multiple uses of the same JS code does not break former or subsequent uses by it's mere inclusion.
  • with the availability of contributed plugins for moodle we need to ensure that modules do not interfere with, or have negative effects on, one another;
  • with the potential number of non-core plugins, sandboxing of that code is important to prevent inadvertent issues caused by individual plugins (e.g. changing core library code to add features).

Online resources:

Books:

What does AJAX mean?

AJAX means "Asynchronous JavaScript and XML". It is a group of interrelated web development techniques used to create interactive web applications or rich Internet applications. Although XML is included in the acronym, AJAX is not a single technology but a group of technologies. In reality with modern JS, this tends to be JSON which is much more lightweight and easy to produce in PHP than XML.

See AJAX (Wikipedia) for general information and AJAX for information on AJAX and Moodle.

See also Firebug > Debugging AJAX with Firebug.

See also