JavaScript Libraries. Ajax Experience - October John Resig (ejohn.org)

Transcription

1 JavaScript Libraries Ajax Experience - October 2007 John Resig (ejohn.org)

2 Question: How do you want to write JavaScript?

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 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 3) Down-and-Dirty Write all JavaScript code from scratch Deal, directly, with browser bugs Quirksmode is your lifeline Excessively flexible, to the point of hinderance.

6 What we ve just seen... Widgets Libraries Raw JavaScript

7 What we ve just seen... Widgets Libraries Raw JavaScript

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 C by hand

9 What kind of libraries exist? Client/ Server Open Source AjaxCFC Qcodo Commercial Atlas Backbase for Struts Browser Only Prototype Dojo jquery Yahoo UI Backbase SmartClient

10 What kind of libraries exist? Client/ Server Open Source AjaxCFC Qcodo Commercial Atlas Backbase for Struts Browser Only Prototype Dojo jquery Yahoo UI Backbase SmartClient

11 Open Source Libraries Task Specific Browser Only Scriptaculous moo.fx Open Rico Client/Server AjaxCFC Qcodo General Purpose Prototype Dojo jquery Yahoo UI Ruby on Rails CakePHP

12 Open Source Libraries Task Specific Browser Only Scriptaculous moo.fx Open Rico Client/Server AjaxCFC Qcodo General Purpose Prototype Dojo jquery Yahoo UI Ruby on Rails CakePHP

13 Why these libraries?

14 Ajaxian Survey Prototype jquery Yahoo UI Dojo 20% 35% 21% 25%

15 Google Trends Prototype jquery Dojo Yahoo UI

16 The Libraries

17 Prototype

18 Prototype: Overview Started early 2005 by Sam Stephenson Incredibly popular, tied with Ruby on Rails popularity Development backed by 37 Signals

19 Prototype: Focus Improving the usability of the JavaScript language Big emphasis on adding in missing JavaScript features Clean structure, clean objects and classes

20 Prototype: Details Code quality is fantastic, great features All animations (and interactions) are in Scriptaculous Updated frequently

21 Prototype: Docs & Community Documentation: Good Official API documentation, some tutorials Community: Distributed Many bloggers love Prototype, little centralized discussion (23 posts/day).

22 Prototype: File Size & Popularity File Size: Moderate (99KB) Unfortunately, not easily compressible with Packer - they recommend GZIP. Popularity: Strong Apple, ESPN, CNN, Fox News

23 jquery

24 jquery: Overview Released January 2006 by John Resig Rapid rise in popularity Many developers across the globe

25 jquery: Focus Improving the interaction between JavaScript and HTML Finding elements then performing actions Highly-effective, short, code

26 jquery: Details Core features are limited to DOM, Events, Effects, Ajax Other features can be added in via plugins

27 jquery: Docs & Community Documentation: Complete Fully documented, complete API. Community: Vibrant 108+ Mailing List Posts/Day

28 jquery: File Size & Popularity File Size: Small About 20KB with everything. Popularity: Strong Users: IBM, Technorati, MSNBC, Digg Projects: Drupal, Wordpress

29 Yahoo! UI

30 YUI: Overview Released Feb 2006 by Yahoo! Maintained and financed internally Attempt to standardize internal JavaScript

31 YUI: Focus Exposing, and solving, common methodologies Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete)

32 YUI: Details Namespaces can become quite verbose. It is recommended that you copy namespaces to other variables. var dom = YAHOO.util.Dom; Closed development (Yahoo employees only, no subversion repository)

33 YUI: Docs & Community Documentation: Excellent Everything is thoroughly documented. Lots of explanations, plenty of demos. Community: Moderate Mailing List hovering around 36 posts/day.

34 YUI: File Size & Popularity File Size: 40KB (Compressed) Code is quite modular, you can remove unused code easily. Popularity: Possibly Waning Many good bloggers use to talk about it - have moved on.

