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.225
  • 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: Busy Java Developer’s Guide to Three REST API Frameworks

Busy Java Developer’s Guide to Three REST API Frameworks

Ted Neward

subscription
Thumbnail for: Corporate startup and Scala

Corporate startup and Scala

Filip Rogaczewski

subscription
Thumbnail for: Co było pierwsze: kod czy architektura?

Co było pierwsze: kod czy architektura?

Slawomir Sobotka

subscription
Thumbnail for: Preventing Analytics and Ads from polluting your codebase (no slides)

Preventing Analytics and Ads from polluting your codebase (no slides)

Savvas Dalkitsis

subscription
Thumbnail for: From Docker To Kubernetes: A Developer's Guide To Containers

From Docker To Kubernetes: A Developer's Guide To Containers

Marek Grabowski

subscription
Thumbnail for: Ścisły przewodnik po aspektach miękkich - część II: Jesteś ekspertem i co dalej?

Ścisły przewodnik po aspektach miękkich - część II: Jesteś ekspertem i co dalej?

Slawomir Sobotka

free
Thumbnail for: Designing software with security in mind?

Designing software with security in mind?

Daniel Deogun

subscription
Thumbnail for: OAuth2 for native apps and beyond

OAuth2 for native apps and beyond

Erik Jan de Wit

subscription
Thumbnail for: Using JavaScript/HTML5 Rich Clients with Java EE 7

Using JavaScript/HTML5 Rich Clients with Java EE 7

Reza Rahman

subscription
Thumbnail for: Why I love Logstash and you should too

Why I love Logstash and you should too

João Duarte

subscription
Thumbnail for: Java Bytecode Explained

Java Bytecode Explained

OLEG ŠELAJEV

subscription
Thumbnail for: Agile Project Management Anti-Patterns

Agile Project Management Anti-Patterns

Kasia Mrowca

subscription
Thumbnail for: Applications secure by default

Applications secure by default

Sławomir Jasek

subscription
Thumbnail for: From spaghetti with no src/test to green CI, good coverage and well-sleeping developers

From spaghetti with no src/test to green CI, good coverage and well-sleeping developers

Michał Matłoka , Jacek Kunicki

subscription
Thumbnail for: Failing Continuous Delivery

Failing Continuous Delivery

Daniel Sawano , Daniel Deogun

subscription
Thumbnail for: Tips and tricks for clean relational db schemas (slides only)

Tips and tricks for clean relational db schemas (slides only)

Clément Delafargue

subscription
Thumbnail for: Production Lessons (slides only)

Production Lessons (slides only)

Greg Young

subscription

The Spring BOF (no slides)

Juergen Hoeller , Josh Long

subscription

BigData on Azure for architects – Machine Learning, HDInsight (Hadoop), Event Hub – what to use when (and – how) (slides only)

Tomasz Kopacz

subscription
Thumbnail for: "Bootiful" Applications with Spring Boot

"Bootiful" Applications with Spring Boot

Josh Long

subscription
Thumbnail for: 5-10-15 years with Java - from junior to master and back again (slides only)

5-10-15 years with Java - from junior to master and back again (slides only)

Wojciech Seliga

subscription
Thumbnail for: Everything Works In Java EE?--Then Try Microservices :-) (slides only)

Everything Works In Java EE?--Then Try Microservices :-) (slides only)

Adam Bien

subscription
Thumbnail for: Supler: complex web forms, not so complex

Supler: complex web forms, not so complex

Adam Warski , Tomasz Szymanski

subscription
Thumbnail for: Functional Data Storage (slides only)

Functional Data Storage (slides only)

Greg Young

subscription
Thumbnail for: The Go Language (slides only)

The Go Language (slides only)

Brad Fitzpatrick

subscription
Thumbnail for: The Silver Bullet Syndrome (slides only)

The Silver Bullet Syndrome (slides only)

Hadi Hariri

subscription
Thumbnail for: What's Coming in Java EE 8

What's Coming in Java EE 8

Reza Rahman

subscription
Thumbnail for: From API to protocol (slides only)

From API to protocol (slides only)

Quentin ADAM

subscription
Thumbnail for: Babun - a Windows shell you will love, finally! (slides only)

Babun - a Windows shell you will love, finally! (slides only)

Tom Bujok , Lukasz Pielak

subscription
Thumbnail for: IDE Wizard? CLI Command? Get both for the price of one! (slides only)

IDE Wizard? CLI Command? Get both for the price of one! (slides only)

Koen Aers

subscription
Thumbnail for: Event Sourcing & Functional Programming - a pair made in heaven

Event Sourcing & Functional Programming - a pair made in heaven

Paweł Szulc

subscription
Thumbnail for: Everybody lies

Everybody lies

Tomasz Kowalczewski

free
Thumbnail for: Scala and Clojure: Playing well together

Scala and Clojure: Playing well together

David Pollak

subscription
Thumbnail for: Groovier BDD with Spock (slides only)

Groovier BDD with Spock (slides only)

Michał Kordas

subscription
Thumbnail for: Clean JavaScript code - only dream or reality (slides only)

Clean JavaScript code - only dream or reality (slides only)

