Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Advanced YUI3: Module Creation and the Component Infrastructure

994 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Advanced YUI3: Module Creation and the Component Infrastructure

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×