Want to dive even deeper?

Take the course jQuery UI Development by Ben Fhala and become an expert!
jQuery UI Development
by Ben Fhala

Check it out!
You're watching a preview of this video, click the button on the left to puchase the full version from Devoxx'09.

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.

Published on
  • 1.237
  • 83
  • 0
  • 6
  • 2
  • Prototype vs. jQuery 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
  • • Why a library? • Pros and cons. • Ajax made easy. • CSS selectors. • Events. • Animations and effects. The Plan
  • Use a library.
  • Not using one?
  • Probably doing it wrong.
  • Ajax isn’t rocket surgery.
  • But...doesn’t mean we should go it alone.
  • Several high quality libraries to pick from.
  • Paradox of choice.
  • Most server side agnostic.
  • Things have improved since the 90s!
  • We still have browser issues to deal with.
  • <cough>IE 6.</cough>
  • IE 6...on the way out?
  • http://www.w3schools.com/ browsers/browsers_stats.asp http://en.wikipedia.org/wiki/ Usage_share_of_web_browsers
  • 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. http://googledocs.blogspot.com/2010/01/web-browsersupport-for-docs-and-sites.html
  • Libraries abstract some of that away.
  • VM as it were.
  • Libraries = leverage.
  • Most have:
  • XHR wrapper.
  • CSS selectors.
  • Event handling.
  • Widgets, effects, animations.
  • JavaScript utilities.
  • How do you choose?
  • Many work well together.
  • Ask yourself...
  • What do you want?
  • Widgets? Complete environment? Utilities?
  • Can you read the code?
  • May need to from time to time.
  • How’s the docu?
  • What does Google return?
  • What is the community like?
  • When was the last update?
  • Can you get help?
  • Have to play with them.
  • Libraries have “flavors.”
  • Do you like the library’s style?
  • Does it solve YOUR problems?
  • Prototype vs. jQuery.
  • Both are small.
  • Readable code.
  • Similar features: XHR, CSS selectors, etc.
  • Excellent documentation.
  • Active mailing lists.
  • Widely used.
  • Fundamentally different philosophies.
  • Prototype is heavily influenced by Ruby.
  • jQuery - bit of a reaction to Prototype.
  • Each uses $ differently!
  • Each has influenced the other though...
  • Better, each has improved the other.
  • Adds useful functions to core elements.
  • Widgets and effects via script.aculo.us.
  • Ruby flavored JS.
  • Widely used in a variety of projects.
  • jQuery’s pros:
  • Focussed on HTML elements.
  • Doesn’t pollute global namespace.
  • DOM manipulation a snap.
  • Extensive plugins.
  • Widely used in a variety of projects.
  • Prototype’s cons:
  • Where’s the minified version?
  • Performance not always a priority.
  • Pollutes the global namespace.
  • jQuery’s cons:
  • Parameter ordering in APIs not always intuitive.
  • Plugins required for a variety of functionality.
  • Some functions reassign ‘this.’
  • This is a bit nit-picky!
  • Both quite good...
  • Ajax made easier.
  • XHR isn’t complicated.
  • But abstractions help.
  • ActiveX vs. JS native...
  • All the wrappers are pretty similar.
  • URI to call, parameters, HTTP method, callback.
  • Prototype: Ajax.Request.
  • Ajax.Request(url, [options])
  • Second arg is a hash of configuration options.
  • HTTP method, parameters, content type, callbacks.
  • 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.
  • jQuery’s approach.
  • Variety of methods.
  • $.ajax(options)
  • Also more specific calls.
  • $.getJSON(url, [data], [callback])
  • $.get("/DesigningForAjax/validate", { zip: $("#zip").val() $("#zip").val(), city: $("#city").val(), state: $("#state").val() }, function(message) { $("#messages").html(message); });
  • Very similar!
  • JavaScript lacks namespaces - thus $.
  • Which is better?
  • CSS selectors.
  • CSS selectors are very powerful.
  • Browser support can be lacking...
  • Libraries come in and smooth things out!
  • Prototype gives us $$.
  • Want everything with a given style?
  • $$('.header').each(function(el) {el.observe("click", toggleSection)});
  • That’s some terse code! http://steve-yegge.blogspot.com/ 2008/02/portrait-of-n00b.html
  • $$ returns an array.
  • Prototype adds an each method to arrays.
  • Observe part of events...more in a minute!
  • When someone clicks a header element...
  • jQuery excels at CSS selectors.
  • Top notch support.
  • Outstanding performance.
  • Browsers do the heavy lifting when possible.
  • $(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });
  • Put toggleSelect in the call in this example.
  • And we add a nice effect!
  • Which is better?
  • Event handling.
  • Coding to events gives us cleaner markup.
  • But browsers get in the way...again.
  • Unobtrusive JavaScript. http://www.alistapart.com/articles/behavioralseparation
  • Library designers help us!
  • Prototype gives us observe.
  • $$('.header').each(function(el) {el.observe("click", toggleSection)});
  • jQuery includes a variety of APIs.
  • Including some great helper methods.
  • $(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });
  • Either way, we’ve attached a handler to the click event.
  • Which is better?
  • Animations and effects.
  • Neither stands alone.
  • Extensive add ons!
  • Want animations and widgets?
  • script.aculo.us builds on top of Prototype.
  • Appear, fade, puff, pulse, fold, grow...
  • Drag and drop, controls.
  • Very useful stuff.
  • Let’s add an effect!
  • $('messages').update(request.responseText).highlight({duration: 1.0});
  • Notice the chaining?
  • jQuery relies on plugins.
  • jQuery UI.
  • Gives us widgets, effects, draggable etc.
  • $(function(){ $('.header').click(function() { $(this).next().toggle("blind", { direction: "vertical" }, 500); }); });
  • Very easy to add a little flash.
  • Easy to go too far.
  • Seasoning, not the entree.
  • Blink tag anyone?
  • Used right, adds that extra bit of polish.
  • Help!
  • Both libraries have excellent online docu.
  • http://api.prototypejs.org/ http://docs.jquery.com/Main_Page
  • Each has books.
  • Google friendly ;)
  • Code is well written.
  • Easy to read.
  • Mailing lists are vibrant.
  • http://www.prototypejs.org/discuss http://docs.jquery.com/Discussion
  • Which one is better?
  • It depends!
  • Honestly, both are great.
  • Can’t go wrong either way.
  • Passion on both sides...
  • Pros and cons. http://blog.thinkrelevance.com/2009/1/12/ why-i-still-prefer-prototype-to-jquery
  • Play with them.
  • Which one solves your problems?
  • Don’t like either?
  • Luckily, you’ve got plenty of choices!
  • Questions?!?

