Using JavaScript Libraries for an Interactive Web Experience

1
Using JavaScript Libraries for an Interactive Web
Experience

• Paul Roy
• Faculty of Social Sciences

2
Whats a JavaScript Library

• Collection of JavaScript utilities, controls and
  objects to simplify the development of web sites
  and web applications
• Stored as code that is referenced by the main
  program
• Text file with .js extension containing
  JavaScript code
• ltscriptgt tag pointing to .js file to include the
  library in your page
• Home-grown or pre-built libraries

ltscript src/assets/scripts/prototype.js
typetext/javascriptgt lt/scriptgt
3
Pre-built Libraries

• Why reinvent the wheel or solve problems that
  have already been conquered?
• Browser incompatibilities and quirks
• Event handling
• DOM node selection and manipulation
• Visual effects of every shape and size
• AJAX request and response handling
• Drag-and-drop support
• Libraries of all kinds
• Prototype - OpenRICO
• Scriptaculous - Dojo ToolKit
• plus dozens more!

4
Prototype

• prototypejs.org
• Swiss Army Knife of JavaScript frameworks
• Strong AJAX support (both XML and JSON)
• DOM manipulation
• Event handling
• Key features
• , and F utility methods
• Element object and extensions
• Ajax.Request, Ajax.Updater, Ajax.PeriodicalUpdater
  
• Excellent online and offline documentation
• No visual effects!! These are provided by
  Scriptaculous

5
Scriptaculous

• script.aculo.us
• Built on Prototype
• Provides user interface components
• Drag and drop
• Visual effects and controls
• Animation
• Key features
• Transitions, fades and highlights
• AJAX autocomplete
• Community add-on effects
• Wiki-style online documentation

6
OpenRICO

• openrico.org
• Versions 1.x built on Prototype 2.x stand-alone
• Toolkit geared for Rich Internet Applications
• Animation and visual effects
• Drag and drop
• Own AJAX engine
• Controls and widgets
• Key features
• Size and position animation and rounded corners
• Accordion and LiveData grid controls
• Commercial backing through Sabre Airline
  Solutions
• Examples and documentation are poor

7
Dojo Toolkit

• dojotoolkit.org
• One of the most feature-rich toolkits combining
• Core Browser detection, AJAX, JSON, event
  handling, DOM manipulation, language utilities
• Dijit Interface tools, controls, validation and
  widget
• Dojo X Extension incubator and experimental
  stuff
• Key features
• Modular packaging
• Huge assortment of UI controls tabs, trees,
  grids, menus, splitters, date picker, calendar,
  color picker, dialogs, windows
• Localized and accessible to screen readers
• Good documentation

8
Buyer Beware

• Documentation is generally poor but improving
• Examples and step-by-step instructions are hard
  to come by
• Change logs for fixes, browser support and
  updates are thin
• Use fallbacks or say goodbye to accessibility and
  search engine optimization
• Be nice must play well with others (core
  JavaScript, CSS and external content)
• You might have to get your hands dirty by digging
  through the library if something goes wrong
• Dont be lazy a library doesnt eliminate the
  need to test your web application
• Large, active developer communities are better

9
JavaScript at the Faculty of Social Sciences

• Minimalist approach
• Heavy use of Prototype utility objects , A
• OpenRICO Accordions to display large amounts of
  text (Full disclosure not tested for
  accessibility or search engine optimization)
• OpenRICO Rounded corners
• Prototype AJAX for digital signage system grab
  text and images from a MySQL database to rotate
  announcements
• RedBox Loading data screen effect

10
Wrap-Up

• Dont repeat the web circa 1996 just because
  you
• can doesnt mean you should.
• Paul Roy
• www.socialsciences.uottawa.ca
• Phone [phone] ext. 2283
• Email paul.g.roy_at_uottawa.ca
• Your questions, comments, love letters
• and death threats are always welcome!