Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

The Wonders of the jQuery Migrate Plugin

Exploring Hidden Secrets

Overview

  1. What is the Migrate Plugin?
  2. Migration demonstration
  3. The migrate API
  4. Source code highlights

Who am I?

jQuery 1.9.0

January 15, 2013

Why is this happening to us?

In making these changes, the team's goal was to fix behavior that makes jQuery inconsistent or hard to use, and in the process improve both file size and overall performance.

-- jQuery Core 1.9 Upgrade Guide

"I've heard that 1.9.0 Breaks the Web™."

Nope. But this does!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Let's Migrate!

Check it out here

The Migrate API

jQuery.migrateWarnings

An array of string warning messages that have been generated by the code on the page, in the order they were generated. Messages appear in the array only once, even if the condition has occurred multiple times, unless jQuery.migrateReset() is called.

jQuery.migrateMute

A flag that controls the emission of warning messages in the developer console (debugging version only). The jQuery.migrateWarnings array is still maintained when this property is set, which allows programmatic inspection without console output.

jQuery.migrateTrace

A flag that controls the emission of stack traces in the developer console.

jQuery.migrateReset()

A method that clears the jQuery.migrateWarnings array and enables previously-logged messages to be displayed again.

Source walkthrough

git.io/jq-migrate

jQuery Plugin Repository

a home for jQuery plugins

migrate.jquery.json


{
	"name": "migrate",
	"title": "jQuery Migrate",
	"description": "Migrate older jQuery code to jQuery 1.9+",
	"keywords": [],
	"version": "1.0.0",
	"author": {
		"name": "jQuery Foundation, Inc. and other contributors",
		"url": "https://github.com/jquery/jquery-migrate/blob/1.0.0/AUTHORS.txt"
	},
	"licenses": [
		{
			"type": "MIT",
			"url": "https://github.com/jquery/jquery-migrate/blob/1.0.0/LICENSE-MIT"
		}
	],
	"bugs": {
		"url": "http://bugs.jquery.com/"
	},
	"homepage": "https://github.com/jquery/jquery-migrate",
	"docs": "https://github.com/jquery/jquery-migrate",
	"download": "https://github.com/jquery/jquery-migrate/blob/1.0.0/README.md#download",
	"dependencies": {
		"jquery": ">=1.6.4"
	}
}
	

Grunt

a task-based build tool for JavaScript projects

Gruntfile.js: file list


	// ...

	files: [
		"src/intro.js",
		"src/migrate.js",
		"src/attributes.js",
		"src/core.js",
		"src/data.js",
		"src/manipulation.js",
		"src/event.js",
		"src/outro.js"
	],

	// ...
	

intro.js


(function( jQuery, window, undefined ) {
"use strict";
	

outro.js


})( jQuery, window );
	

Gruntfile.js: minification


  // ...

  uglify: {
    all: {
      files: {
        "dist/jquery-migrate.min.js": [
          "src/migratemute.js",
          "dist/jquery-migrate.js"
        ]
      }
    },
    options: {
      banner: "/*! jQuery Migrate v<%= pkg.version %> | (c) 2005, <%= grunt.template.today('yyyy') %> <%= pkg.author.name %> | jquery.org/license */\n",
      sourceMap: "dist/jquery-migrate.min.map",
      beautify: {
        ascii_only: true
      }
    }

  }

  // ...
	

migratemute.js


// Included only in the minified build, via Uglify2
// Only turn warnings off if not already overridden
if ( typeof jQuery.migrateMute === "undefined" ) {
	jQuery.migrateMute = true;
}
	

migrate.js


var warnedAbout = {};

// List of warnings already given; public read only
jQuery.migrateWarnings = [];

// Set to true to prevent console output;
// migrateWarnings still maintained
// jQuery.migrateMute = false;

// Set to false to disable traces that appear with
// warnings
if ( jQuery.migrateTrace === undefined ) {
	jQuery.migrateTrace = true;
}

// Forget any warnings we've already given; public
jQuery.migrateReset = function() {
	warnedAbout = {};
	jQuery.migrateWarnings.length = 0;
};

// ...
	

// ...

function migrateWarn( msg) {
  if ( !warnedAbout[ msg ] ) {
    warnedAbout[ msg ] = true;
    jQuery.migrateWarnings.push( msg );
    if ( window.console && console.warn && !jQuery.migrateMute ) {
      console.warn( "JQMIGRATE: " + msg );
      if ( jQuery.migrateTrace && console.trace ) {
        console.trace();
      }
    }
  }
}

// ...
	

From event.js


// ...

jQuery.fn.toggle = function( fn, fn2 ) {

  // Don't mess with animation or css toggles
  if ( !jQuery.isFunction( fn ) ||
       !jQuery.isFunction( fn2 ) ) {

    return oldToggle.apply( this, arguments );
  }
  migrateWarn("jQuery.fn.toggle(handler, handler...) is deprecated");

// ...
	

// ...

function migrateWarnProp( obj, prop, value, msg ) {
  if ( Object.defineProperty ) {
    // On ES5 browsers (non-oldIE), warn if the code
    // tries to get prop; allow property to be
    // overwritten in case some other plugin wants it
    try {
      Object.defineProperty( obj, prop, {
        configurable: true,
        enumerable: true,
        get: function() {
          migrateWarn( msg );
          return value;
        },
        set: function( newValue ) {
          migrateWarn( msg );
          value = newValue;
        }
      });
      return;
    } catch( err ) {
      // IE8 is a dope about Object.defineProperty,
      // can't warn there
    }
  }

  // Non-ES5 (or broken) browser; just set the property
  jQuery._definePropertyBroken = true;
  obj[ prop ] = value;
}
	

From core.js


// ...

// Warn if the code tries to get jQuery.browser
migrateWarnProp( jQuery, "browser", browser, "jQuery.browser is deprecated" );

// ...
	

Resources

Use a spacebar or arrow keys to navigate