Your SlideShare is downloading. ×
0
JavaScript Libraries
Future of Web Design
NYC08
Karl Swedberg
• Email: karl@learningjquery.com
• Twitter: @kswedberg
• Slides, links, and examples:
training.learningjquer...
Roseland Ballroom
You can …
Roseland Ballroom
You can …
Be like Glenn
Why Use JavaScript?
• Keep HTML squeaky clean
• User Interaction & immediate feedback
• Server interaction without page re...
Why Not Use Flash?
• Flash is great!
• You should use it.
• But it’s not the answer to every question,
or the solution to ...
Why Use a
JavaScript Library?
• Crazy fast development
• Cross-browser solutions without the mess
• Leverage what you alre...
Why Use a
JavaScript Library?
• Animation, movement, effects with ease
• Painlessly Unobtrusive
• Encourages Progressive E...
What’s Available?
• Prototype / Scriptaculous
• Dojo Toolkit
• Mootools
• YUI :Yahoo! User Interface
• jQuery
The Big Five:
Prototype
• www.prototypejs.org
• script.aculo.us
• Extensions: scripteka.com
Dojo
• www.dojotoolkit.org
• Dojo Core
• Dijit
• DojoX
Mootools
• mootools.net
• mootorial.com
• Extensions:
• clientcide.com
• mooforum.net
• esteak.net
Yahoo! User Interface
YUI
• developer.yahoo.com/yui
jQuery
• jquery.com
• Plugins: plugins.jquery.com
• jQuery UI: ui.jquery.com
What’s Available?
• Mochikit
• Adobe Spry
• SproutCore
• Cappuccino
• ExtJS
• DOMAssistant
• base2
• DED|Chain
• JavaScrip...
What Can They Do
For Me?
• Find elements on a web page.
• Do something with them.
What Can They Do
For Me?
• Insert, copy, move, remove elements.
• Change their attributes, their appearance.
• Animate the...
What Can They Do
For Me?
• Incorporate “widgets” (date pickers,
dialogs, data grids, sliders, etc.)
• Send information to ...
What Do they look like?
• A lot more familiar than you might expect.
A lot like CSS
• element {} 

 
 
 
 div: <div>
• #id {} 
 
 
 
 
 
 #myid: <h2 id="myid">
• .class {}
 
 
 
 
 .myclass: ...
A lot like CSS
• $('element') 
 
 
 
 
 div: <div>
• $('#id') 
 
 
 
 
 
 #myid: <h2 id="myid">
• $('.class')
 
 
 
 
 
 ....
