Presentation Ajax Library Smack down: Prototype vs. jQuery - Part 1

Ajax is everywhere, from the local newspaper to sites that the CEO surfs. Contrary to popular belief, it isn't rocket science, especially with the right library. In this talk, we'll explore the popular Prototype and jQuery libraries showing how they can simplify typical Ajax techniques and make JavaScript easier to work with. We'll look at how each library wraps the XHR object, smoothes out events, and how they each make use of the humble $. While there are a plethora of excellent choices in the Ajax library space, jQuery is fast becoming one of the most popular. In this talk, we'll see why. In addition to it's outstanding support for CSS selectors, dirt simple DOM manipulation, event handling and animations, jQuery also supports a rich ecosystem of plugins that provide an abundance of top notch widgets. Using various examples, this talk will help you understand what jQuery can do so you can see if it's right for your next project.

Speakers


PDF: slides.pdf

Slides

Welcome to Devoxx 2010!

Prototype vs. jQuery

Prototype vs. jQuery Nathaniel T. Schutta

• Nathaniel T. Schutta

• Nathaniel T. Schutta Frameworks Who am I? http://www.ntschutta.com/jat/ • @ntschutta • Foundations of Ajax & Pro Ajax and Java • UI guy • Author, speaker, teacher • More than a couple of web apps

The Plan

• Why a library? • Pros and cons. • Ajax made easy. • CSS selectors. • Events. • Animations and effects. The Plan

Use a library.

Use a library.

Not using one?

Not using one?

Probably doing it wrong.

Probably doing it wrong.

Ajax isn’t rocket surgery.

Ajax isn’t rocket surgery.

But...doesn’t mean we should go it alone.

But...doesn’t mean we should go it alone.

Several high quality libraries to pick from.

Several high quality libraries to pick from.

Paradox of choice.

Paradox of choice.

Most server side agnostic.

Most server side agnostic.

Things have improved since the 90s!

Things have improved since the 90s!

We still have browser issues to deal with.

We still have browser issues to deal with.

IE 6.

IE 6.

IE 6...on the way out?

IE 6...on the way out?

Image

http://www.w3schools.com/ browsers/browsers_stats.asp http://en.wikipedia.org/wiki/ Usage_share_of_web_browsers

SharePoint 2010 - no IE 6.

SharePoint 2010 - no IE 6. http://blogs.msdn.com/sharepoint/archive/2009/05/07/announcingsharepoint-server-2010-preliminary-system-requirements.aspx

Google Apps...sorry IE 6.

Google Apps...sorry IE 6. http://googledocs.blogspot.com/2010/01/web-browsersupport-for-docs-and-sites.html

Libraries abstract some of that away.

Libraries abstract some of that away.

VM as it were.

VM as it were.

Libraries = leverage.

Libraries = leverage.

Most have:

Most have:

XHR wrapper.

XHR wrapper.

CSS selectors.

CSS selectors.

Event handling.

Event handling.

Widgets, effects, animations.

Widgets, effects, animations.

JavaScript utilities.

JavaScript utilities.

How do you choose?

How do you choose?

Many work well together.

Many work well together.

Ask yourself...

Ask yourself...

What do you want?

What do you want?

Widgets? Complete environment? Utilities?

Widgets? Complete environment? Utilities?

Can you read the code?

Can you read the code?

May need to from time to time.

May need to from time to time.

How’s the docu?

How’s the docu?

What does Google return?

What does Google return?

What is the community like?

What is the community like?

When was the last update?

When was the last update?

Can you get help?

Can you get help?

Have to play with them.

Have to play with them.

Libraries have “flavors.”

Libraries have “flavors.”

Do you like the library’s style?

Do you like the library’s style?

Does it solve YOUR problems?

Does it solve YOUR problems?

Prototype vs. jQuery.

Prototype vs. jQuery.

Both are small.

Both are small.

Readable code.

Readable code.

Similar features: XHR, CSS selectors, etc.

Similar features: XHR, CSS selectors, etc.

Excellent documentation.

Excellent documentation.

Active mailing lists.

Active mailing lists.

Widely used.

Widely used.

Fundamentally different philosophies.

Fundamentally different philosophies.

Prototype is heavily influenced by Ruby.

Prototype is heavily influenced by Ruby.

jQuery - bit of a reaction to Prototype.

jQuery - bit of a reaction to Prototype.

Each uses $ differently!

Each uses $ differently!

Each has influenced the other though...

Each has influenced the other though...

Better, each has improved the other.

Better, each has improved the other.

pros and cons

Adds useful functions to core elements.

Adds useful functions to core elements.

Widgets and effects via script.aculo.us.

Widgets and effects via script.aculo.us.

Ruby flavored JS.

Ruby flavored JS.

Widely used in a variety of projects.

Widely used in a variety of projects.

jQuery’s pros:

jQuery’s pros:

Focussed on HTML elements.

Focussed on HTML elements.

Doesn’t pollute global namespace.

Doesn’t pollute global namespace.

DOM manipulation a snap.

DOM manipulation a snap.

Extensive plugins.

Extensive plugins.

Widely used in a variety of projects.

Widely used in a variety of projects.

Prototype’s cons:

Prototype’s cons:

Where’s the minified version?

Where’s the minified version?

Performance not always a priority.

Performance not always a priority.

Pollutes the global namespace.

Pollutes the global namespace.

jQuery’s cons:

jQuery’s cons:

Parameter ordering in APIs not always intuitive.

Parameter ordering in APIs not always intuitive.

Plugins required for a variety of functionality.

Plugins required for a variety of functionality.

Some functions reassign ‘this.’

Some functions reassign ‘this.’

This is a bit nit-picky!

This is a bit nit-picky!

Both quite good...

Both quite good...

Ajax made easier.

