JavaScript libraries:

How did we get here?

Dan Scott (

Associate Librarian, Chair of the Library & Archives, Systems Librarian, …

March 21, 2017

Browser Wars!

  • Netscape Navigator (1994-2007[0])
  • Internet Explorer (1995-[1])
  • Apple Safari (2003-[2])
  • Mozilla Firefox (2004-[4,5])
  • Google Chrome (2008-[6])

This page best viewed with...

This page best viewed with...

JavaScript vs. JScript… ECMAScript!

1, 2, 3, 4, 5, 6/2015, 2016, 2017

Thank you ECMA TC 39!


  • Executes a function once for each array element[1]
    var flavours = ['orange', 'lemon'];
    var styles = ['ice cream', 'sherbet'];
    flavours.forEach(function(flavour) {
        for (let style of styles) {
        	console.log(flavour + ' ' + style);
  • Added to Firefox 1.5 in 2005[2]
  • ... and to Internet Explorer 9 in 2011[3],
  • ... but only in Quirks mode


Performance is variable

  • JavaScript engines include:
    • SpiderMonkey, TraceMonkey
    • V8
    • Chakra
    • SquirrelFish / FTL

Document all the things(?)

Libraries: encoded, shared wisdom

1. In programming, a collection of routines stored in a file. Each set of instructions in a library has a name, and each performs a different task.
2. A collection of software or data files. Microsoft Computer Dictionary. (2002). Redmond, WA: Microsoft Press.
  • Librarians do the hard work so you don't have to!


Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.

Originally developed with Ruby on Rails


  • $() for selecting elements by ID!
  • $$() for CSS selector syntax!
  • Ajax.Request for cross-browser Ajax!


UI library that builds on Prototype.js

  • Drag and drop interaction
  • Autocompletion text widget
  • Animation framework - jQuery UI

  • Minimalist browser feature detection library launched in 2009
    • <html> element gets a class attribute of (no-)feature-name for each feature
    • Programmatic access via a global Modernizr object
  • Supports custom builds for a subset of features


The Dojo Toolkit began in 2004 by a group of like-minded JavaScript engineers that were tired of reinventing the wheel and hacking around browser inconsistencies.


in "modern" Dojo, if you are about to access something in the global namespace STOP because you are doing something wrong


  • Dojo packages functionality into modules:
    • dojo/dom for selecting elements by ID!
    • dojo/query for CSS selector syntax!
    • dojo/request for cross-browser Ajax!



Originally developed by John Resig

  • $() for selecting elements by CSS selector
  • $.ajax for cross-browser Ajax!


UI library that builds on jQuery

  • Drag and drop interaction
  • Autocompletion text widget
  • Animation framework - jQuery UI

a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices

Getting modern


"for modern browsers and touch devices. No jQuery."

Google Charts

  • Charts are just one of many libraries Google offers
  • Includes pie, bar, scatter, and calendar charts

three.js : 3D animation

"an easy to use, lightweight, 3D library"

A-Frame : WebVR

"A web framework for building virtual reality experiences"

And I'm famous!

Loading up your toolbox

  • Compatibility tables for common browsers vs.:
    • JavaScript
    • HTML5
    • CSS

  • Evaluates web page performance:
    • Simulates different conditions (for example, cable vs. cell phone)
    • Captures screenshots, progress, performance bottlenecks
    • Easy to share results
    • Suggests possible optimizations (caching, etc)

Developer tools: Firebug extension

  • Firebug extension (ca. 2006) made View source dynamic:
    • editable HTML
    • editable CSS
    • network monitoring
    • JavaScript debugging, …

Native dev tools

Dev tools: Console

  • Hit F12 or CTRL-Shift-i and select Console
  • Where all the warnings and errors hide
  • Run arbitrary JavaScript
  • Modify browser objects and properties

Dev tools: Inspect element

  • Right-click any part of a web page and Inspect element to see and manipulate dynamically:
    • Elements and attributes
    • CSS rules - applied and computed
    • Event listeners (Chrome)

Dev tools: Network monitoring

  • Hit F12 or CTRL-Shift-i and select Network
    • Shows all requests and responses
    • Waterfall view of requests
    • Timing / performance - network throttling optional!

Dev tools: JavaScript debugging

  • Hit F12 or CTRL-Shift-i and select Debugger (Firefox)
    • Set breakpoints in scripts, DOM modification, XHR (Chrome)
    • Step through, into, out of scopes
    • Inspect variable values

Vanilla JavaScript!


Next time

  • Modern JavaScript tooling

    • nodejs & npm
    • Build systems (gulp / grunt)
  • Awareness initiatives

    • Progressive Web Apps (PWAs)
    • Accelerated Mobile Pages (AMP)
  • Frameworks

    • Angular
    • React


Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License