Comments

Be the first one to add a comment

Thumbnail for: Findings Revealed: 2015 State of the Software Supply Chain

Findings Revealed: 2015 State of the Software Supply Chain

WaiMan Yau

free
Thumbnail for: Web Application Security Reloaded for the HTML5 era

Web Application Security Reloaded for the HTML5 era

Carlo Bonamico

free
Thumbnail for: Gimme Caching - The Distributed JCache(JSR107) Way

Gimme Caching - The Distributed JCache(JSR107) Way

David Brimley

free
Thumbnail for: How to lower the power consumption of your app, without affecting performance

How to lower the power consumption of your app, without affecting performance

Rick Schwartz

free
Thumbnail for: Never mind the bollocks: here's the Linux containers

Never mind the bollocks: here's the Linux containers

Patrick Chanezon

free
Thumbnail for: NOW TV and Linear Streaming: The unpredictable scalability challenge

NOW TV and Linear Streaming: The unpredictable scalability challenge

Tom Maule

free
Thumbnail for: The end of server management : hosting has to become a commodity

The end of server management : hosting has to become a commodity

Quentin ADAM

free
Thumbnail for: The Future of Personal Robotics

The Future of Personal Robotics

Nicolas Rigaud

free
Thumbnail for: Performance Tuning, Top 10 Your Doing it Wrong!

Performance Tuning, Top 10 Your Doing it Wrong!

Kirk Pepperdine

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: Pushing The Limits With Java Enterprise Cloud Development

Pushing The Limits With Java Enterprise Cloud Development

Simon Ritter

free
Thumbnail for: JCP, Adopt-a-JSR & You

JCP, Adopt-a-JSR & You

Heather VanCura

free
Thumbnail for: 3 Keys to Rapid Deployment Success

3 Keys to Rapid Deployment Success

Sven Erik Knop

free
Thumbnail for: Bringing IBM Watson to the Cloud

Bringing IBM Watson to the Cloud

Dale Lane

free
Thumbnail for: The Smartwatch Revolution begins: Developing for Android Wear

The Smartwatch Revolution begins: Developing for Android Wear

Pratik Patel

free
Thumbnail for: The Google Cloud Plaform - Beyond simple use cases

The Google Cloud Plaform - Beyond simple use cases

David Gageot

free
Thumbnail for: The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

The Cloud, an Arduino, an Application, Server, and me - Adventures In and Out of the Cloud

Holly Cummins

free
Thumbnail for: TestOps - Chasing the White Whale

TestOps - Chasing the White Whale

Ioana Serban

free
Thumbnail for: Experimenting with ServiceWorker

Experimenting with ServiceWorker

Sandro Paganotti

free
Thumbnail for: Accessibility and how to get the most from your screenreader

Accessibility and how to get the most from your screenreader

