Drupal 6 JavaScript and jQuery


Published on

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

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

  • Drupal 6 JavaScript and jQuery

    1. 1. Drupal 6 jQuery and JavaScript DrupalCampWI, 2009
    2. 2. Matt Butcher First web app: 1995 About a dozen languages Five books, dozens of articles Milkshake problem
    3. 3. 2009 2004
    4. 4. What do you get with each download of jQuery? Tweet the answer @technosophos and win a book.
    5. 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. 6. JavaScript A Developer’s History
    7. 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. 8. Two Big Changes • Dynamic rendering engine • XMLHttpRequest object
    9. 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. 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. 11. XMLHttpRequest (XHR) • Introduced as a ActiveX component by Microsoft • Purpose: Transfer XML over HTTP without requiring a new page load
    12. 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. 13. The Rise of the JavaScript Library Or, Enough with the one-off scripts already!
    14. 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. 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. 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. 17. One of the problems was just begging for a library....
    18. 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. 19. The Brilliance of jQuery Provide a wrapper around all of the icky stuff. The wrapper should be simple yet robust.
    20. 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. 21. Pony by Xiaphias http://en.wikipedia.org/wiki/File:Feralpony.jpg I lied about the pony
    22. 22. jQuery Idioms •$ • Factory function • Chained methods • Anonymous functions and closures • Object literals
    23. 23. $: It’s not just for Benjamins $(‘#content div.my-class’); $.get(someUrl);
    24. 24. Factories and Chains [Insert industrial revolution joke here] $(‘#content’).children().text(‘Hi’);
    25. 25. Anonymous Functions and function (data) { $.get(someUrl, Closures console.log(data); }); var msg = ‘Hello world’; $(‘#some-button’).click(function (event) { alert(msg); })
    26. 26. Objects, like, Literally $(‘#content’).accordion({ header: ‘h2’, change: function () {} });
    27. 27. JavaScript and Drupal How do they pair?
    28. 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. 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. 30. JavaScript Translations Static (application) text that appears in JavaScript code can be translated to any supported language.
    31. 31. JavaScript Themes • Server theming: PHP templates. • JavaScript theming: jQuery. • Both use theme functions.
    32. 32. Drupal Autocomplete, Drag and Drop, AHAH
    33. 33. The Future of JavaScript
    34. 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. 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. 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. 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. 38. Questions? Matt Butcher Twitter: http://twitter.com/technosophos Email: butcher@palantir.net Blog: http://technosophos.com