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.

JavaScript Libraries: The Big Picture

37,512 views

Published on

Published in: Technology
  • Login to see the comments

JavaScript Libraries: The Big Picture

  1. 1. JavaScript Libraries: The Big Picture Simon Willison XTech, 16th May 2007
  2. 2. • What problems do libraries solve? • An overview of the Big Four • ... what are the interesting ideas?
  3. 3. Personal bias
  4. 4. • I like JavaScript-the-language • So I won't be talking about frameworks that generate JavaScript code for you
  5. 5. “ The Web is the most hostile software engineering environment imaginable.” Douglas Crockford
  6. 6. The legacy of the browser wars
  7. 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. 8. The Event model // Internet Explorer element.attachEvent('click', function() { alert(window.event); } ) // Everyone else element.addEventListener('click', function(ev) { alert(ev) }, false );
  9. 9. “The bad news: JavaScript is broken. The good news: It can be fixed with more JavaScript!” Geek folk saying
  10. 10. The big four • The Dojo Toolkit • The Yahoo! User Interface Library • Prototype (and Script.aculo.us) • jQuery
  11. 11. The Dojo Toolkit
  12. 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. 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. 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. 15. The future today • Cross browser 2D drawing APIs • dojo.storage - store data offline • dojo.undo.browser - history management • The Dojo Offline Toolkit
  16. 16. The Yahoo! User Interface Library
  17. 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. 18. controls calendar container autocomplete menu slider treeview dragdrop animation dom event connection utilities
  19. 19. YAHOO.util.Event.on(window, 'load', function() {

×