Jquery2012 defs
Upcoming SlideShare
Loading in...5
×
 

Jquery2012 defs

on

  • 446 views

jQuery deferred!

jQuery deferred!

Statistics

Views

Total Views
446
Views on SlideShare
441
Embed Views
5

Actions

Likes
0
Downloads
12
Comments
0

1 Embed 5

http://www.cnblogs.com 5

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Jquery2012 defs Jquery2012 defs Presentation Transcript

  • .when() to use deferreds Alex McPherson - Quick Left
  • console.log(talkOutline)
  • console.log(talkOutline)• Who’s Alex McPherson
  • console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history
  • console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough
  • console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions
  • console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions• Best practices
  • console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions• Best practices• Q &A
  • alex.define()Important, life altering facts:
  • alex.define() Important, life altering facts:• Sublime Text 2
  • alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme
  • alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme• Comma Last
  • alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme• Comma Last• Always include semicolons
  • alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color scheme• Comma Last• Always include semicolons
  • alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color • Quick Left scheme• Comma Last• Always include semicolons
  • alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color • Quick Left scheme • Front End• Comma Last• Always include semicolons
  • alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color • Quick Left scheme • Front End• Comma Last • Training and CU• Always include semicolons
  • alex.define() Skillset
  • alex.define() Skillset• Fortune 500 Financial
  • alex.define() Skillset• Fortune 500 Financial • Code performance
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • IE6
  • alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • Get stuff done • IE6
  • alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • Get stuff done • IE6 • Thick clients, Backbone.js, websockets
  • deferred.history
  • deferred.history• November 2009, $.ajax requests
  • deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites
  • deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites• Suggested that internal API be exposed
  • deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites• Suggested that internal API be exposed• Reworked, released January 2010
  • deferred.history• November 2009, $.ajax • ‘Based on’ CommonJS requests Promises/A proposal• Julian Aubourg steps up, rewrites• Suggested that internal API be exposed• Reworked, released January 2010
  • deferred.history• November 2009, $.ajax • ‘Based on’ CommonJS requests Promises/A proposal• Julian Aubourg steps up, • Used internally in rewrites jQuery, AJAX and effects• Suggested that internal API be exposed• Reworked, released January 2010
  • deferred.history• November 2009, $.ajax • ‘Based on’ CommonJS requests Promises/A proposal• Julian Aubourg steps up, • Used internally in rewrites jQuery, AJAX and effects• Suggested that internal • How do we use it? API be exposed• Reworked, released January 2010
  • code.inspect()
  • code.inspect()What exactly is a $.Deferred()?
  • code.inspect() What exactly is a $.Deferred()?State storage object:
  • code.inspect() What exactly is a $.Deferred()?State storage object:
  • code.inspect() What exactly is a $.Deferred()?‘pending’
  • code.inspect() What exactly is a $.Deferred()?‘pending’
  • code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’
  • code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’
  • code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’ ‘rejected’
  • code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’ ‘rejected’
  • code.inspect()What exactly is a $.Deferred()? ‘resolved’ ‘rejected’
  • code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
  • code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
  • code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
  • code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’ }
  • code.inspect()What exactly is a $.Deferred()?
  • code.inspect() What exactly is a $.Deferred()?• .always(fn)• .done(fn)• .fail(fn)
  • code.inspect() What exactly is a $.Deferred()?• .always(fn)• .done(fn)• .fail(fn)• .reject(ctx, args)• .rejectWith(ctx, args)• .resolve(ctx, args)• .resolveWith(ctx, args)
  • code.inspect() What exactly is a $.Deferred()?• .always(fn) • .state()• .done(fn) • .isRejected()• .fail(fn) • .isResolved()• .reject(ctx, args)• .rejectWith(ctx, args)• .resolve(ctx, args)• .resolveWith(ctx, args)
  • code.inspect() What exactly is a $.Deferred()?• .always(fn) • .state()• .done(fn) • .isRejected()• .fail(fn) • .isResolved()• .reject(ctx, args) • .pipe()• .rejectWith(ctx, args) • .then()• .resolve(ctx, args) • .when()• .resolveWith(ctx, args)
  • bringEmOut(examples)
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
  • 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources $.when returns one deferred to represent many
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’tAny object that isn’t a deferred can still betreated like one.
  • 2. Template PatternTask at hand: Single page app, some pages need data, others don’tAny object that isn’t a deferred can still betreated like one.It will get immediately resolved.
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
  • 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over! Callbacks attached to deferreds always get the same arguments
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesome
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesomea) setTimeout(500, myFunction)b) setTimeOut(myFunction, 500)c) setTimeOut(500, myFunction)d) setTimeout(myFunction, 500)
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesomea) setTimeout(500, myFunction)b) setTimeOut(myFunction, 500)c) setTimeOut(500, myFunction)d) setTimeout(myFunction, 500) <<<
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesomea) setTimeout(500, myFunction)b) setTimeOut(myFunction, 500)c) setTimeOut(500, myFunction)d) setTimeout(myFunction, 500) <<<
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesomea) setTimeout(500, myFunction)b) setTimeOut(myFunction, 500)c) setTimeOut(500, myFunction)d) setTimeout(myFunction, 500) <<<
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesome
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesome
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesome
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesome
  • 4. Pretty SyntaxTask at hand: Make your javascript look awesomeThe natural-language syntax is already there, but feel free to add your own. Return promises
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
  • 5.Arbitrary ‘events’Task at hand: Get updates during a longer process .progress() callbacks fired with .notify() can let you get insight into long running processes $.Animation and HTML5 file upload
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerancesBuilt in helper methods generate promises on their DOM nodes:
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerancesBuilt in helper methods generate promises on their DOM nodes: • .animate() • .fadeIn() • .fadeOut() • .hide() • .show() • .slideUp() • .slideDown() • .Animate()
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
  • 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances Syncing multiple animations is hard without deferreds
  • Things I didn’t evenmention but are stillawesome:
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!• Dependent AJAX calls!
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!• Dependent AJAX calls!• Memoizing expensive operations!
  • Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!• Dependent AJAX calls!• Memoizing expensive operations!• Implementing a publisher/subscriber pattern!
  • Deferred best practices
  • Deferred best practices• When in doubt, return a deferred
  • Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()
  • Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()• Powerful as properties on objects
  • Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()• Powerful as properties on objects• Make you code prettier
  • Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()• Powerful as properties on objects• Make you code prettier• Make your life easier
  • What we covered:
  • What we covered:• Bundling AJAX calls together
  • What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds
  • What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects
  • What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects• Prettier syntax and DSLs
  • What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects• Prettier syntax and DSLs• Progress on long-running operations
  • What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects• Prettier syntax and DSLs• Progress on long-running operations• Manage animations
  • talk.resolve() • @alexmcpherson • McPhersonIndustries.com Credits:j@ubourgbit.ly/JvD71E [MSDN Addy/Julian]bit.ly/MIOIK2 [Intridea Defs post]Quick Left (esp. Sam and Nico)