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

1. Drupal 6 jQuery and
JavaScript
DrupalCampWI, 2009

2. Matt Butcher
First web app: 1995
About a dozen languages
Five books, dozens of articles
Milkshake problem

3. 2009
2004

4. What do you get with
each download of
jQuery?
Tweet the answer @technosophos and win a book.

5. 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

6. JavaScript
A Developer’s History

7. 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

8. Two Big Changes
• Dynamic rendering
engine
• XMLHttpRequest object

9. 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...

10. 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

11. XMLHttpRequest
(XHR)
• Introduced as a ActiveX component by
Microsoft
• Purpose: Transfer XML over HTTP without
requiring a new page load

12. 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...

13. The Rise of the
JavaScript Library
Or, Enough with the one-off scripts already!

14. 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/

15. The Library
• Designed to solve a class of related
problems
• “Customization” is done through
configuration files and function calls
• Intended for re-use

16. 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....

17. One of the problems
was just begging for a
library....

18. 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.

19. The Brilliance
of jQuery
Provide a wrapper around all of
the icky stuff.
The wrapper should be simple
yet robust.

20. 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

21. Pony by Xiaphias
http://en.wikipedia.org/wiki/File:Feralpony.jpg
I lied about the pony

22. jQuery Idioms
•$
• Factory function
• Chained methods
• Anonymous functions and closures
• Object literals

23. $: It’s not just for
Benjamins
$(‘#content div.my-class’);
$.get(someUrl);

24. Factories and Chains
[Insert industrial revolution joke here]
$(‘#content’).children().text(‘Hi’);

25. Anonymous Functions
and function (data) {
$.get(someUrl,
Closures
console.log(data);
});
var msg = ‘Hello world’;
$(‘#some-button’).click(function (event) {
alert(msg);
})

26. Objects, like, Literally
$(‘#content’).accordion({
header: ‘h2’,
change: function () {}
});

27. JavaScript and Drupal
How do they pair?

28. 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?

29. Drupal Behaviors
• Assign an action to an
element.
• Drupal takes care of
initializing when the
page loads.
• AJAX and other
events may re-
initialize.

30. JavaScript
Translations
Static (application) text that
appears in JavaScript code can
be translated to any supported
language.

31. JavaScript Themes
• Server theming:
PHP templates.
• JavaScript
theming: jQuery.
• Both use theme
functions.

32. Drupal Autocomplete,
Drag and Drop, AHAH

33. The Future of
JavaScript

34. 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.

35. 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

36. 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.

37. 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.

38. Questions?
Matt Butcher
Twitter: http://twitter.com/technosophos
Email: butcher@palantir.net
Blog: http://technosophos.com