35 Dojo

36 Dojo: Overview Started early 2005 by Alex Russell Large development community Lots of corporate backing (IBM, AOL) Big code base, tons of features

37 Dojo: Focus Building complete web applications A package heirarchy, e.g.: dojo.addclass(... ) Focus has transcended into widgets (Dijit) Huge number of features Today we re looking at Dojo 0.9

38 Dojo: Docs & Community Documentation: Rough. In the middle of a major documentation overhaul for 0.9. Community: Lively Active forum with frequent discussions.

39 Dojo: File Size & Popularity File Size: Large (100Kb compressed) It s highly recommended that you remove unused modules. Popularity: Substantial Backing from many corporate sponsors (IBM).

40 What should a library have?

41 Code Base Core Functionality DOM Events Ajax Animations User Interface Widgets

42 Development Good Architecture Open Licensing Wide Browser Support Small File Size

43 Project Development Team (Open, Funded) Code in SVN / Bug Tracker Good Unit Test Coverage

44 Documentation Full API Coverage Plenty of Tutorials Some Books Wide variety of Demos

45 Community Active Mailing List / Forum Support and Training Popularity

46 Code Base Core Functionality DOM Events Ajax Animations User Interface Widgets

47 Core Functionality Bare minimum needed to make a dynamic Ajax web site: DOM (Traversal and Manipulation) Events Ajax Animations

48 DOM Traversal Using CSS selectors to locate elements Modification Create/remove/modify elements Having a DOM builder is important

49 DOM Traversal Prototype: $$( table > tr ) jquery: $( div > p:nth-child(odd) ) Dojo: dojo.query( table tr:nth-child(even) ) Yahoo UI: No querying support

