JavaScript libraries:

How did we get here?

Dan Scott (dscott@laurentian.ca)

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!

Array.prototype.forEach()

  • 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

DOM DOM DOM DOM…

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!

(2005-2015)

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. http://prototypejs.org/

Originally developed with Ruby on Rails

(2005-2015)

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

(2005-2010)

UI library that builds on Prototype.js

  • Drag and drop interaction
  • Autocompletion text widget
  • Animation framework

script.aculo.us - 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

(2004-)

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. https://dojotoolkit.org/community/roadmap/vision.html

(2011-)

in "modern" Dojo, if you are about to access something in the global namespace STOP because you are doing something wrong https://dojotoolkit.org/documentation/tutorials/1.10/modern_dojo/index.html

(2011-)

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

(2011-)

(2006-)

Originally developed by John Resig

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

(2006-)

UI library that builds on jQuery

  • Drag and drop interaction
  • Autocompletion text widget
  • Animation framework

script.aculo.us - 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 http://view.jquerymobile.com/master/demos/

Getting modern

Sortable

"for modern browsers and touch devices. No jQuery."
http://rubaxa.github.io/Sortable/

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"
https://github.com/mrdoob/three.js/

A-Frame : WebVR

"A web framework for building virtual reality experiences"
https://aframe.io/

And I'm famous!

Loading up your toolbox

caniuse.com

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

webpagetest.org

  • 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!

References

Next time

  • Modern JavaScript tooling

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

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

    • Angular
    • React

Deets

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