Jquery2012 defs

541 views

Published on

jQuery deferred!

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
541
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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

    1. 1. .when() to use deferreds Alex McPherson - Quick Left
    2. 2. console.log(talkOutline)
    3. 3. console.log(talkOutline)• Who’s Alex McPherson
    4. 4. console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history
    5. 5. console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough
    6. 6. console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions
    7. 7. console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions• Best practices
    8. 8. console.log(talkOutline)• Who’s Alex McPherson• j@ubourg and some history• Code walkthrough• 6 problems, 6 solutions• Best practices• Q &A
    9. 9. alex.define()Important, life altering facts:
    10. 10. alex.define() Important, life altering facts:• Sublime Text 2
    11. 11. alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme
    12. 12. alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme• Comma Last
    13. 13. alex.define() Important, life altering facts:• Sublime Text 2• Railscasts 2 color scheme• Comma Last• Always include semicolons
    14. 14. alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color scheme• Comma Last• Always include semicolons
    15. 15. alex.define() Important, life altering facts:• Sublime Text 2 • Boston to Boulder• Railscasts 2 color • Quick Left scheme• Comma Last• Always include semicolons
    16. 16. 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
    17. 17. 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
    18. 18. alex.define() Skillset
    19. 19. alex.define() Skillset• Fortune 500 Financial
    20. 20. alex.define() Skillset• Fortune 500 Financial • Code performance
    21. 21. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    22. 22. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    23. 23. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    24. 24. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    25. 25. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    26. 26. alex.define() Skillset• Fortune 500 Financial • Code performance • IE6
    27. 27. alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • IE6
    28. 28. alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • Get stuff done • IE6
    29. 29. alex.define() Skillset• Fortune 500 Financial • 1-3 month startups • Code performance • Get stuff done • IE6 • Thick clients, Backbone.js, websockets
    30. 30. deferred.history
    31. 31. deferred.history• November 2009, $.ajax requests
    32. 32. deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites
    33. 33. deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites• Suggested that internal API be exposed
    34. 34. deferred.history• November 2009, $.ajax requests• Julian Aubourg steps up, rewrites• Suggested that internal API be exposed• Reworked, released January 2010
    35. 35. 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
    36. 36. 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
    37. 37. 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
    38. 38. code.inspect()
    39. 39. code.inspect()What exactly is a $.Deferred()?
    40. 40. code.inspect() What exactly is a $.Deferred()?State storage object:
    41. 41. code.inspect() What exactly is a $.Deferred()?State storage object:
    42. 42. code.inspect() What exactly is a $.Deferred()?‘pending’
    43. 43. code.inspect() What exactly is a $.Deferred()?‘pending’
    44. 44. code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’
    45. 45. code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’
    46. 46. code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’ ‘rejected’
    47. 47. code.inspect() What exactly is a $.Deferred()? ‘resolved’‘pending’ ‘rejected’
    48. 48. code.inspect()What exactly is a $.Deferred()? ‘resolved’ ‘rejected’
    49. 49. code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
    50. 50. code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
    51. 51. code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’
    52. 52. code.inspect() What exactly is a $.Deferred()?‘resolved’‘rejected’ }
    53. 53. code.inspect()What exactly is a $.Deferred()?
    54. 54. code.inspect() What exactly is a $.Deferred()?• .always(fn)• .done(fn)• .fail(fn)
    55. 55. 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)
    56. 56. 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)
    57. 57. 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)
    58. 58. bringEmOut(examples)
    59. 59. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    60. 60. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    61. 61. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    62. 62. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    63. 63. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    64. 64. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    65. 65. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    66. 66. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    67. 67. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    68. 68. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    69. 69. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    70. 70. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    71. 71. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources
    72. 72. 1. Bundling AJAX CallsTask at hand: Render a small sidebar with data from 3 different sources $.when returns one deferred to represent many
    73. 73. 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
    74. 74. 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
    75. 75. 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
    76. 76. 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
    77. 77. 2. Template PatternTask at hand: Single page app, some pages need data, others don’t
    78. 78. 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.
    79. 79. 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.
    80. 80. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    81. 81. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    82. 82. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    83. 83. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    84. 84. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    85. 85. 3.Cache MoneyTask at hand: Your app uses a rate limited API. Don’t go over!
    86. 86. 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
    87. 87. 4. Pretty SyntaxTask at hand: Make your javascript look awesome
    88. 88. 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)
    89. 89. 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) <<<
    90. 90. 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) <<<
    91. 91. 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) <<<
    92. 92. 4. Pretty SyntaxTask at hand: Make your javascript look awesome
    93. 93. 4. Pretty SyntaxTask at hand: Make your javascript look awesome
    94. 94. 4. Pretty SyntaxTask at hand: Make your javascript look awesome
    95. 95. 4. Pretty SyntaxTask at hand: Make your javascript look awesome
    96. 96. 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
    97. 97. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    98. 98. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    99. 99. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    100. 100. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    101. 101. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    102. 102. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    103. 103. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    104. 104. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    105. 105. 5.Arbitrary ‘events’Task at hand: Get updates during a longer process
    106. 106. 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
    107. 107. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerancesBuilt in helper methods generate promises on their DOM nodes:
    108. 108. 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()
    109. 109. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
    110. 110. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
    111. 111. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
    112. 112. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
    113. 113. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances
    114. 114. 6. ManagingAnimationsTask at hand: Implement a complex animation with tight tolerances Syncing multiple animations is hard without deferreds
    115. 115. Things I didn’t evenmention but are stillawesome:
    116. 116. Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!
    117. 117. Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!
    118. 118. Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!
    119. 119. Things I didn’t evenmention but are stillawesome:• Registering multiple callbacks!• Post-resolution binding!• Helpful .then(d, f) shortcut syntax!• Dependent AJAX calls!
    120. 120. 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!
    121. 121. 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!
    122. 122. Deferred best practices
    123. 123. Deferred best practices• When in doubt, return a deferred
    124. 124. Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()
    125. 125. Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()• Powerful as properties on objects
    126. 126. Deferred best practices• When in doubt, return a deferred• Better yet, return a .promise()• Powerful as properties on objects• Make you code prettier
    127. 127. 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
    128. 128. What we covered:
    129. 129. What we covered:• Bundling AJAX calls together
    130. 130. What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds
    131. 131. What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects
    132. 132. What we covered:• Bundling AJAX calls together• Normalizing by using .done on non-deferreds• Implementing cache objects• Prettier syntax and DSLs
    133. 133. 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
    134. 134. 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
    135. 135. 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)

    ×