Edd Sowden

free
Thumbnail for: What Were You Doing In 1995? A 20 Year Retrospective of Java

What Were You Doing In 1995? A 20 Year Retrospective of Java

Simon Ritter , Steve Elliott

free
Thumbnail for: SQL’s back: querying document databases the old fashioned way

SQL’s back: querying document databases the old fashioned way

Matthew Revell

free
Thumbnail for: Decoding the air around you with Java and $7 hardware

Decoding the air around you with Java and $7 hardware

Bert Jan Schrijver

free
Thumbnail for: "Catch me if you can" - Java on wearables

"Catch me if you can" - Java on wearables

Gerrit Grunwald

free
Thumbnail for: Miniboxing: Fast Generics for Primitive Types

Miniboxing: Fast Generics for Primitive Types

Vlad Ureche

free
Thumbnail for: goto java;

goto java;

Martin Skarsaune

free
Thumbnail for: Java 8 in Anger

Java 8 in Anger

Trisha Gee

free
Thumbnail for: Not my department?! How our privacy is broken and what you can do about it.

Not my department?! How our privacy is broken and what you can do about it.

Anna Biselli

free
Thumbnail for: The Hidden Gems of PDF

The Hidden Gems of PDF

Michaël Demey

free
Thumbnail for: Design Patterns in the 21st Century

Design Patterns in the 21st Century

Samir Talwar

free
Thumbnail for: Keynote: The Extraordinary Team of Developers

Keynote: The Extraordinary Team of Developers

Trisha Gee , Daniel Bryant

free
Thumbnail for: Java Generics: Past, Present and Future

Java Generics: Past, Present and Future

Richard Warburton , Raoul-Gabriel Urma

free
Thumbnail for: Building securely with agile

Building securely with agile

Michael Brunton-spall

free
Thumbnail for: STOP BREAKING MY STUFF

STOP BREAKING MY STUFF

Katharine Fitzpatrick

free
Thumbnail for: All Change! How the new economics of Cloud will make you think differently about Java

All Change! How the new economics of Cloud will make you think differently about Java

Steve Poole

free
Thumbnail for: Powering real-time web apps with Hazelcast

Powering real-time web apps with Hazelcast

Andrejs Jermakovics

free
Thumbnail for: What is your build telling you about your application structure?

What is your build telling you about your application structure?

Abraham Marin-Perez

free
Thumbnail for: Practical Challenges of moving from CI to CD using Maven

Practical Challenges of moving from CI to CD using Maven

Jatin Bhadra

free
Thumbnail for: Destination: Cloud. Deploying Applications To The Cloud With Docker

Destination: Cloud. Deploying Applications To The Cloud With Docker

Ryan Baxter

free
Thumbnail for: Finally, Security API JSR 375

Finally, Security API JSR 375

Alex Kosowski

free
Thumbnail for: Level up your Android Build

Level up your Android Build

Volker Leck

free
Thumbnail for: Practical Continuous Deployment

Practical Continuous Deployment

Steve Smith

free
Thumbnail for: The Seven Deadly Sins of Microservices

The Seven Deadly Sins of Microservices

Daniel Bryant

free
Thumbnail for: Making Events for Local Dev Communities

Making Events for Local Dev Communities

Celestino Bellone , Federico Yankelevich

free
Thumbnail for: Nuts and Bolts of WebSocket

Nuts and Bolts of WebSocket

Arun Gupta

free
Thumbnail for: Developing iOS applications with Java and Eclipse

Developing iOS applications with Java and Eclipse

Grant Ronald

free
Thumbnail for: Welcome Keynote

Welcome Keynote

Mark Hazell

free
Thumbnail for: Refactor your Java EE application using Microservices and Containers

Refactor your Java EE application using Microservices and Containers

Arun Gupta

free
Thumbnail for: Java EE 8, a snapshot overview

Java EE 8, a snapshot overview

David Delabassee

free
Thumbnail for: The Dark arts of building your own framework

The Dark arts of building your own framework

Andrey Glaschenko , Konstantin Krivopustov

free
Thumbnail for: Programming at any Scale

Programming at any Scale

Andrew Harmel-Law

free
Thumbnail for: Java is dead, long live Ceylon, Kotlin,…

Java is dead, long live Ceylon, Kotlin,…

Russel Winder

free
Thumbnail for: Android Testing: A New Hope

Android Testing: A New Hope

Zan Markan , Nicholas Jackson

free
Thumbnail for: Java EE changes design pattern implementation

Java EE changes design pattern implementation

Alex Theedom

free
Thumbnail for: Building Cloud Powered Android Apps with Azure

Building Cloud Powered Android Apps with Azure

Chris Risner

free
Thumbnail for: From 0 to 60 million users: Scaling for speed and high availability

