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

Size: px

Start display at page:

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

Marylou Stewart
6 years ago
Views:

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

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

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

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

12 Open Source Libraries Task Specific Browser Only Scriptaculous moo.fx Open Rico Client/Server AjaxCFC Qcodo General Purpose Prototype jquery Yahoo UI Dojo 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 Looking at Prototype 1.6.0

21 jquery

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

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

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

25 Yahoo! UI

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

27 YUI: Focus Exposing, and solving, common methodologies Looking for common idioms (Drag-and- Drop, Calendar, Auto-Complete) Looking at Yahoo UI 2.3.1

28 Dojo

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

30 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

31 What should a library have?

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

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

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

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

36 Community Active Mailing List / Forum Support and Training Popularity

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

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

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

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

41 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

42 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 );

43 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 ); });

44 Custom Events $( #list ).bind( drag, function(){ $(this).addclass( dragged ); }); $( #test ).trigger( drag );

45 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 );

46 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; } });

47 Ajax (cont.) jquery is only one capable of doing DOM traversing over XML jquery.get( test.xml, function(xml){ $( user, xml).each(function(){ }); }); $( <li/> ).text( $(this).text() ).appendto( #userlist );

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

49 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 });

50 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

51 User Interface Widgets ejohn.org <-- slides 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

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

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

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

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

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

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

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

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

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

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

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

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

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

65 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

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

67 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

68 File Size Serving your JavaScript minified + Gzipped Optimal level of compression and speed Core file size (in KB): Prototype jquery Yahoo UI Dojo

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

70 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

71 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

72 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

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

74 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

75 Tutorials All libraries provide some tutorials jquery and Yahoo UI have screencasts Prototype: 6 jquery: 68 (English) Yahoo UI: 32 Dojo: 5

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

77 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

78 Community Active Mailing List / Forum Support and Training Popularity

79 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

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

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

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

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

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3

Introduction. Part I: jquery API 1. Chapter 1: Introduction to jquery 3 Introduction xix Part I: jquery API 1 Chapter 1: Introduction to jquery 3 What Does jquery Do for Me? 4 Who Develops jquery? 5 Obtaining jquery 5 Installing jquery 5 Programming Conventions 8 XHTML and