javascript library overview

94
JavaScript Libraries John Resig - October 2008 http://ejohn.org / http://twitter.com/jeresig/

Upload: jeresig

Post on 08-Sep-2014

57.685 views

Category:

Technology


3 download

DESCRIPTION

Talk I gave at Ajax Experience '08.

TRANSCRIPT

  • JavaScript Libraries John Resig - October 2008 http://ejohn.org/ http://twitter.com/jeresig/
  • Question: How do you want to write JavaScript?
  • 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 exibility.
  • 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.
  • 3) Down-and-Dirty Write all JavaScript code from scratch Deal, directly, with browser bugs Quirksmode.org is your lifeline Excessively exible, to the point of hinderance.
  • What weve just seen... Widgets Libraries Raw JavaScript
  • What weve just seen... Widgets Libraries Raw JavaScript
  • Why use a library? Makes JavaScript bearable Gets the job done fast Simplies cross-browser support Sort of like C stdlib - no one just codes all of C by hand
  • 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
  • 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
  • Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specic Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
  • Open Source Libraries Browser Only Client/Server Scriptaculous Task AjaxCFC moo.fx Specic Qcodo Open Rico Prototype, jQuery, General Ruby on Rails Yahoo UI, Dojo, Purpose CakePHP Mootools
  • Why these libraries?
  • 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
  • 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
  • Not Included (Besides obvious time constraints.) ExtJS - Closed development ASP.NET Ajax - Mostly .NET developers GWT - Strictly limited to Java developers
  • The Libraries
  • Prototype
  • Prototype: Overview Started March 2005 by Sam Stephenson Incredibly popular, tied with Ruby on Rails popularity Development backed by 37 Signals
  • Prototype: Focus Improving the usability of the JavaScript language Big emphasis on adding in missing JavaScript features Clean structure, clean objects and classes
  • 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
  • jQuery
  • jQuery: Overview Released January 2006 by John Resig Rapid rise in popularity Many developers across the globe Corporate backing (Microsoft, Nokia)
  • jQuery: Focus Improving the interaction between JavaScript and HTML Highly-effective, short, code Looking at jQuery 1.2.6 1.3 release upcoming
  • Yahoo! UI
  • YUI: Overview Released Feb 2006 by Yahoo! Maintained and nanced internally Attempt to standardize internal JavaScript
  • 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)
  • Dojo
  • Dojo: Overview Started early 2005 by Alex Russell + Co. Large development community Corporate backing (IBM, AOL)
  • Dojo: Focus Building complete web applications A package hierarchy, e.g.: dojo.addClass( ... ) Focus has transcended into widgets (Dijit) Huge number of features Today were looking at Dojo 1.1.1 1.2 coming soon
  • Mootools
  • 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
  • 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
  • What should a library have?
  • Code Base Core Functionality DOM Events Ajax Animations User Interface Widgets
  • Development Good Architecture Open Licensing Wide Browser Support Small File Size
  • Project Development Team (Open, Funded) Code in SVN / Bug Tracker Good Unit Test Coverage
  • Documentation Full API Coverage Plenty of Tutorials Some Books Wide variety of Demos
  • Community Active Mailing List / Forum Support and Training Popularity
  • 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.
  • Code Base Core Functionality DOM Events Ajax Animations User Interface Widgets
  • Core Functionality Bare minimum needed to make a dynamic Ajax web site: DOM (Traversal and Manipulation) Events Ajax Animations
  • DOM Traversal Using CSS selectors to locate elements Modication Create/remove/modify elements Having a DOM builder is important
  • 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')
  • DOM Modication Prototype: $(list).insert(
  • Another item); jQuery: $(#li).append(
  • An item); Mootools: $(li).append(new Element(li, {html: An item}));
  • DOM Manipulation Dojo: dojo.query(#li).addContent(
  • An item); Yahoo UI: Y.get(#li).appendChild( Y.create(
  • An item));
  • 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); });
  • Events (cont.) Yahoo UI: Y.get(#list).on(click, function(){ alert(List Clicked); }); Dojo: dojo.query(quot;#mylinkquot;).connect(quot;clickquot;, function(){ alert(Link clicked); }); Mootools: $$(quot;#mylinkquot;).addEvent(quot;clickquot;, function(){ alert(Link clicked); });
  • 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 ); });
  • 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: quot;test.htmlquot;, load: function(type, data) { dojo.query(#results).empty().addContent( data ); } });
  • Ajax (cont.) Mootools: onComplete: function(t, e, html){ new Request.HTML({ $$(#results).html( html ); }}).get('myPage.html');
  • Ajax (cont.) jQuery and Mootools are capable of doing DOM traversing over XML jQuery.get(test.xml, function(xml){ $(user, xml).each(function(){ $().text( $(this).text() ) .appendTo(#userlist); }); });
  • Animations Simple animations (hide/show/toggle) Provide elegant transitions Prototype, using Scriptaculous: $(menu).appear({duration: 0.6}); jQuery: $(#menu).animate({opacity: 1}, 600);
  • 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);
  • 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
  • User Interface Widgets Difcult to implement components, made easy Commonly used, save duplication Some common components: Drag & Drop, Tree, Grid, Modal Dialog, Tabbed Pane, Menu / Toolbar, Datepicker, Slider
  • User Interface Packages Only looking at ofcially-supported code: Prototype has Scriptaculous jQuery has jQuery UI Dojo has Dijit Mootools includes some in Core Included in Yahoo UI
  • Drag & Drop Drag an item from one location and drop in an other Supported by all libraries
  • Tree A navigable hierarchy (like a folder/le explorer) In Dojo and Yahoo UI
  • Grid An advanced table (resizable, editable, easily navigable) In Dojo and Yahoo UI
  • Modal Dialog Display conned content (usually drag & droppable) and conrmation dialogs In Dojo,Yahoo UI, and jQuery
  • Tabbed Pane Multiple panes of content navigable by a series of tabs In Dojo,Yahoo UI, and jQuery
  • Menu / Toolbar A list of navigable items (with sub-menus) In Dojo and Yahoo UI
  • Datepicker An input for selecting a date (or a range of dates) In Dojo,Yahoo UI, and jQuery
  • Slider A draggable input for entering a general, numerical, value In all libraries
  • 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)
  • Themeing A consistent look-and-feel for widgets jQuery,Yahoo UI, and Dojo provide themeing capabilities jQuerys and Yahoo UIs are documented
  • 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
  • Development Good Architecture Open Licensing Wide Browser Support Small File Size Speed
  • 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 conict) jQuery is extensible with plugins Dojo uses a package system
  • Licensing All use liberal licenses MIT: (Keep my name on the le) Prototype, jQuery, Mootools BSD: (...and please dont sue me.) Yahoo UI, Dojo
  • Browser Support Everyone supports: IE 6+, Firefox 2+, Safari 3+, Opera 9+ Note: Most are in the process of dropping support for Safari 2
  • File Size Serving your JavaScript minied + Gzipped Optimal level of compression and speed Core le size (in KB): 35.00 26.25 17.50 8.75 0 Prototype jQuery Yahoo UI Dojo Mootools
  • 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 Modication, Events completely un- compared
  • Project Development Team (Open, Funded) Code in SVN / Bug Tracker Good Unit Test Coverage
  • 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
  • SVN / Bug Tracker Prototype, jQuery, Mootools, and Dojo all have code in a public SVN repositories Yahoo UIs development is private and is limited to Yahoo employees Theyre working to x this! All have a public bug tracker
  • 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 UIs testing framework
  • Documentation Full API Coverage Plenty of Tutorials Some Books Wide variety of Demos
  • API Documentation Prototype, jQuery, Mootools, and Yahoo UI all have full coverage Dojos coverage has improved dramatically jQuery provides runnable examples with each API item
  • 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
  • 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)
  • Books (cont.) Dojo: Dojo: The Denitive Guide (OReilly) Mastering Dojo (Prag Prog) Dojo (Developers Library) Practical Dojo Projects (Apress) Mootools: Mootools Essentials (Apress)
  • 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
  • Community Active Mailing List / Forum Support and Training Popularity
  • 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
  • Support and Training Dojo provides paid support and training (via Sitepen) jQuery provides paid jQuery UI support and training (via Liferay)
  • 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
  • Common Questions
  • Why dont the libraries merge? Its really hard to have a unied backend Everyone xes different bugs Everyone implements *slightly* different features A combined library would be massive
  • Can common components be made? Possibly. Again hit the problem of nding the correct mix of features and bugs. Component would have to be very special.
  • Sizzle Build common features A common selector engine Being integrated into: jQuery, Prototype, and MochiKit
  • Why not make a unied API? A librarys API helps makes it unique Embody different philosophies Combining all of them and trying to please everyone creates a unied, boring, mess
  • More Information ... questions? Prototype: http://prototypejs.org/ jQuery: http://jquery.com/ Yahoo UI: http://developer.yahoo.com/yui/ Dojo: http://dojotoolkit.org/