From 0 to 60 million users: Scaling for speed and high availability

Aviran Mordo

free
Thumbnail for: HTTP/2 comes to Java. What Servlet 4.0 means to You

HTTP/2 comes to Java. What Servlet 4.0 means to You

David Delabassee

free
Thumbnail for: 50 minutes to develop a full Java EE application with Forge? Is that all?

50 minutes to develop a full Java EE application with Forge? Is that all?

Antonio Goncalves

free
Thumbnail for: How to Rock your Web Apps with Spring and Vaadin

How to Rock your Web Apps with Spring and Vaadin

Sami Ekblad

free
Thumbnail for: In-Memory Computing - Distributed Systems

In-Memory Computing - Distributed Systems

Christoph Engelbert

free
Thumbnail for: Comparing different concurrency models on the JVM

Comparing different concurrency models on the JVM

Mario Fusco

free
Thumbnail for: 5 reasons why developers should pay attention to robotics

5 reasons why developers should pay attention to robotics

Nicolas Rigaud

free
Thumbnail for: Ceylon from here to infinity: the big picture and what's coming

Ceylon from here to infinity: the big picture and what's coming

Stephane Epardaud

free
Thumbnail for: Is your profiler speaking the same language as you?

Is your profiler speaking the same language as you?

Simon Maple

free
Thumbnail for: Java 9: Make Way for Modules!

Java 9: Make Way for Modules!

Mark Reinhold

free
Thumbnail for: Akka Streams with Scala and Java

Akka Streams with Scala and Java

Jamie Allen

free
Thumbnail for: The 10 Golden Rules of Mobile UX

The 10 Golden Rules of Mobile UX

Emilia Ciardi

free
Thumbnail for: Ludicrously Fast Builds with Buck

Ludicrously Fast Builds with Buck

Simon Stewart

free
Thumbnail for: Making Enterprise Java Architecture Sustainable

Making Enterprise Java Architecture Sustainable

Markus Eisele

free
Thumbnail for: Combining R with Java for Data Analysis

Combining R with Java for Data Analysis

Ryan Cuprak , Elsa Cuprak

free
Thumbnail for: Diversity Rules!

Diversity Rules!

Amali de Alwis

free
Thumbnail for: Flyway - Database Migration made easy

Flyway - Database Migration made easy

Axel Fontaine

free
Thumbnail for: Microservices Made Easy with Spring Cloud and Netflix OSS

Microservices Made Easy with Spring Cloud and Netflix OSS

David Syer

free
Thumbnail for: CDI 2.0: what is in the work?

CDI 2.0: what is in the work?

Antoine Sabot-Durand , José Paumard

free
Thumbnail for: WildFly 9

WildFly 9

Kabir Khan

free
Thumbnail for: Functional patterns for scala beginners

Functional patterns for scala beginners

Clément Delafargue

free
Thumbnail for: Devoxx4Kids

Devoxx4Kids

Dan Hardiker

free
Thumbnail for: Let’s Get to the Rapids: Java 8 Stream Perfomance

Let’s Get to the Rapids: Java 8 Stream Perfomance

Maurice Naftalin

free
Thumbnail for: Level Up your Dev Skills with Static Analysis

Level Up your Dev Skills with Static Analysis

David Lindsay

free
Thumbnail for: From Requirements to Deployment: Implementing a Microservice in Java using BDD and TDD

From Requirements to Deployment: Implementing a Microservice in Java using BDD and TDD

John Ferguson Smart

free
Thumbnail for: Predicting the Future with Machine Learning

Predicting the Future with Machine Learning

Amy Nicholson

free
Thumbnail for: Software Architecture as Code

Software Architecture as Code

Simon Brown

free
Thumbnail for: Top 10 Real-life WebSocket Use Cases and Experiences

Top 10 Real-life WebSocket Use Cases and Experiences

Richard Cullen

free
Thumbnail for: The First IoT JSR: Units of Measurement

The First IoT JSR: Units of Measurement

Leonardo Lima , Chris Senior

free
Thumbnail for: One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

One Framework, No Dependencies: Using Frameworks to Avoid Common Pitfalls of App Development

Lee Boonstra

free
Thumbnail for: Building the UKs biggest IoT network

Building the UKs biggest IoT network

Romanas Sonkinas

free
Thumbnail for: Never Mind the Devoxx

Never Mind the Devoxx

David Blevins

free
Thumbnail for: Five Ways to Not Suck at Being a Java Freelancer

Five Ways to Not Suck at Being a Java Freelancer

Roberto Cortez

free
Thumbnail for: Java EE Game Changers

Java EE Game Changers

David Blevins

free
Thumbnail for: Express yourself with Java 8

Express yourself with Java 8

Benjamin Weber

free