JavaScript Libraries:
  The Big Picture
        Simon Willison
     XTech, 16th May 2007
• What problems do libraries solve?
• An overview of the Big Four
• ... what are the interesting ideas?
Personal bias
• I like JavaScript-the-language
 • So I won't be talking about frameworks that
    generate JavaScript code for you
“ The Web is the most
hostile software engineering
 environment imaginable.”
                Douglas Crockford
The legacy of the
 browser wars
• The DOM API kind of sucks
• Event handling is frequently broken
• Ajax is inconsistent
• You have to roll your own anima...
The Event model
// Internet Explorer
element.attachEvent('click',
  function() {
    alert(window.event);
     }
)
// Ever...
“The bad news:
JavaScript is broken.
    The good news:
 It can be fixed with
  more JavaScript!”
              Geek folk s...
The big four

• The Dojo Toolkit
• The Yahoo! User Interface Library
• Prototype (and Script.aculo.us)
• jQuery
The Dojo Toolkit
• Founded in 2004
• Originally unified from a bunch of older
  frameworks

• Initial aim was to show that JavaScript /
  DH...
dojo.collections   dojo.math

dojo.crypto        dojo.reflect

dojo.date          dojo.rpc

dojo.dnd           dojo.storage...
dijit
• The Dojo widget system
• Create widgets programmatically, or use
   declarative markup

<div dojoType=quot;dijit.T...
The future today

• Cross browser 2D drawing APIs
• dojo.storage - store data offline
• dojo.undo.browser - history managem...
The Yahoo! User Interface Library
YUI

• Created at Yahoo!, BSD licensed
• Designed for both creating new applications
  and integration with legacy code
• ...
controls

                  calendar        container
autocomplete


  menu           slider          treeview



        ...
YAHOO.util.Event.on(window, 'load', function() {
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
JavaScript Libraries: The Big Picture
Upcoming SlideShare
Loading in...5
×

JavaScript Libraries: The Big Picture

35,983

Published on

Published in: Technology
5 Comments
57 Likes
Statistics
Notes
  • Excellent slideshow. I've taken some of the framework graphics as well as adapted to my startup
    Teisha
    http://dashinghealth.com http://healthimplants.com
       Reply 
    Are you sure you want to  Yes  No
    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
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Cool slideshow!!
    http://body-hercules.blogspot.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hey Cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • See http://simonwillison.net/2007/May/16/libraries/#comments for some corrections.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
35,983
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1,948
Comments
5
Likes
57
Embeds 0
No embeds

No notes for slide

Transcript of "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() {
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×