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
 ...
JavaScript
A Developer’s History
JavaScript, Circa 2000

• Introduced in Netscape 2.0 and IE 3.0
• Calculators, scrolling status messages, and
  image roll...
Two Big Changes


•   Dynamic rendering
    engine

•   XMLHttpRequest object
Dynamic Rendering
•   With earlier browsers,
    documents could not be
    modified

•   Modifying the document
    withou...
Document Object
          Model
•   Standard API for
    accessing HTML or XML
    documents

•   JavaScript support means...
XMLHttpRequest
       (XHR)

• Introduced as a ActiveX component by
  Microsoft
• Purpose: Transfer XML over HTTP without
...
Web 2.0: Jargon Attack!
•   AJAX: A better acronym     Grrr....
    than XMLHttpRequest?

•   JSON: A better format
    th...
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 the...
The Library

• Designed to solve a class of related
  problems
• “Customization” is done through
  configuration files and f...
The Explosion of
        Libraries
• First there were calendars and image
  rollovers. (Thanks, Macromedia!)
• Libraries t...
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... differen...
The Brilliance
  of jQuery
Provide a wrapper around all of
         the icky stuff.

The wrapper should be simple
        ...
jQueryFeatures
•   Uses CSS 3 Selectors as   •   Event model that spans
    a query language              all major browse...
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...
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-dr...
Drupal Behaviors
•   Assign an action to an
    element.

    •   Drupal takes care of
        initializing when the
     ...
JavaScript
   Translations
 Static (application) text that
appears in JavaScript code can
be translated to any supported
 ...
JavaScript Themes

            •   Server theming:
                PHP templates.

            •   JavaScript
            ...
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 mean...
What will Drupal look
        like?
•   Inline image editors       •   Local caches of data to
                           ...
The Recap
• JavaScript has come a long way from its
  image rollover and scrolling status message
  days.
• Drupal JavaScr...
The Browser Goes
      Blue Collar
        The browser of the future is
a universal application platform for a certain
   ...
Questions?

               Matt Butcher
Twitter: http://twitter.com/technosophos
      Email: butcher@palantir.net
     Bl...
Upcoming SlideShare
Loading in...5
×

Drupal 6 JavaScript and jQuery

6,882

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
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,882
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
141
Comments
0
Likes
6
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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×