From the jQueryCamp07: The Onion - How to add features without adding features

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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