A lot like real words
$('#myid span')
.addClass('newclass')
.parents('div:first')
.fadeIn('slow')
.find('a')
.click(functi...
A lot like real words
$('#policy-cta a')
.media({
width: 500,
height: 300,
flashVars: {
autostart: 'true',
controlbar: 'non...
Basic Example 1
Table row striping
• jQuery
$('tr:nth-child(odd)').addClass('alt');
• Mootools
$$('tr:odd').addClass('alt'...
Basic Example 2
Hover
• Dojo
dojo.query('tr')
.onmouseenter(function(e) {
e.target.className += ' highlight';
})
.onmousel...
Basic Example 2
Hover
• Mootools
$$('tr').addEvents({
mouseover: function() {
this.addClass('highlight');
},
mouseout: fun...
Basic Example 2
Hover
• jQuery
$('tr')
.mouseover(function() {
$(this).addClass('highlight');
})
.mouseout( function() {
$...
Basic Example 2
Hover
• jQuery
$('tr').hover(function() {
$(this).addClass('highlight');
}, function() {
$(this).removeCla...
Let’s See It
• Demo
How Do I Choose?
• Library Maturity (alpha, beta, number of releases?
Unit tests?)
• Documentation (official, unofficial, on...
How Do I Choose?
• Server-side Framework (Does it come bundled
with a JS library?)
• Extensibility (Plugins, widgets, comp...
How Do I Get Them?
• Go to their websites
How Do I Get Them?
• Go to their websites
• dojotoolkit.org
• jquery.com
• mootools.net
• prototypejs.org
• developer.yaho...
How Do I Get Them?
• Go to the Google AJAX Libraries API
code.google.com/apis/ajaxlibs/
ThankYou!
Upcoming SlideShare
Loading in...5
×

Javascript Libraries

2,714

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,714
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript Libraries"

  1. 1. JavaScript Libraries Future of Web Design NYC08
  2. 2. Karl Swedberg • Email: karl@learningjquery.com • Twitter: @kswedberg • Slides, links, and examples: training.learningjquery.com
  3. 3. Roseland Ballroom You can …
  4. 4. Roseland Ballroom You can … Be like Glenn
  5. 5. Why Use JavaScript? • Keep HTML squeaky clean • User Interaction & immediate feedback • Server interaction without page refresh
  6. 6. Why Not Use Flash? • Flash is great! • You should use it. • But it’s not the answer to every question, or the solution to every problem
  7. 7. Why Use a JavaScript Library? • Crazy fast development • Cross-browser solutions without the mess • Leverage what you already know about HTML & CSS • Better CSS support than CSS (cf. www.quirksmode.org)
  8. 8. Why Use a JavaScript Library? • Animation, movement, effects with ease • Painlessly Unobtrusive • Encourages Progressive Enhancement
  9. 9. What’s Available? • Prototype / Scriptaculous • Dojo Toolkit • Mootools • YUI :Yahoo! User Interface • jQuery The Big Five:
  10. 10. Prototype • www.prototypejs.org • script.aculo.us • Extensions: scripteka.com
  11. 11. Dojo • www.dojotoolkit.org • Dojo Core • Dijit • DojoX
  12. 12. Mootools • mootools.net • mootorial.com • Extensions: • clientcide.com • mooforum.net • esteak.net
  13. 13. Yahoo! User Interface YUI • developer.yahoo.com/yui
  14. 14. jQuery • jquery.com • Plugins: plugins.jquery.com • jQuery UI: ui.jquery.com
  15. 15. What’s Available? • Mochikit • Adobe Spry • SproutCore • Cappuccino • ExtJS • DOMAssistant • base2 • DED|Chain • JavaScriptMVC • qooxdoo • midori • June • UIZE • SimpleJS • fleegix.js • Foundation • GWT • and many more! Others:
  16. 16. What Can They Do For Me? • Find elements on a web page. • Do something with them.
  17. 17. What Can They Do For Me? • Insert, copy, move, remove elements. • Change their attributes, their appearance. • Animate them – with slides, fades, scales, and all manner of movement.
  18. 18. What Can They Do For Me? • Incorporate “widgets” (date pickers, dialogs, data grids, sliders, etc.) • Send information to the server. • And receive information from the server. • And do stuff with that information. • Help with more “programmery” things.
  19. 19. What Do they look like? • A lot more familiar than you might expect.
  20. 20. A lot like CSS • element {} div: <div> • #id {} #myid: <h2 id="myid"> • .class {} .myclass: <p class="myclass"> • selector1, selector2 {} p, a: <p></p><a></a> • ancestor descendant {} p span: <p><span><span> • parent > child {} p > span: <p><span><span> • :nth-child() {} li:nth-child(2): <ul><li><li> http://www.w3.org/TR/css3-selectors/
  21. 21. A lot like CSS • $('element') div: <div> • $('#id') #myid: <h2 id="myid"> • $('.class') .myclass: <p class="myclass"> • $('selector1, selector2') p, a: <p></p><a></a> • $('ancestor descendant') p span: <p><span><span> • $('parent > child') p > span: <p><span><span> • $(':nth-child()') li:nth-child(2): <ul><li><li> http://docs.jquery.com/Selectors
  22. 22. A lot like real words $('#myid span') .addClass('newclass') .parents('div:first') .fadeIn('slow') .find('a') .click(function() { confirm('You really wanna go there?'); });
  23. 23. A lot like real words $('#policy-cta a') .media({ width: 500, height: 300, flashVars: { autostart: 'true', controlbar: 'none', flvPath: '/assets/videos/intro.flv' } });
  24. 24. Basic Example 1 Table row striping • jQuery $('tr:nth-child(odd)').addClass('alt'); • Mootools $$('tr:odd').addClass('alt'); • Dojo dojo.query('tr:nth-child(odd)').addClass('alt');
  25. 25. Basic Example 2 Hover • Dojo dojo.query('tr') .onmouseenter(function(e) { e.target.className += ' highlight'; }) .onmouseleave(function(e) { e.target.className = e.target.className .replace(/ highlight/, ''); });
  26. 26. Basic Example 2 Hover • Mootools $$('tr').addEvents({ mouseover: function() { this.addClass('highlight'); }, mouseout: function() { this.removeClass('highlight'); } });
  27. 27. Basic Example 2 Hover • jQuery $('tr') .mouseover(function() { $(this).addClass('highlight'); }) .mouseout( function() { $(this).removeClass('highlight'); });
  28. 28. Basic Example 2 Hover • jQuery $('tr').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });
  29. 29. Let’s See It • Demo
  30. 30. How Do I Choose? • Library Maturity (alpha, beta, number of releases? Unit tests?) • Documentation (official, unofficial, online, offline, books?) • Community (Forums, Google groups, blogs, IRC, Twitter? Tone, helpfulness, responsiveness?) • Project requirements (web site or application? ajax, effects, events?) • Performance (benchmarks?)
  31. 31. How Do I Choose? • Server-side Framework (Does it come bundled with a JS library?) • Extensibility (Plugins, widgets, components available and easy to find? Create your own easily?) • Style (What does the code look like? Is it easy to figure out what's going on? Does it look familiar at all?) • Commitment to Unobtrusive JavaScript and Accessibility • Cost and Licensing (fee? open source? MIT, GNU, GPL, LGPL, BSD, etc.)
  32. 32. How Do I Get Them? • Go to their websites
  33. 33. How Do I Get Them? • Go to their websites • dojotoolkit.org • jquery.com • mootools.net • prototypejs.org • developer.yahoo.com/yui
  34. 34. How Do I Get Them? • Go to the Google AJAX Libraries API code.google.com/apis/ajaxlibs/
  35. 35. ThankYou!
  1. A particular slide catching your eye?

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

×