• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal 6 JavaScript and jQuery
 

Drupal 6 JavaScript and jQuery

on

  • 9,295 views

This presentation discusses the evolution of JavaScript, it's place in the present release of Drupal, and the future of the rich CMS.

This presentation discusses the evolution of JavaScript, it's place in the present release of Drupal, and the future of the rich CMS.

Statistics

Views

Total Views
9,295
Views on SlideShare
9,251
Embed Views
44

Actions

Likes
6
Downloads
139
Comments
0

3 Embeds 44

http://www.slideshare.net 40
http://localhost 2
http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Drupal 6 JavaScript and jQuery Drupal 6 JavaScript and jQuery Presentation Transcript

  • Drupal 6 jQuery and JavaScript DrupalCampWI, 2009
  • Matt Butcher First web app: 1995 About a dozen languages Five books, dozens of articles Milkshake problem
  • 2009 2004
  • What do you get with each download of jQuery? Tweet the answer @technosophos and win a book.
  • Overview • JavaScript and its • Drupal JavaScript evolving place in web Translations applications • Drupal JavaScript • The rise of the Themes JavaScript library • The future of JavaScript • Introducing jQuery and what it means for CMS systems • Drupal Behaviors
  • JavaScript A Developer’s History
  • JavaScript, Circa 2000 • Introduced in Netscape 2.0 and IE 3.0 • Calculators, scrolling status messages, and image rollovers • Left us a sprawling landscape of speciality tools
  • Two Big Changes • Dynamic rendering engine • XMLHttpRequest object
  • Dynamic Rendering • With earlier browsers, documents could not be modified • Modifying the document without a page load was impossible until Gecko and IE 6 • Programmatic access to elements...
  • Document Object Model • Standard API for accessing HTML or XML documents • JavaScript support means programmatic access to any part of the page • DOM + Dynamic Reflow = Modifiable pages
  • XMLHttpRequest (XHR) • Introduced as a ActiveX component by Microsoft • Purpose: Transfer XML over HTTP without requiring a new page load
  • Web 2.0: Jargon Attack! • AJAX: A better acronym Grrr.... than XMLHttpRequest? • JSON: A better format than XML? • DOM + AJAX = A new wave of web applications • AHAH, JSONP, Comet...
  • The Rise of the JavaScript Library Or, Enough with the one-off scripts already!
  • The Olden Days Scripts were simple tools designed with a single application in mind. To use one of these typically involved hacking at the code to apply it to your situation. Photo by heyrocker http://www.flickr.com/photos/heyrocker/417236386/
  • The Library • Designed to solve a class of related problems • “Customization” is done through configuration files and function calls • Intended for re-use
  • The Explosion of Libraries • First there were calendars and image rollovers. (Thanks, Macromedia!) • Libraries took on more sophisticated problems, like widgets and drag-and-drop. • Open Source libraries: Prototype, Ext.js, YUI, jQuery....
  • One of the problems was just begging for a library....
  • Web 2.0 + JavaScript = Icky? • Hard things: • DOM code is powerful, but(t) ugly • Event handling was... different. • AJAX was... different. • Other common tasks were difficult due to JavaScript... differences.
  • The Brilliance of jQuery Provide a wrapper around all of the icky stuff. The wrapper should be simple yet robust.
  • jQueryFeatures • Uses CSS 3 Selectors as • Event model that spans a query language all major browsers • Standard traversal and • Transitions and effects manipulation functions • CSS manipulation • AJAX library for XML, AHAH, JSON • Free pony with every download! • Cross-browser utilities
  • Pony by Xiaphias http://en.wikipedia.org/wiki/File:Feralpony.jpg I lied about the pony
  • jQuery Idioms •$ • Factory function • Chained methods • Anonymous functions and closures • Object literals
  • $: It’s not just for Benjamins $(‘#content div.my-class’); $.get(someUrl);
  • Factories and Chains [Insert industrial revolution joke here] $(‘#content’).children().text(‘Hi’);
  • Anonymous Functions and function (data) { $.get(someUrl, Closures console.log(data); }); var msg = ‘Hello world’; $(‘#some-button’).click(function (event) { alert(msg); })
  • Objects, like, Literally $(‘#content’).accordion({ header: ‘h2’, change: function () {} });
  • JavaScript and Drupal How do they pair?
  • Working Together • jQuery bundled with • Autocompletion Drupal • Drag-and-drop • JavaScript Behaviors • AHAH forms • JavaScript Translations • Progress meters and • Numerous utility dynamic upload functions • Batch processing • JavaScript theming • Buzzr, anyone?
  • Drupal Behaviors • Assign an action to an element. • Drupal takes care of initializing when the page loads. • AJAX and other events may re- initialize.
  • JavaScript Translations Static (application) text that appears in JavaScript code can be translated to any supported language.
  • JavaScript Themes • Server theming: PHP templates. • JavaScript theming: jQuery. • Both use theme functions.
  • Drupal Autocomplete, Drag and Drop, AHAH
  • The Future of JavaScript
  • Three Key Technologies • Canvas: Draw on the canvas with JavaScript. • Workers: Direct access to threads means JavaScript can do work in the background. • Databases: Local storage and SQL databases in JavaScript. No, really.
  • What will Drupal look like? • Inline image editors • Local caches of data to ease server load • Robust drawing inside of pages • Stateful clients that remember where they • Larger amounts of were on a site processing done on the client • Bottom line: A new era of client interactivity • Events generated by may be just around the corner. background computation
  • The Recap • JavaScript has come a long way from its image rollover and scrolling status message days. • Drupal JavaScript libraries mean we can build more, faster, cheaper. • Future technologies are building on the web-as-application-platform paradigm.
  • The Browser Goes Blue Collar The browser of the future is a universal application platform for a certain class of network applications. For the first time, the browser may define the application, and the servers will play an auxiliary role.
  • Questions? Matt Butcher Twitter: http://twitter.com/technosophos Email: butcher@palantir.net Blog: http://technosophos.com