Web Design World: Javascript Frameworks

by Luke Wroblewski October 19, 2010

In his Better Sites Through Javascript presentation at Web Design World in Las Vegas NV, Joe Marini provided a high level overview of Javascript frameworks with a focus on JQuery and Prototype. Here's my notes from his talk:

  • Why use a Javascript framework? They make life easier by covering browser incompatibilities for you. They also provide a lot of extras like animation and Ajax functions.
  • JQuery & Prototype (popular Javascript frameworks) serve as an abstraction layer that eases the development of dynamic Web applications. They are compatible with every modern browser.
  • JQuery is organized into eight different modules that cover a specific area of functionality. Core, Selection & Traversal (find content and manipulate content within the page), Manipulation & CSS, Events (one common way to work with events across browsers), Effects (fades, animations), Ajax (post data to and from server), User Interfaces (JQuery UI is a plug-in for the library), and Extensibility (can integrate your code to extend the library).
  • The $ function is the main way to get at the features in JQuery.
  • Getting content out of the DOM is easy with JQuery. JQuery selectors work like CSS selectors. Filters allow you to refine selectors by only including elements that match certain conditions.
  • To create new HTML content, just pass a string containing new HTML to the $() function.
  • Effects and animations: JQuery supplies basic animations and transition functions that perform common visual effects. Hiding and showing elements can include timing, callbacks, fading, sliding, etc.
  • JQuery’s main focus is on browser compatibility. Prototpye’s focus is more framework-like. Prototype extends the Javascript in the browser.
  • Prototype has several $ functions. The single $ only retrieves elements by ID. The $$ function uses selectors to retrieve elements. The $F function selects form fields and returns their values.
  • Prototype provides a comprehensive set of classes and methods for working with Ajax communication between the browser and the server.