Note:

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

YUI: Difference between revisions

From MoodleDocs
No edit summary
No edit summary
Line 1: Line 1:
{{Moodle 2.0}} This document provides an overview of Moodle's use of YUI.
{{Moodle 2.0}}This document provides an overview of Moodle's use of YUI. The [http://yuilibrary.com Yahoo! User Interface (YUI)] framework is a fast, powerful, modular, and [http://yuilibrary.com/yui/docs/api/ well-documented] framework with a powerful loading system.


The [http://yuilibrary.com Yahoo! User Interface (YUI)] framework is a fast, powerful, modular, and [http://yuilibrary.com/yui/docs/api/ well-documented] framework with a powerful loading system.
== The Basics ==
 
= The Basics =
YUI is an extremely extensible, fast, modular, and powerful JavaScript framework with a very capable loading system.
YUI is an extremely extensible, fast, modular, and powerful JavaScript framework with a very capable loading system.
A number of modules are available for YUI providing a wide range of functionality to suit most situations.
A number of modules are available for YUI providing a wide range of functionality to suit most situations.
Line 27: Line 25:
* inclusion of a module.js file.
* inclusion of a module.js file.


= Documentation and further information =
== Documentation and further information ==
Other YUI documentation you may find useful:
Other YUI documentation you may find useful:
* [[How_to_create_a_YUI_3_module]]
* [[How_to_create_a_YUI_3_module]]
Line 38: Line 36:
We will soon be adding API Documentation for Moodle-specific YUI modules in addition to the core YUI library.
We will soon be adding API Documentation for Moodle-specific YUI modules in addition to the core YUI library.


= Useful tools =
== Useful tools ==
JavaScript authoring have moved along considerably in recent years, and we highly recommend that you look at using some of the available tools to help you in your development. Most of these tools are available through <a href="http://nodejs.org">Node.js</a> which is relatively trivial to install on most operating systems:
JavaScript authoring have moved along considerably in recent years, and we highly recommend that you look at using some of the available tools to help you in your development. Most of these tools are available through <a href="http://nodejs.org">Node.js</a> which is relatively trivial to install on most operating systems:


== JSHint ==
=== JSHint ===
<a href="http://jshint.com">JSHint</a> is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.
<a href="http://jshint.com">JSHint</a> is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.


Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.
Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.


=== Installation ===
==== Installation ====
Installation is relatively simple:
Installation is relatively simple:
<code bash>
<code bash>
Line 52: Line 50:
</code>
</code>


=== Use ===
==== Use ====
Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.
Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.


Line 60: Line 58:
</code>
</code>


=== Documentation ===
==== Documentation ====
There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:
There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:
* <a href="http://jshint.com">JSHint</a>
* <a href="http://jshint.com">JSHint</a>
* <a href="http://jslinterrors.com/">JSLint Error Explanations</a>
* <a href="http://jslinterrors.com/">JSLint Error Explanations</a>


== YUIDoc ==
=== YUIDoc ===
<a href="http://yui.github.com/yuidoc/">YUIDoc</a> is a documentation system. It can work with any type of code, but is designed with JavaScript in mind.
<a href="http://yui.github.com/yuidoc/">YUIDoc</a> is a documentation system. It can work with any type of code, but is designed with JavaScript in mind.
It's the documentation system used to create the YUI core API documentation, and will soon be used to create API documentation for Moodle-specific YUI modules in core.
It's the documentation system used to create the YUI core API documentation, and will soon be used to create API documentation for Moodle-specific YUI modules in core.
Line 71: Line 69:
We will soon start shipping a yuidoc.json configuration file if you'd like to generate your own documentation.
We will soon start shipping a yuidoc.json configuration file if you'd like to generate your own documentation.


=== Installation ===
==== Installation ====
Installation is relatively simple:
Installation is relatively simple:
<code bash>
<code bash>
Line 77: Line 75:
</code>
</code>


=== Use ===
==== Use ====
To run yuidoc across the entirety of Moodle JavaScript, from the root directory run:
To run yuidoc across the entirety of Moodle JavaScript, from the root directory run:
<code bash>
<code bash>
Line 85: Line 83:
Whilst writing your documentation, you may also like to run yuidoc in server mode. See the --server option for help on how to do this.
Whilst writing your documentation, you may also like to run yuidoc in server mode. See the --server option for help on how to do this.


=== Documentation ===
==== Documentation ====
There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:
There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:
* <a href="http://yui.github.com/yuidoc/">YUIDoc Project Documentation</a>
* <a href="http://yui.github.com/yuidoc/">YUIDoc Project Documentation</a>
* <a href="http://yui.github.com/yuidoc/syntax/index.html">YUIDoc Syntax Reference</a>
* <a href="http://yui.github.com/yuidoc/syntax/index.html">YUIDoc Syntax Reference</a>


== Shifter ==
=== Shifter ===
The upstream YUI project use a tool called <a href="http://yuilibrary.com/shifter">Shifter</a> to wrap up meta-data, rollup files, minify, and strip out debugging information from files.
The upstream YUI project use a tool called <a href="http://yuilibrary.com/shifter">Shifter</a> to wrap up meta-data, rollup files, minify, and strip out debugging information from files.
We will shortly be shifting to use of Shifter for core Moodle as it offers us many potential benefits.
We will shortly be shifting to use of Shifter for core Moodle as it offers us many potential benefits.


=== Installation ===
==== Installation ====
Installation is relatively simple from the node.js Packaging Manager:
Installation is relatively simple from the node.js Packaging Manager:
<code bash>
<code bash>
Line 100: Line 98:
</code>
</code>


=== Use ===
==== Use ====
There are two ways to run shifter depending on your intended use.
There are two ways to run shifter depending on your intended use.


Line 114: Line 112:
</code>
</code>


== See Also ==
* [[Javascript and YUI 3 FAQ]]
* [[JavaScript FAQ]]


[[Category:AJAX]]
[[Category:AJAX]]
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:Javascript|YUI]]
[[Category:Javascript|YUI]]
== See Also ==
* [[Javascript and YUI 3 FAQ]]
* [[JavaScript FAQ]]