Sebastian Łaciak

subscription
Thumbnail for: Wykorzystanie podejścia Domain-Driven Design w systemach legacy (slides only)

Wykorzystanie podejścia Domain-Driven Design w systemach legacy (slides only)

Piotr Wyczesany

subscription
Thumbnail for: Case Study: Agile @gov.pl (slides only)

Case Study: Agile @gov.pl (slides only)

Matt Harasymczuk

subscription
Thumbnail for: Functional patterns for scala beginners (slides only)

Functional patterns for scala beginners (slides only)

Clément Delafargue

subscription
Thumbnail for: Vagrant up your enviroment (slides only)

Vagrant up your enviroment (slides only)

Yann Larrivee

subscription
Thumbnail for: Running Micro-Services with Spring Boot in Kubernetes (slides only)

Running Micro-Services with Spring Boot in Kubernetes (slides only)

Ray Tsang

subscription
Thumbnail for: Scalable Is Awesome, Literally! (slides only)

Scalable Is Awesome, Literally! (slides only)

Garrett Smith

subscription
Thumbnail for: Apache Spark - when things go wrong (slides only)

Apache Spark - when things go wrong (slides only)

Paweł Szulc

subscription
Thumbnail for: Functional Programming: Technical Reasons to Adapt (screen only)

Functional Programming: Technical Reasons to Adapt (screen only)

Venkat Subramaniam

subscription
Thumbnail for: PubSub++ - few tips that make your life with kafka easier. (slides only)

PubSub++ - few tips that make your life with kafka easier. (slides only)

Krzysztof Debski

subscription
Thumbnail for: Effective SCRUM in distributed teams (slides only)

Effective SCRUM in distributed teams (slides only)

Rafał Udziela

subscription
Thumbnail for: React.js: Super-fast Single Page Web Applications (slides only)

React.js: Super-fast Single Page Web Applications (slides only)

Pratik Patel

subscription
Thumbnail for: The Smartwatch Revolution begins: Developing for Android Wear (slides only)

The Smartwatch Revolution begins: Developing for Android Wear (slides only)

Pratik Patel

subscription
Thumbnail for: Apache Cassandra 101 (slides only)

Apache Cassandra 101 (slides only)

Christopher Batey

subscription
Thumbnail for: Distributed algorithms for Big Data (slides only)

Distributed algorithms for Big Data (slides only)

DuyHai DOAN

subscription
Thumbnail for: What's new in Spring Data? (slides only)

What's new in Spring Data? (slides only)

Thomas Darimont

subscription
Thumbnail for: User Acceptance Testing - Looking for the Holly Grail (slides only)

User Acceptance Testing - Looking for the Holly Grail (slides only)

Boguslaw Osuch

subscription
Thumbnail for: Is your profiler speaking the same language as you? (slides only)

Is your profiler speaking the same language as you? (slides only)

Simon Maple

subscription
Thumbnail for: Microservices and Conversion Hunting - How to build software architectures for changeableness (slides only)

Microservices and Conversion Hunting - How to build software architectures for changeableness (slides only)

Bernd Zuther

subscription
Thumbnail for: JRebel under the covers - how is it even possible? (slides only)

JRebel under the covers - how is it even possible? (slides only)

Simon Maple

subscription
Thumbnail for: Core Software Design Principles for Programmers (slides only)

Core Software Design Principles for Programmers (slides only)

Venkat Subramaniam

subscription
Thumbnail for: Microservices - enough with theory, let's code some (slides only)

Microservices - enough with theory, let's code some (slides only)

Marcin Grzejszczak , Tomasz Szymanski

subscription
Thumbnail for: A Gentle and useful introduction to Reactive Extensions (slides only)

A Gentle and useful introduction to Reactive Extensions (slides only)

Hadi Hariri

subscription
Thumbnail for: Caching reboot: javax.cache & Ehcache 3 (slides only)

Caching reboot: javax.cache & Ehcache 3 (slides only)

Louis Jacomet

subscription
Thumbnail for: Lazy Evaluations (screen only)

Lazy Evaluations (screen only)

Venkat Subramaniam

subscription
Thumbnail for: Make sense of your (BIG) data! (slides only)

Make sense of your (BIG) data! (slides only)

David Pilato

subscription
Thumbnail for: The end of server management : hosting have to become a commodity (slides only)

The end of server management : hosting have to become a commodity (slides only)

Quentin ADAM

subscription
Thumbnail for: Refactoring to Functional (slides only)

Refactoring to Functional (slides only)

Hadi Hariri

subscription
Thumbnail for: HTTP/2 : why upgrading the web? (slides only)

HTTP/2 : why upgrading the web? (slides only)

Quentin ADAM

subscription
Thumbnail for: Hystrix – managing failures in distributed systems (slides only)

Hystrix – managing failures in distributed systems (slides only)

Tomasz Nurkiewicz

subscription
Thumbnail for: Building systems that are #neverdone

Building systems that are #neverdone

James Lewis

subscription
Thumbnail for: Need for Async: In hot pursuit of internet-scale app architectures

Need for Async: In hot pursuit of internet-scale app architectures

Konrad Malawski

