JavaScript Library Overview

Slideshow Transcript

1. Slide 1: JavaScript Libraries John Resig - October 2008 http://ejohn.org/ http://twitter.com/jeresig/
2. Slide 2: Question: How do you want to write JavaScript?
3. Slide 3: 1) Plug-and-Play • Drop in a “calendar widget” or “tabbed navigation” • Little, to no, JavaScript experience required. • Just customize some options and go. • No flexibility.
4. Slide 4: 2) Some Assembly Required • Write common utilities • Click a link, load a page via Ajax • Build a dynamic menu • Creating interactive forms • Use pre-made code to distance yourself from browser bugs. • Flexible, until you hit a browser bug.
5. Slide 5: 3) Down-and-Dirty • Write all JavaScript code from scratch • Deal, directly, with browser bugs • Quirksmode.org is your lifeline • Excessively flexible, to the point of hinderance.
6. Slide 6: What we’ve just seen... • Widgets • Libraries • Raw JavaScript
7. Slide 7: What we’ve just seen... • Widgets • Libraries • Raw JavaScript
8. Slide 8: Why use a library? • Makes JavaScript bearable • Gets the job done fast • Simplifies cross-browser support • Sort of like C stdlib - no one just codes all of C by hand
9. Slide 9: What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype, jQuery, Browser Backbase Yahoo UI, Dojo, Only SmartClient Mootools
10. Slide 10: What kind of libraries exist? Open Source Commercial Atlas Client/ AjaxCFC Backbase for Server Qcodo Struts Prototype, jQuery, Browser Backbase Yahoo UI, Dojo, Only SmartClient Mootools
11. Slide 11: Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
12. Slide 12: Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specific Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
13. Slide 13: Why these libraries?
14. Slide 14: March Developer Survey jQuery Prototype Yahoo UI Dojo Mootools Other 18% 34% 18% 8% 8% 13% http://ajaxian.com/archives/nitobi-survey-results-on-ajax- development
15. Slide 15: Google Trends jQuery Prototype Mootools Dojo Yahoo UI http://google.com/trends?q=prototype+javascript%2C+jquery+javascript%2C+yui+javascript%2C+dojo+javascript&ctab=0&geo=all&date=all&sort=0
16. Slide 16: Not Included • (Besides obvious time constraints.) • ExtJS - Closed development • ASP.NET Ajax - Mostly .NET developers • GWT - Strictly limited to Java developers
17. Slide 17: The Libraries
18. Slide 18: Prototype
19. Slide 19: Prototype: Overview • Started March 2005 by Sam Stephenson • Incredibly popular, tied with Ruby on Rails’ popularity • Development backed by 37 Signals
20. Slide 20: Prototype: Focus • Improving the usability of the JavaScript language • Big emphasis on adding in ‘missing’ JavaScript features • Clean structure, clean objects and ‘classes’
21. Slide 21: Prototype: Details • Code quality is fantastic, great features • All animations (and interactions) are in Scriptaculous • Looking at Prototype 1.6.0.2 • 1.6.0.3/1.6.1 release upcoming
22. Slide 22: jQuery
23. Slide 23: jQuery: Overview • Released January 2006 by John Resig • Rapid rise in popularity • Many developers across the globe • Corporate backing (Microsoft, Nokia)
24. Slide 24: jQuery: Focus • Improving the interaction between JavaScript and HTML • Highly-effective, short, code • Looking at jQuery 1.2.6 • 1.3 release upcoming
25. Slide 25: Yahoo! UI
26. Slide 26: YUI: Overview • Released Feb 2006 by Yahoo! • Maintained and financed internally • Attempt to standardize internal JavaScript
27. Slide 27: YUI: Focus • Exposing, and solving, common methodologies • Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) • Yahoo UI 2.5.1 is current • Looking at 3.0 today (large overhaul)
28. Slide 28: Dojo
29. Slide 29: Dojo: Overview • Started early 2005 by Alex Russell + Co. • Large development community • Corporate backing (IBM, AOL)
30. Slide 30: Dojo: Focus • Building complete web applications • A package hierarchy, e.g.: dojo.addClass( ... ) • Focus has transcended into widgets (Dijit) • Huge number of features • Today we’re looking at Dojo 1.1.1 • 1.2 coming soon
31. Slide 31: Mootools
32. Slide 32: Mootools: Overview • Released Sept 2006 by Valerio Proietti • A spiritual fork of Prototype that included animations, drag and drop, etc. • (Borrowed concepts like native prototype extension and classical object construction.) • Has evolved dramatically since then
33. Slide 33: Mootools: Focus • A clean classical structure • A more holistic approach to development • Tackle a solid core set of functionality • Include a couple core plugins • Looking at 1.2
34. Slide 34: What should a library have?
35. Slide 35: Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
36. Slide 36: Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size
37. Slide 37: Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
38. Slide 38: Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
39. Slide 39: Community • Active Mailing List / Forum • Support and Training • Popularity
40. Slide 40: Most Important Question: • Does the JavaScript library help me to write JavaScript. • The style of the library and its API is very core to this. • Can really only be determined through sitting down and playing with a library.
41. Slide 41: Code Base • Core Functionality • DOM • Events • Ajax • Animations • User Interface Widgets
42. Slide 42: Core Functionality • Bare minimum needed to make a dynamic “Ajax” web site: • DOM (Traversal and Manipulation) • Events • Ajax • Animations
43. Slide 43: DOM • Traversal • Using CSS selectors to locate elements • Modification • Create/remove/modify elements • Having a DOM builder is important
44. Slide 44: DOM Traversal • Prototype, Mootools: $$(“table > tr”) • jQuery: $(“div > p:nth-child(odd)”) • Dojo: dojo.query(“table tr:nth-child(even)”) • Yahoo UI: Y.get('div p')
45. Slide 45: DOM Modification • Prototype: $(“list”).insert(“<li>Another item</li>”); • jQuery: $(“#li”).append(“<li>An item</li>”); • Mootools: $(“li”).append(new Element(“li”, {html: “An item”}));
46. Slide 46: DOM Manipulation • Dojo: dojo.query(“#li”).addContent(“<li>An item</li>”); • Yahoo UI: Y.get(“#li”).appendChild( Y.create(“<li>An item</li>”));
47. Slide 47: Events • Support for simple event binding/removal • Support for custom events is essential • Prototype: $$(“#button”).invoke(“observe”, ”click”, function(){ alert(“Thanks for the click!”); }); • jQuery: $(“div”).click(function(){ alert(“div clicked”); });
48. Slide 48: Events (cont.) • Yahoo UI: Y.get(“#list”).on(“click”, function(){ alert(“List Clicked”); }); • Dojo: dojo.query(\"#mylink\").connect(\"click\", function(){ alert(“Link clicked”); }); • Mootools: $$(\"#mylink\").addEvent(\"click\", function(){ alert(“Link clicked”); });
49. Slide 49: Ajax • Request and load remote documents • Prototype: new Ajax.Request(“test.html”, { method: “GET”, onComplete: function(res){ $$(‘#results’).invoke(“update”,( res.responseText ); } }); • jQuery: jQuery.get(“test.html”, function(html){ $(“#results”).html( html ); });
50. Slide 50: Ajax (cont.) • Yahoo UI Y.on(“io:complete”, function(id, data){ Y.get(“#results”).set(“innerHTML”, data.responseText); }); Y.io(“test.html”); • Dojo dojo.xhrGet({ url: \"test.html\", load: function(type, data) { dojo.query(“#results”).empty().addContent( data ); } });
51. Slide 51: Ajax (cont.) • Mootools: onComplete: function(t, e, html){ new Request.HTML({ $$(“#results”).html( html ); }}).get('myPage.html');
52. Slide 52: Ajax (cont.) • jQuery and Mootools are capable of doing DOM traversing over XML • jQuery.get(“test.xml”, function(xml){ $(“user”, xml).each(function(){ $(“<li/>”).text( $(this).text() ) .appendTo(“#userlist”); }); });
53. Slide 53: Animations • Simple animations (hide/show/toggle) • Provide elegant transitions • Prototype, using Scriptaculous: $(‘menu’).appear({duration: 0.6}); • jQuery: $(“#menu”).animate({opacity: 1}, 600);
54. Slide 54: Animations (cont.) • Yahoo UI: new Y.Anim({ node: “#list”, duration: 600, { to: {opacity: 1}}}).run(); • Dojo: dojo.query(“#list”).anim({opacity: 1}, 600); • Mootools: new Fx.Tween(“list”, {duration: 600}).start(“opacity”, 0, 1);
55. Slide 55: Core Feature Summary DOM Events Anim. Ajax Prototype X X / X jQuery X X X X Yahoo UI X X X X Dojo X X X X Mootools X X X X
56. Slide 56: User Interface Widgets • Difficult to implement components, made easy • Commonly used, save duplication • Some common components: Drag & Drop, Tree, Grid, Modal Dialog, Tabbed Pane, Menu / Toolbar, Datepicker, Slider
57. Slide 57: User Interface Packages • Only looking at officially-supported code: • Prototype has Scriptaculous • jQuery has jQuery UI • Dojo has Dijit • Mootools includes some in Core • Included in Yahoo UI
58. Slide 58: Drag & Drop • Drag an item from one location and drop in an other • Supported by all libraries
59. Slide 59: Tree • A navigable hierarchy (like a folder/file explorer) • In Dojo and Yahoo UI
60. Slide 60: Grid • An advanced table (resizable, editable, easily navigable) • In Dojo and Yahoo UI
61. Slide 61: Modal Dialog • Display confined content (usually drag & droppable) and confirmation dialogs • In Dojo,Yahoo UI, and jQuery
62. Slide 62: Tabbed Pane • Multiple panes of content navigable by a series of tabs • In Dojo,Yahoo UI, and jQuery
63. Slide 63: Menu / Toolbar • A list of navigable items (with sub-menus) • In Dojo and Yahoo UI
64. Slide 64: Datepicker • An input for selecting a date (or a range of dates) • In Dojo,Yahoo UI, and jQuery
65. Slide 65: Slider • A draggable input for entering a general, numerical, value • In all libraries
66. Slide 66: Tons More! • Color Picker (Dojo,YUI, jQuery) • Layout (Dojo,YUI) • Auto Complete (Dojo, Proto,YUI, jQuery) • Selectables (Dojo, Proto, jQuery) • Accordion (Dojo, jQuery, Mootools) • WYSIWYG (Dojo,YUI)
67. Slide 67: Themeing • A consistent look-and-feel for widgets • jQuery,Yahoo UI, and Dojo provide themeing capabilities • jQuery’s and Yahoo UI’s are documented
68. Slide 68: Accessibility • Taking in to consideration points from ARIA (Accessible Rich Internet Applications) • Dojo is taking a solid lead, here • jQuery received funding and is working on ARIA integration to jQuery UI • Yahoo is investigating ARIA
69. Slide 69: Development • Good Architecture • Open Licensing • Wide Browser Support • Small File Size • Speed
70. Slide 70: Architecture • Bottom Up (Prototype, jQuery) vs. Top Down (Dojo,Yahoo UI) • jQuery, Dojo, and Yahoo UI all use a single namespace • Prototype extends native objects (high likelihood of inter-library conflict) • jQuery is extensible with plugins • Dojo uses a package system
71. Slide 71: Licensing • All use liberal licenses • MIT: (“Keep my name on the file”) Prototype, jQuery, Mootools • BSD: (“...and please don’t sue me.”) Yahoo UI, Dojo
72. Slide 72: Browser Support • Everyone supports: IE 6+, Firefox 2+, Safari 3+, Opera 9+ • Note: • Most are in the process of dropping support for Safari 2
73. Slide 73: File Size • Serving your JavaScript minified + Gzipped • Optimal level of compression and speed • Core file size (in KB): 35.00 26.25 17.50 8.75 0 Prototype jQuery Yahoo UI Dojo Mootools
74. Slide 74: Speed • Hard to quantify • Currently the only point of comparison is in CSS Selectors • Speed varies across browsers • Competition is strong (much faster than what they use to be) • DOM Modification, Events completely un- compared
75. Slide 75: Project • Development Team (Open, Funded) • Code in SVN / Bug Tracker • Good Unit Test Coverage
76. Slide 76: Development Team • Prototype, jQuery, Mootools, and Dojo all have open development (anyone can contribute) • jQuery,Yahoo UI, and Dojo all have paid, full-time, developers working on the code • All have paid, part-time, developers
77. Slide 77: SVN / Bug Tracker • Prototype, jQuery, Mootools, and Dojo all have code in a public SVN repositories • Yahoo UI’s development is private and is limited to Yahoo employees • They’re working to fix this! • All have a public bug tracker
78. Slide 78: Unit Tests • All libraries have some automated unit tests • jQuery,Yahoo UI, and Dojo all have public unit test URLs • jQuery and Dojo have tests that can run in Rhino • UI Testing: Windmill,Yahoo UI, jQuery UI’s testing framework
79. Slide 79: Documentation • Full API Coverage • Plenty of Tutorials • Some Books • Wide variety of Demos
80. Slide 80: API Documentation • Prototype, jQuery, Mootools, and Yahoo UI all have full coverage • Dojo’s coverage has improved dramatically • jQuery provides runnable examples with each API item
81. Slide 81: Tutorials • All libraries provide some tutorials • jQuery,Yahoo UI, and Dojo have screencasts/presentations • Prototype: 6 • jQuery: 118 (English) • Yahoo UI: 30+ (each component has at least one) • Dojo: 24
82. Slide 82: Books • Prototype: • Prototype and Scriptaculous in Action (Manning) • Prototype and Scriptaculous (Pragmatic) • jQuery: • Learning jQuery (Packt) • jQuery Reference Guide (Packt) • Yahoo UI: • Learning the Yahoo UI Library (Packt)
83. Slide 83: Books (cont.) • Dojo: • Dojo: The Definitive Guide (O’Reilly) • Mastering Dojo (Prag Prog) • Dojo (Developer’s Library) • Practical Dojo Projects (Apress) • Mootools: • Mootools Essentials (Apress)
84. Slide 84: Demos • Yahoo UI provides a considerable number of live demos and examples for all features • jQuery provides live examples and a few demo applications • Mootools provides a large number of demos • Dojo provides demo applications for their widgets
85. Slide 85: Community • Active Mailing List / Forum • Support and Training • Popularity
86. Slide 86: Mailing List / Forum • Prototype, jQuery, Mootools, and Yahoo UI have mailing lists • Prototype: 32 posts/day • jQuery: 116 posts/day • Yahoo UI: 55 posts/day • Mootools: 21 posts/day • Dojo has an active forum • Mootools also has a user-built forum
87. Slide 87: Support and Training • Dojo provides paid support and training (via Sitepen) • jQuery provides paid jQuery UI support and training (via Liferay)
88. Slide 88: Popularity • Who uses what: • Prototype: Apple, ESPN, CNN, Fox News • jQuery: Google, IBM, Microsoft, Nokia • Yahoo:Yahoo, LinkedIn, Target, Slashdot • Dojo: IBM, AOL, Mapquest, Bloglines • Mootools: W3C, CNet,Vimeo, Jeep
89. Slide 89: Common Questions
90. Slide 90: Why don’t the libraries merge? • It’s really hard to have a unified backend • Everyone fixes different bugs • Everyone implements *slightly* different features • A combined library would be massive
91. Slide 91: Can common components be made? • Possibly. • Again hit the problem of finding the correct mix of features and bugs. • Component would have to be very special.
92. Slide 92: Sizzle • Build common features • A common selector engine • Being integrated into: jQuery, Prototype, and MochiKit
93. Slide 93: Why not make a unified API? • A library’s API helps makes it unique • Embody different philosophies • Combining all of them and trying to please everyone creates a unified, boring, mess
94. Slide 94: More Information ... questions? • Prototype: http://prototypejs.org/ • jQuery: http://jquery.com/ • Yahoo UI: http://developer.yahoo.com/yui/ • Dojo: http://dojotoolkit.org/