50 DOM Modification Prototype: Insertion.Bottom( list, <li>another item</li> ); jquery: $( #li ).append( <li>an item</li> ); Dojo and Yahoo UI have weak support - no DOM building capabilities, basic property modification

51 Events Support for simple event binding/removal Support for custom events is essential Prototype: Event.observe( button, click, function(){ }); alert( Thanks for the click! ); jquery: $( div ).click(function(){ }); alert( div clicked );

52 Events (cont.) Yahoo UI: YAHOO.util.Event.addEventListener( list, click, function(){ alert( List Clicked ); }); Dojo: dojo.connect(dojo.byid("mylink"), "click", function(){ alert( Link clicked ); });

53 Ajax Request and load remote documents Prototype: new Ajax.Request( test.html, { method: GET, oncomplete: function(res){ $( results ).innerhtml = res.responsetext; } }); jquery: $( #results ).load( test.html );

54 Ajax (cont.) Yahoo UI YAHOO.util.Connect.asyncRequest( 'GET', test.html, function(data){ YAHOO.util.Dom.id( results ).innerhtml = data; } ); Dojo dojo.io.bind({ url: "test.html", method: "get", mimetype: "text/html", load: function(type, data) { dojo.byid( results ).innerhtml = data; } });

55 Animations Simple animations (hide/show/toggle) Provide elegant transitions No animations in Prototype Core (see Scriptaculous, instead) jquery: $( #menu ).slidedown( slow );

56 Animations (cont.) Yahoo UI: new YAHOO.util.Anim( list, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut ); Dojo: dojo.fadeout({ node: dojo.byid( list ), duration: 500 });

57 Core Feature Summary DOM Events Anim. Ajax Prototype X X - X jquery X X X X Yahoo UI / X X X Dojo / X X X

58 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

59 User Interface Packages Only looking at officially-supported code: Prototype has Scriptaculous jquery has jquery UI Dojo has Dijit Included in Yahoo UI

60 Drag & Drop Drag an item from one location and drop in an other Supported by all libraries

61 Tree A navigable hierarchy (like a folder/file explorer) In Dojo and Yahoo UI

62 Grid An advanced table (resizable, editable, easily navigable) In Dojo and Yahoo UI

63 Modal Dialog Display confined content (usually drag & droppable) and confirmation dialogs In Dojo, Yahoo UI, and jquery

64 Tabbed Pane Multiple panes of content navigable by a series of tabs In Dojo, Yahoo UI, and jquery

65 Menu / Toolbar A list of navigable items (with sub-menus) In Dojo and Yahoo UI

66 Datepicker An input for selecting a date (or a range of dates) In Dojo, Yahoo UI, and jquery

67 Slider A draggable input for entering a general, numerical, value In all libraries

68 Tons More! Color Picker (Dojo, YUI) Layout (Dojo, YUI) Auto Complete (Dojo, Proto, YUI) Selectables (Proto, jquery) Accordion (Dojo, jquery) WYSIWYG (Dojo, YUI)

69 Themeing A consistent look-and-feel for widgets jquery, Yahoo UI, and Dojo provide themeing capabilities jquery s and Yahoo UI s are documented

70 Accessibility Taking in to consideration points from ARIA (Accessible Rich Internet Applications) Dojo is taking a solid lead, here

71 Development Good Architecture Open Licensing Wide Browser Support Small File Size

72 Architecture Bottom Up (Prototype, jquery) vs. Top Down (Dojo, Yahoo UI) jquery, Dojo, and Yahoo UI all use a single namespace jquery is extensible with plugins

73 Licensing All use liberal licenses ( Keep my name on the file, don t sue me. ) MIT: Prototype, jquery BSD: Yahoo UI, Dojo

74 Browser Support Everyone supports: IE 6+, Firefox 2+, Safari 2+, Opera 9+ Except: Prototype doesn t support Opera Dojo is dropping support for Safari 2

75 File Size Serving your JavaScript minified + Gzipped Optimal level of compression and speed Core file size: Prototype jquery Yahoo UI Dojo

76 Project Development Team (Open, Funded) Code in SVN / Bug Tracker Good Unit Test Coverage

77 Development Team Prototype, jquery, 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

78 SVN / Bug Tracker Prototype, jquery, and Dojo all have code in a public SVN repositor Yahoo UI s development is private and is limited to Yahoo employees All libraries have a public bug tracker

79 Unit Tests All libraries have some automated unit tests jquery, Yahoo UI, and Dojo all have public unit tests jquery and Dojo have tests that can run in Rhino

80 Documentation Full API Coverage Plenty of Tutorials Some Books Wide variety of Demos

81 API Documentation Prototype, jquery, and Yahoo UI all have full coverage jquery provides runnable examples with each API item Dojo s coverage is spotty - work in progress

82 Tutorials All libraries provide some tutorials jquery and Yahoo UI have screencasts Prototype: 6 jquery: 68 Yahoo UI: X Dojo: X

83 Books Prototype: Prototype and Scriptaculous in Action Prototype and Scriptaculous (Pragmatic) jquery: Learning jquery (Packt) jquery Reference Guide (Packt) Yahoo UI: None Dojo: A short online book

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 Dojo provides demo applications for their widgets

85 Community Active Mailing List / Forum Support and Training Popularity

86 Mailing List / Forum Prototype, jquery, and Yahoo UI have mailing lists Prototype: 23 posts/day jquery: 108 posts/day Yahoo UI: 36 posts/day Dojo has an active forum

87 Support and Training Dojo provides paid support and training (via Sitepen)

88 Popularity Who uses what: Prototype: Apple, ESPN, CNN, Fox News jquery: Google, Amazon, Digg, NBC, Intel Yahoo: Yahoo, LinkedIn, Target, Slashdot Dojo: IBM, AOL

89 More Information Prototype: jquery: Yahoo UI: Dojo:

90 Ajax Experience Presentations Presentations on: Dojo (2) Prototype (2) & Scriptaculous (1) jquery (3) Go to one that sounds interesting and enjoy!