Ajax made easier.

XHR isn’t complicated.

XHR isn’t complicated.

But abstractions help.

But abstractions help.

ActiveX vs. JS native...

ActiveX vs. JS native...

All the wrappers are pretty similar.

All the wrappers are pretty similar.

URI to call, parameters, HTTP method, callback.

URI to call, parameters, HTTP method, callback.

Prototype: Ajax.Request.

Prototype: Ajax.Request.

Ajax.Request(url, [options])

Ajax.Request(url, [options])

Second arg is a hash of configuration options.

Second arg is a hash of configuration options.

HTTP method, parameters, content type, callbacks.

HTTP method, parameters, content type, callbacks.

Code

new Ajax.Request('/fooApp/validate', { method: 'get', parameters: {zip: $F('zip') city: $F('city'), zip: $F('zip'), state: $F('state')}, onComplete: function(request) { $('messages').update(request.responseText); } });

$F - convenience method, retrieves value.

$F - convenience method, retrieves value.

jQuery’s approach.

jQuery’s approach.

Variety of methods.

Variety of methods.

$.ajax(options)

$.ajax(options)

Also more specific calls.

Also more specific calls.

$.getJSON(url, [data], [callback])

$.getJSON(url, [data], [callback])

Code

$.get("/DesigningForAjax/validate", { zip: $("#zip").val() $("#zip").val(), city: $("#city").val(), state: $("#state").val() }, function(message) { $("#messages").html(message); });

Very similar!

Very similar!

JavaScript lacks namespaces - thus $.

JavaScript lacks namespaces - thus $.

Which is better?

Which is better?

CSS selectors.

CSS selectors.

CSS selectors are very powerful.

CSS selectors are very powerful.

Browser support can be lacking...

Browser support can be lacking...

Libraries come in and smooth things out!

Libraries come in and smooth things out!

Prototype gives us $$.

Prototype gives us $$.

Want everything with a given style?

Want everything with a given style?

Code

$$('.header').each(function(el) {el.observe("click", toggleSection)});

That’s some terse code!

That’s some terse code! http://steve-yegge.blogspot.com/ 2008/02/portrait-of-n00b.html

$$ returns an array.

$$ returns an array.

Prototype adds an each method to arrays.

Prototype adds an each method to arrays.

Observe part of events...more in a minute!

Observe part of events...more in a minute!

When someone clicks a header element...

When someone clicks a header element...

jQuery excels at CSS selectors.

jQuery excels at CSS selectors.

Top notch support.

Top notch support.

Outstanding performance.

Outstanding performance.

Browsers do the heavy lifting when possible.

Browsers do the heavy lifting when possible.

Code

$(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });

Put toggleSelect in the call in this example.

Put toggleSelect in the call in this example.

And we add a nice effect!

And we add a nice effect!

Little bit

Which is better?

Which is better?

Event handling.

Event handling.

Coding to events gives us cleaner markup.

Coding to events gives us cleaner markup.

But browsers get in the way...again.

But browsers get in the way...again.

Unobtrusive JavaScript.

Unobtrusive JavaScript. http://www.alistapart.com/articles/behavioralseparation

Library designers help us!

Library designers help us!

Prototype gives us observe.

Prototype gives us observe.

Code

$$('.header').each(function(el) {el.observe("click", toggleSection)});

jQuery includes a variety of APIs.

jQuery includes a variety of APIs.

Including some great helper methods.

Including some great helper methods.

Code

$(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });

Either way..

Either way, we’ve attached a handler to the click event.

Which is better?

Which is better?

Animations and effects.

Animations and effects.

Neither stands alone.

Neither stands alone.

Extensive add ons!

Extensive add ons!

Want animations and widgets?

Want animations and widgets?

script.aculo.us builds on top of Prototype.

script.aculo.us builds on top of Prototype.

Appear, fade, puff, pulse, fold, grow...

Appear, fade, puff, pulse, fold, grow...

Drag and drop, controls.

Drag and drop, controls.

Very useful stuff.

Very useful stuff.

Let’s add an effect!

Let’s add an effect!

Code

$('messages').update(request.responseText).highlight({duration: 1.0});

Notice the chaining?

Notice the chaining?

jQuery relies on plugins.

jQuery relies on plugins.

jQuery UI.

jQuery UI.

Gives us widgets, effects, draggable etc.

Gives us widgets, effects, draggable etc.

Code

$(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });

Very easy to add a little flash.

Very easy to add a little flash.

Easy to go too far.

Easy to go too far.

Seasoning, not the entree.

Seasoning, not the entree.

Blink tag anyone?

Blink tag anyone?

Used right, adds that extra bit of polish.

Used right, adds that extra bit of polish.

Help!

Help!

Both libraries have excellent online docu.

Both libraries have excellent online docu.

Code

http://api.prototypejs.org/ http://docs.jquery.com/Main_Page

Each has books.

Each has books.

Google friendly ;)

Google friendly ;)

Code is well written.

Code is well written.

Easy to read.

Easy to read.

Mailing lists are vibrant.

Mailing lists are vibrant.

Links

http://www.prototypejs.org/discuss http://docs.jquery.com/Discussion

Which one is better?

Which one is better?

It depends!

It depends!

Honestly, both are great.

Honestly, both are great.

Can’t go wrong either way.

Can’t go wrong either way.

Image

Passion on both sides...

Passion on both sides...

Pros and cons.

Pros and cons. http://blog.thinkrelevance.com/2009/1/12/ why-i-still-prefer-prototype-to-jquery

Play with them.

Play with them.

Which one solves your problems?

Which one solves your problems?

Don’t like either?

Don’t like either?

Luckily, you’ve got plenty of choices!

Luckily, you’ve got plenty of choices!

Questions?!?

Questions?!?