Slides from my talk at Palouse Code Camp 2010 about creating YUI3 Modules. Much of this talk was looking at existing core code or gallery code.

1. Advanced YUI 3
Creating Custom Modules
Jeff Craig
May 13, 2010
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 1 / 1

2. About Me
Who am I?
Software Developer at Washington State University
Contact:
foxxtrot@foxxtrot.net
http://blog.foxxtrot.net/
twitter.com/foxxtrot
github.com/foxxtrot
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 2 / 1

3. YUI What
What is YUI?
Housed and Developed at Yahoo!
YUI2 Released in 2006, still actively supported
YUI3 launched late 2009
Used across most Yahoo! properties, new development is in YUI3
Designed to be scalable, fast, secure, and modular
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 3 / 1

4. YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Developer Tools
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

5. YUI What
YUI3 Structure
Core
Lang, UA, Queue, Object, Get, Array, Node, Event
Component Infrastructure
Utilities
Widgets
Developer Tools
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

6. YUI What
YUI3 Structure
Core
Component Infrastructure
Base, Attribute, Plugin, Widget
Utilities
Widgets
Developer Tools
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

7. YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Animation, Cache, Cookie, DataSchema, IO, JSON, ImageLoader,
Internationalization, etc.
Widgets
Developer Tools
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

8. YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Overlay, Slider, TabView, GridView
Developer Tools
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

9. YUI What
YUI3 Structure
Core
Component Infrastructure
Utilities
Widgets
Developer Tools
Console, Profiler, Test
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 4 / 1

10. YUI Community
YUI3 and the Community
With YUI3, the team refocused on open-source. They launched YUI3 with
a public bug tracker and forums, and put the source up on GitHub.
In October 2009, the Gallery launched, providing a mechanism for modules
to be shared easily outside of the core of YUI, including offering hosting on
the Yahoo! CDN for modules, and easy inclusion within YUI3 projects.
In early 2010, the YUI Team began hosting ”YUI Open Hours” a periodic
conference call.
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 5 / 1

11. YUI Resources
YUI Resources
http://yuilibrary.com/
http://developer.yahoo.com/yui/3/
http://github.com/yui/
http://yuiblog.com/
http://twitter.com/miraglia/yui/members
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 6 / 1

12. YUI Component Architecture
Base
Low level base class most of YUI is based on
Utilizes Attributes, Plugins
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 7 / 1

13. YUI Component Architecture
Base
Low level base class most of YUI is based on
Utilizes Attributes, Plugins
Required Attributes: NAME, ATTRS
NAME: Used to identify events, DOM objects attached to your object
ATTRS: An associative array of Attribute declerations
init and destroy lifecycle methods
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 7 / 1

14. YUI Component Architecture
Attribute
ATTRS = {
intValue: {
value: 10, // Default Value
validator: Y.Lang.isNumber, // Boolean function
setter: function(value) {
if (value < 1) { return 1; }
if (value > 100) { return 100; }
return value;
}
};
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 8 / 1

15. YUI Component Architecture
Plugin
Add NS property, defining where plugin methods/properties are
applied
Plugins are based on Base
Can respond to Host events and methods
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 9 / 1

16. YUI Component Architecture
Widget
Extends Base
Default Collection of Attributes
Render Lifecycle
Progressive Enhancement
Localization
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 10 / 1

17. YUI Development Tools
JSLint
Written by Douglas Crockford
Ensures code meets certain quality metrics
A JavaScript parser written in JavaScript
Available online at http://jslint.com/
Command line wrappers are also available
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 11 / 1

18. YUI Development Tools
YUICompressor
CSS and JavaScript compressor
Removes unneeded whitespace
Replaces JS variable names to compress more efficiently
Not a replacement for gzip, but designed to complement gzip
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 12 / 1

19. YUI Development Tools
Builder
Build infrastructure used in YUI2 and YUI3
Built on Ant
Automatically minifies and lints your JS and CSS files
Recently updated for major speed improvements using NodeJS
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 13 / 1

20. YUI End Notes
Links
YUI:
http://yuilibrary.com/
http://developer.yahoo.com/yui/3/
http://github.com/yui/
http://yuiblog.com/
http://twitter.com/miraglia/yui/members
Me:
foxxtrot@foxxtrot.net
http://blog.foxxtrot.net/
twitter.com/foxxtrot
github.com/foxxtrot
Jeff Craig () Advanced YUI 3Creating Custom Modules May 13, 2010 14 / 1