Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Javascript Libraries

•
•
elliando dias
elliando dias

This document discusses JavaScript libraries and frameworks. It provides an overview of some popular options like jQuery, Prototype, Dojo, MooTools, and YUI. It explains why developers use libraries, such as for faster development, cross-browser compatibility, and animation capabilities. The document also discusses how libraries resemble CSS and use selector syntax. Basic examples are provided to demonstrate common tasks like hover effects and row striping. Factors for choosing a library are outlined like maturity, documentation, community, and licensing. The document concludes by explaining how to obtain library code from project websites or Google's AJAX Libraries API.

1 of 35
JavaScript Libraries Future of Web Design NYC08
Karl Swedberg • Email: karl@learningjquery.com • Twitter: @kswedberg • Slides, links, and examples: training.learningjquery.com
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 refresh
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
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)
Why Use a JavaScript Library? • Animation, movement, effects with ease • Painlessly Unobtrusive • Encourages Progressive Enhancement
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 • JavaScriptMVC • qooxdoo • midori • June • UIZE • SimpleJS • fleegix.js • Foundation • GWT • and many more! Others:
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 them – with slides, fades, scales, and all manner of movement.
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.
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: <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/
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
A lot like real words $('#myid span') .addClass('newclass') .parents('div:first') .fadeIn('slow') .find('a') .click(function() { confirm('You really wanna go there?'); });
A lot like real words $('#policy-cta a') .media({ width: 500, height: 300, flashVars: { autostart: 'true', controlbar: 'none', flvPath: '/assets/videos/intro.flv' } });
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');
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/, ''); });
Basic Example 2 Hover • Mootools $$('tr').addEvents({ mouseover: function() { this.addClass('highlight'); }, mouseout: function() { this.removeClass('highlight'); } });
Basic Example 2 Hover • jQuery $('tr') .mouseover(function() { $(this).addClass('highlight'); }) .mouseout( function() { $(this).removeClass('highlight'); });
Basic Example 2 Hover • jQuery $('tr').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });
Let’s See It • Demo
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?)
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.)
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.yahoo.com/yui
How Do I Get Them? • Go to the Google AJAX Libraries API code.google.com/apis/ajaxlibs/
ThankYou!

More Related Content

Javascript Libraries

  • 2. Karl Swedberg • Email: karl@learningjquery.com • Twitter: @kswedberg • Slides, links, and examples: training.learningjquery.com
  • 4. Roseland Ballroom You can … Be like Glenn
  • 5. Why Use JavaScript? • Keep HTML squeaky clean • User Interaction & immediate feedback • Server interaction without page refresh
  • 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. 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. Why Use a JavaScript Library? • Animation, movement, effects with ease • Painlessly Unobtrusive • Encourages Progressive Enhancement
  • 9. What’s Available? • Prototype / Scriptaculous • Dojo Toolkit • Mootools • YUI :Yahoo! User Interface • jQuery The Big Five:
  • 11. Dojo • www.dojotoolkit.org • Dojo Core • Dijit • DojoX
  • 12. Mootools • mootools.net • mootorial.com • Extensions: • clientcide.com • mooforum.net • esteak.net
  • 13. Yahoo! User Interface YUI • developer.yahoo.com/yui
  • 14. jQuery • jquery.com • Plugins: plugins.jquery.com • jQuery UI: ui.jquery.com
  • 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. What Can They Do For Me? • Find elements on a web page. • Do something with them.
  • 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. 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. What Do they look like? • A lot more familiar than you might expect.
  • 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. 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. 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. A lot like real words $('#policy-cta a') .media({ width: 500, height: 300, flashVars: { autostart: 'true', controlbar: 'none', flvPath: '/assets/videos/intro.flv' } });
  • 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. 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. Basic Example 2 Hover • Mootools $$('tr').addEvents({ mouseover: function() { this.addClass('highlight'); }, mouseout: function() { this.removeClass('highlight'); } });
  • 27. Basic Example 2 Hover • jQuery $('tr') .mouseover(function() { $(this).addClass('highlight'); }) .mouseout( function() { $(this).removeClass('highlight'); });
  • 28. Basic Example 2 Hover • jQuery $('tr').hover(function() { $(this).addClass('highlight'); }, function() { $(this).removeClass('highlight'); });
  • 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. 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. How Do I Get Them? • Go to their websites
  • 33. How Do I Get Them? • Go to their websites • dojotoolkit.org • jquery.com • mootools.net • prototypejs.org • developer.yahoo.com/yui
  • 34. How Do I Get Them? • Go to the Google AJAX Libraries API code.google.com/apis/ajaxlibs/