integration technologies
jQueryCamp07, Jörn Zaefferer
joern.zaefferer@gmail.com
http://bassistance.de
The Onion
How to add features without
adding features

>> Outline
• Review of existing structures
● jQuery core
● metaplugins
• Wrapper plugins
• Summary
• Questions and answers
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 2

>> jQuery ecosystem
plugins
metaplugins
jQuery
Core
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 3

>> Wait a minute…
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 4

>> jQuery Core
• Provides basic features for common tasks
• Provides plugin extension point
• Provides everything else via plugins
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 5

>> Metaplugins
• You could implement it yourself with
jQuery
• Getting it work across browsers can be
very difficult (eg. dimensions plugin)
• Users won't notice it when it does its job
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 6

>> Metaplugin Examples: bgiframe
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 7

>> Metaplugin Examples: pngfix
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 8

>> How to avoid bloat in your own plugins?
• Usually users keep asking for features
• Adding them all results in a monster
• Declining them results in someone else
doing it
• Results in fragmentation of code and
community
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 9

>> Wrapper plugins
• Start with one plugin
• Add extensions points
• Wrap plugin with another
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 10

>> Treeview
• treeview plugin transforms nested lists into
a tree
• adds CSS and events to expand and
collapse branches
• provides extension points
● callback when toggling branches
● adding new branches
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 11

>> Treeview Demo
• http://dev.jquery.com/view/trunk/plugins/treeview/simple.html
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 12

>> Can you add Ajax support?
• I don't want to add Ajax support
• I want to add Ajax support
• How to add features without adding
features?
• What to do?
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 13

>> Wrapping Treeview: Putting Ajax around
asynctreeview
treeview
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 14

>> Async Treeview Demo
• http://dev.jquery.com/view/trunk/plugins/treeview/async.html
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 15

>> Summary
• Add features while avoiding bloat
• By wrapping plugins around jQuery core
and other plugins
• Possible through extension points
● jQuery plugins
● anything plugin specific, like callbacks
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 16

>> Ideas? Questions?
The Onion – How to add features without adding features, Jörn Zaefferer, jQueryCamp07
Page 17