advanced yui3: module creation and the component infrastructure

Advanced YUI 3Creating Custom Modules

Jeff Craig

May 13, 2010

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

About Me

Who am I?

Software Developer at Washington State University

Contact:

[email protected]

http://blog.foxxtrot.net/

twitter.com/foxxtrot

github.com/foxxtrot


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


YUI What

YUI3 Structure

Core

Component Infrastructure

Utilities

Widgets

Developer Tools


YUI What

YUI3 Structure

Core

Lang, UA, Queue, Object, Get, Array, Node, Event


Utilities

Widgets

Developer Tools


YUI What

YUI3 Structure

Core


Base, Attribute, Plugin, Widget

Utilities

Widgets

Developer Tools


YUI What

YUI3 Structure

Core


Utilities

Animation, Cache, Cookie, DataSchema, IO, JSON, ImageLoader,Internationalization, etc.

Widgets

Developer Tools


YUI What

YUI3 Structure

Core


Utilities

Widgets

Overlay, Slider, TabView, GridView

Developer Tools


YUI What

YUI3 Structure

Core


Utilities

Widgets

Developer Tools

Console, Profiler, Test


YUI Community

YUI3 and the Community

With YUI3, the team refocused on open-source. They launched YUI3 witha public bug tracker and forums, and put the source up on GitHub.

In October 2009, the Gallery launched, providing a mechanism for modulesto be shared easily outside of the core of YUI, including offering hosting onthe Yahoo! CDN for modules, and easy inclusion within YUI3 projects.

In early 2010, the YUI Team began hosting ”YUI Open Hours” a periodicconference call.


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


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



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;

}

};



Plugin

Add NS property, defining where plugin methods/properties areapplied

Plugins are based on Base

Can respond to Host events and methods



Widget

Extends Base

Default Collection of Attributes

Render Lifecycle

Progressive Enhancement

Localization


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



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



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


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:

[email protected]

http://blog.foxxtrot.net/

twitter.com/foxxtrot

github.com/foxxtrot


advanced yui3: module creation and the component infrastructure

Technology