Revision as of 22:49, 1 March 2013

Moodle 2.0

This document provides an overview of Moodle's use of YUI. The Yahoo! User Interface (YUI) framework is a fast, powerful, modular, and well-documented framework with a powerful loading system.

The Basics

YUI is an extremely extensible, fast, modular, and powerful JavaScript framework with a very capable loading system. A number of modules are available for YUI providing a wide range of functionality to suit most situations.

Since version 2.4, Moodle has included SimpleYUI rather than YUI, which includes several modules as standard including:

We recommend writing your code within a YUI module, but it is also possible to use one of the other methods to include your JavaScript. These include:

  • use within a javascript file included by a theme; and
  • inclusion of a module.js file.

Documentation and further information

Other YUI documentation you may find useful:

We will soon be adding API Documentation for Moodle-specific YUI modules in addition to the core YUI library.

Useful tools

JavaScript authoring have moved along considerably in recent years, and we highly recommend that you look at using some of the available tools to help you in your development. Most of these tools are available through <a href="http://nodejs.org">Node.js</a> which is relatively trivial to install on most operating systems:

JSHint

<a href="http://jshint.com">JSHint</a> is a JSLint derivative for checking your code. This includes checking for errors and recommended stylistic approaches to writing JavaScript.

Since Moodle 2.5, a JSHint configuration is also included in the Moodle codebase to inform the tester of our preferences and recommendations.

Installation

Installation is relatively simple: 

   npm install jshint -g

Use

Many IDEs and editors will automatically detect if you have JSHint installed and pass your code through it for you, reporting any errors as you go.

To run jshint on the command line, simply pass it the file that you wish to check: 

   jshint blocks/fruit/yui/fruitbowl/fruitbowl.js

Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

YUIDoc

<a href="http://yui.github.com/yuidoc/">YUIDoc</a> is a documentation system. It can work with any type of code, but is designed with JavaScript in mind. It's the documentation system used to create the YUI core API documentation, and will soon be used to create API documentation for Moodle-specific YUI modules in core.

We will soon start shipping a yuidoc.json configuration file if you'd like to generate your own documentation.

Installation

Installation is relatively simple: 

   npm install yuidoc -g

Use

To run yuidoc across the entirety of Moodle JavaScript, from the root directory run: 

   yuidoc

Whilst writing your documentation, you may also like to run yuidoc in server mode. See the --server option for help on how to do this.

Documentation

There's a variety of documentation on JSHint and the error messages it returns. Start off with the jshint website:

Shifter

The upstream YUI project use a tool called <a href="http://yuilibrary.com/shifter">Shifter</a> to wrap up meta-data, rollup files, minify, and strip out debugging information from files. We will shortly be shifting to use of Shifter for core Moodle as it offers us many potential benefits.

Installation

Installation is relatively simple from the node.js Packaging Manager: 

   npm install shifter -g

Use

There are two ways to run shifter depending on your intended use.

During development, we recommend you run shifter in --watch mode. To do so, enter the src directory of the module you are working on and run: 

   cd lib/yui/src
   shifter --watch

For more general use, you can run shifter across the whole of Moodle using --walk: 

   shifter --walk --recursive


See Also

Retrieved from "https://docs.moodle.org/dev/index.php?title=YUI&oldid=38077"
Powered by MediaWiki