JavaScript Libraries: The Big Picture
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Excellent slideshow. I've taken some of the framework graphics as well as adapted to my startup
    Teisha
    http://dashinghealth.com http://healthimplants.com
    Are you sure you want to
    Your message goes here
  • Even though you have a valid point I am afraid that I must disagree. And besides this article appears quite old.

    Hose
    Are you sure you want to
    Your message goes here
  • Cool slideshow!!
    http://body-hercules.blogspot.com/
    Are you sure you want to
    Your message goes here
  • Hey Cool
    Are you sure you want to
    Your message goes here
  • See http://simonwillison.net/2007/May/16/libraries/#comments for some corrections.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
48,505
On Slideshare
46,710
From Embeds
1,795
Number of Embeds
40

Actions

Shares
Downloads
1,946
Comments
5
Likes
56

Embeds 1,795

http://simonwillison.net 983
http://blog.dreamcss.com 576
http://ajax.yo2.cn 42
http://www.human-engineer.com 23
http://www.rsaccon.com 23
http://www.slideshare.net 22
http://localhost 21
http://enlavin.com 19
http://blog.lroot.com 15
http://www.linkedin.com 6
http://freeanimeshows-naruto.blogspot.com 5
http://socialwhitelist.com 5
http://localhost:8080 4
http://ajaxian.com 4
http://core.traackr.com 4
https://www.linkedin.com 4
http://all-ajax.blogspot.com 4
file:// 3
http://127.0.0.1 3
http://hablador.wordpress.com 3
http://www.techgig.com 2
http://64.233.183.104 2
http://developer.yahoo.net 2
http://ejohn.org 2
http://www.wait-till-i.com 2
http://www.filescon.com 2
http://www.filestube.com 1
http://translate.googleusercontent.com 1
https://s3.amazonaws.com 1
http://cache.baidu.com 1
http://www.zhuaxia.com 1
http://www.netvibes.com 1
http://www.hanrss.com 1
http://72.14.253.104 1
http://feeds.simonwillison.net 1
http://developer.yahoo.com 1
http://www.thinkingphp.org 1
http://209.85.173.104 1
http://216.239.59.104 1
http://www.slideee.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JavaScript Libraries: The Big Picture Simon Willison XTech, 16th May 2007
  • 2. • What problems do libraries solve? • An overview of the Big Four • ... what are the interesting ideas?
  • 3. Personal bias
  • 4. • I like JavaScript-the-language • So I won't be talking about frameworks that generate JavaScript code for you
  • 5. “ The Web is the most hostile software engineering environment imaginable.” Douglas Crockford
  • 6. The legacy of the browser wars
  • 7. • The DOM API kind of sucks • Event handling is frequently broken • Ajax is inconsistent • You have to roll your own animation • Drag and drop is tricky • Co-ordinates are surprisingly hard • Internet Explorer leaks memory like a sieve
  • 8. The Event model // Internet Explorer element.attachEvent('click', function() { alert(window.event); } ) // Everyone else element.addEventListener('click', function(ev) { alert(ev) }, false );
  • 9. “The bad news: JavaScript is broken. The good news: It can be fixed with more JavaScript!” Geek folk saying
  • 10. The big four • The Dojo Toolkit • The Yahoo! User Interface Library • Prototype (and Script.aculo.us) • jQuery
  • 11. The Dojo Toolkit
  • 12. • Founded in 2004 • Originally unified from a bunch of older frameworks • Initial aim was to show that JavaScript / DHTML should be taken seriously • Enormous amount of smart technology
  • 13. dojo.collections dojo.math dojo.crypto dojo.reflect dojo.date dojo.rpc dojo.dnd dojo.storage dojo.dom dojo.string dojo.event dojo.style dojo.io dojo.undo dojo.lang dojo.uri dojo.lfx dojo.widget dojo.logging dojo.xml http://www.flickr.com/photos/aprillynn77/8818200/
  • 14. dijit • The Dojo widget system • Create widgets programmatically, or use declarative markup <div dojoType=quot;dijit.TitlePanequot; label=quot;Terms and Conditionsquot; width=quot;200quot;> Text... </div>
  • 15. The future today • Cross browser 2D drawing APIs • dojo.storage - store data offline • dojo.undo.browser - history management • The Dojo Offline Toolkit
  • 16. The Yahoo! User Interface Library
  • 17. YUI • Created at Yahoo!, BSD licensed • Designed for both creating new applications and integration with legacy code • Focused on browser issues; almost no functionality relating to JS language itself • Extensively tested and documented
  • 18. controls calendar container autocomplete menu slider treeview dragdrop animation dom event connection utilities
  • 19. YAHOO.util.Event.on(window, 'load', function() { var div = YAHOO.util.Dom.get('messages'); if (!div) { return; } setTimeout(function() { var anim = new YAHOO.util.Anim(div, { height: {to: 0}, opacity: {to: 0} }, 0.4); anim.animate(); anim.onComplete.subscribe(function() { div.parentNode.removeChild(div); }); }, 2000); });
  • 20. Download Get the latest version—1.5.1 Learn Prototype is a JavaScript Framework that aims to Online documentation and resources. ease development of dynamic web applications. Discuss Featuring a unique, easy-to-use toolkit for class-driven development and the nicest Ajax library around, Prototype Mailing list and IRC is quickly becoming the codebase of choice for web application developers everywhere. Contribute Prototype and Script.aculo.us Submit patches and report bugs. Prototype and script.aculo.us: The quot;Bungee bookquot; has landed! Who's using Prototype? Meet the developers Core team member Christophe Porteneuve has been hard at work for the past few months tracking
  • 21. • Integrated with Ruby on Rails, but can be used separately as well • Small, readable codebase - Prototype is just 3,000 lines • Makes JavaScript behave more like Ruby • This is a dual-edged sword
  • 22. $$('#bmarks li').each(function(li){ Event.observe(li, 'click', function(e) { this.style.backgroundColor = 'yellow'; }.bindAsEventListener(li)); });
  • 23. Script.aculo.us • Wizzy extension for Prototype • Huge collection of packaged effects • AutoComplete, Slider, InPlaceEditor controls • Drag and drop • Easier DOM building
  • 24. jQuery
  • 25. $(document).ready(function(){ $(quot;aquot;).addClass('hidden').click( function() { $(this).hide(quot;slowquot;); return false; }); ); });
  • 26. It’s not a gimmick! • API designed around “chaining” • Built in support for onContentLoaded • Outstanding node selection • CSS 3, XPath and custom extensions • Small core library, smart plugin mechanism • visualjquery.com/ offers the best docs
  • 27. !?
  • 28. Playing well with others
  • 29. “Namespaces are one honking great idea -- let's do more of those!” Tim Peters, “The Zen of Python” python -c quot;import thisquot;
  • 30. Prototype var moo = $('moo'); ['foo', 'bar'].each(function(id) { // ... }); quot;This is a stringquot;.dasherize() Object.toJSON({foo: 'bar'}
  • 31. YUI YAHOO.util.Event.on( YAHOO.util.Dom.get('foo'), 'click', function(ev) { YAHOO.util.Event.stopEvent(ev); // ... } );
  • 32. YUI idiom var $E = YAHOO.util.Event; var $D = YAHOO.util.Dom; $E.on( $D.get('foo'), 'click', function(ev) { $E.stopEvent(ev); // ... } );
  • 33. jQuery • Everything it does is encapsulated in the jQuery function / object • $(...) is just a shortcut for jQuery(...) • If it exists, the original $ function is stashed away in jQuery._$ • You can restore it with jQuery.noConflict()
  • 34. jQuery.noConflict() <script src=quot;prototype.jsquot;></script> <script src=quot;jquery.jsquot;></script> <script> jQuery.noConflict(); jQuery(function($) { $('div.panel').hide(); // ... }); </script>
  • 35. Progressive enhancement
  • 36. http://www.neighbourhoodfixit.com/
  • 37. Some neat ideas
  • 38. Interaction Design Patterns
  • 39. Smart node selection • Progressive enhancement inevitably starts out by selecting existing nodes • jQuery is based entirely around node selection • Prototype has node selection as a key API • YUI and Dojo just have getElementsByClassName • YUI-ext offers smarter selections for YUI
  • 40. Smarter Ajax • Prototype makes it easy to set a callback for when ANY Ajax request completes... useful for loading status icons • Ajax.Updater can extract and execute <script> blocks in HTML fragments • Great for unobtrusively enhancing elements that have just been added to the page
  • 41. Self-adjusting animations • You can roll your own animations in JavaScript using setTimeout and setInterval... • ... but the time taken for a animation will vary depending on browser performance • Smarter animations adjust their framerate to compensate for browser performance • All four libraries do this
  • 42. DSLs for animation var anim = new YAHOO.util.Anim('el', { opacity: {to: 0.5}, height: {to: 0}, fontSize: { from: 100, to: 50, unit: '%' } }, 1); anim.animate();
  • 43. XPath optimisations • Mozilla and Opera offer fast XPath lookups through document.evaluate(...) • Dojo can use this for getElementsByClass() • Prototype redefines getElementsBySelector to use XPath
  • 44. Minification • All four libraries ship in both uncompressed and compressed formats • YUI uses minification: whitespace and comments are stripped • The Dojo build system uses “ShrinkSafe”, which compresses JavaScript using the Rhino parser • jQuery uses Dean Edwards’ Packer, with base62 encoding
  • 45. Hosting on a CDN http://yui.yahooapis.com/2.2.2/build/reset/reset-min.css http://yui.yahooapis.com/2.2.2/build/dom/dom-min.js ... http://o.aolcdn.com/iamalpha/.resource/jssdk/dojo-0.4.1/dojo.js • JavaScript is cached before the user even visits your site
  • 46. The law of leaky abstractions
  • 47. You need to understand what your library is doing for you
  • 48. Thank you
  • 49. http://www.flickr.com/photos/klara/94704029/ http://www.flickr.com/photos/petele/407151800/ http://www.flickr.com/photos/adactio/464449077/ http://www.flickr.com/photos/thepartycow/62830567/ http://www.flickr.com/photos/lunchtimemama/97685471/