subscription
Thumbnail for: Level up your dev skills with static analysis

Level up your dev skills with static analysis

David Lindsay

subscription
Thumbnail for: Modularity in post microservice world

Modularity in post microservice world

Michal Gruca

subscription
Thumbnail for: Modern Java Component Design with Spring 4.2

Modern Java Component Design with Spring 4.2

Juergen Hoeller

subscription
Thumbnail for: The Creative Networker

The Creative Networker

Jurgen Appelo

subscription
Thumbnail for: Technical leadership – from an expert to a leader

Technical leadership – from an expert to a leader

Mariusz Sieraczkiewicz

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

JCP, Adopt-a-JSR & You

Reza Rahman

subscription
Thumbnail for: Lessons learned from scaling software

Lessons learned from scaling software

Bartek Nowakowski

subscription
Thumbnail for: Building fault tolerant microservices

Building fault tolerant microservices

Christopher Batey

subscription
Thumbnail for: High Performance JavaScript Web Apps

High Performance JavaScript Web Apps

Pratik Patel

subscription
Thumbnail for: WebVR - democracy in Virtual Reality

WebVR - democracy in Virtual Reality

Marcin Lichwala

subscription
Thumbnail for: Social Coding - tools and techniques

Social Coding - tools and techniques

Maciej Pleśnar

subscription
Thumbnail for: Why software developers should care about deployment and monitoring

Why software developers should care about deployment and monitoring

Michał Kosmulski

subscription
Thumbnail for: Building an Asynchronous Reactive NoSQL SDK with RxJava

Building an Asynchronous Reactive NoSQL SDK with RxJava

Simon Baslé

subscription
Thumbnail for: OnConnectionLost: The life of an offline web application

OnConnectionLost: The life of an offline web application

Stefanie Grewenig , Johannes Thönes

subscription
Thumbnail for: Deploying Microservice Architectures with Spring Cloud on Cloud Foundry

Deploying Microservice Architectures with Spring Cloud on Cloud Foundry

Pieter Humphrey

subscription
Thumbnail for: Agile Development Meets Connected Devices - Lessons Learned

Agile Development Meets Connected Devices - Lessons Learned

subscription
Thumbnail for: Ansible to rule them all – o provisioningu i deploymencie aplikacji Java

Ansible to rule them all – o provisioningu i deploymencie aplikacji Java

Wojciech Podgorski , Rafal Piotrowski

subscription
Thumbnail for: You're an Architect...Now What?

You're an Architect...Now What?

Nathaniel Schutta

subscription
Thumbnail for: Deep dive into Reactive Java

Deep dive into Reactive Java

Tomasz Kowalczewski

subscription
Thumbnail for: Nashorn, what is the whole buzz about

Nashorn, what is the whole buzz about

Michal Gruca

subscription
Thumbnail for: Things about microservices you wish you never knew

Things about microservices you wish you never knew

Marek Ko-w

subscription
Thumbnail for: "Bootiful" Microservices with Spring Cloud

"Bootiful" Microservices with Spring Cloud

Josh Long

subscription
Thumbnail for: Refactoring meets big money

Refactoring meets big money

Michal Gruca

subscription
Thumbnail for: Security Platform as a Service with Docker and Weave

Security Platform as a Service with Docker and Weave

David Pollak

subscription
Thumbnail for: Clean Architecture - how to improve your system architecture

Clean Architecture - how to improve your system architecture

Andrzej Bednarz

subscription
Thumbnail for: Principles Of Microservices

Principles Of Microservices

Sam Newman

subscription
Thumbnail for: Painfree Object-Document Mapping for MongoDB

Painfree Object-Document Mapping for MongoDB

Philipp Krenn

subscription
Thumbnail for: Reviewing Architectures

Reviewing Architectures

Nathaniel Schutta

subscription
Thumbnail for: Unlocking the magic of monads in Java 8

Unlocking the magic of monads in Java 8

OLEG ŠELAJEV

subscription
Thumbnail for: Kill the mutants, test your tests

Kill the mutants, test your tests

Roy van Rijn

subscription
Thumbnail for: Vaadin Designer, the visual design tool for modern web apps

Vaadin Designer, the visual design tool for modern web apps

Maciej Przepióra

subscription
Thumbnail for: My running shoes - Continuous Delivery

My running shoes - Continuous Delivery

Grzegorz Krumpholz

free
Thumbnail for: Get Past the Syntax, The Real Scare is in the Semantics

Get Past the Syntax, The Real Scare is in the Semantics

Venkat Subramaniam

free
Thumbnail for: Coding Culture

Coding Culture

Sven Peters

free
Thumbnail for: Software architecture as code

Software architecture as code

Simon Brown

subscription
Thumbnail for: Flavors of Concurrency in Java

Flavors of Concurrency in Java

OLEG ŠELAJEV

free
Thumbnail for: Modern Web Architecture

Modern Web Architecture

Ted Neward

subscription
Thumbnail for: 10 NoSQL databases you have to know

10 NoSQL databases you have to know

Tom Bujok

subscription
Thumbnail for: What's New in WildFly 9

What's New in WildFly 9

Tomasz Adamski

subscription