Your SlideShare is downloading. ×
Drupal 6 JavaScript and jQuery
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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.

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide

  • Transcript

    • 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
    • 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 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’); $.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: Email: Blog: