jQuery deferred!

1. .when() to use
deferreds
Alex McPherson - Quick Left

2. console.log(talkOutline)

3. console.log(talkOutline)
• Who’s Alex McPherson

4. console.log(talkOutline)
• Who’s Alex McPherson
• j@ubourg and some history

5. console.log(talkOutline)
• Who’s Alex McPherson
• j@ubourg and some history
• Code walkthrough

6. console.log(talkOutline)
• Who’s Alex McPherson
• j@ubourg and some history
• Code walkthrough
• 6 problems, 6 solutions

7. console.log(talkOutline)
• Who’s Alex McPherson
• j@ubourg and some history
• Code walkthrough
• 6 problems, 6 solutions
• Best practices

8. console.log(talkOutline)
• Who’s Alex McPherson
• j@ubourg and some history
• Code walkthrough
• 6 problems, 6 solutions
• Best practices
• Q &A

9. alex.define()
Important, life altering facts:

10. alex.define()
Important, life altering facts:
• Sublime Text 2

11. alex.define()
Important, life altering facts:
• Sublime Text 2
• Railscasts 2 color
scheme

12. alex.define()
Important, life altering facts:
• Sublime Text 2
• Railscasts 2 color
scheme
• Comma Last

13. alex.define()
Important, life altering facts:
• Sublime Text 2
• Railscasts 2 color
scheme
• Comma Last
• Always include
semicolons

14. alex.define()
Important, life altering facts:
• Sublime Text 2 • Boston to Boulder
• Railscasts 2 color
scheme
• Comma Last
• Always include
semicolons

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. 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. 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. alex.define()
Skillset

19. alex.define()
Skillset
• Fortune 500 Financial

20. alex.define()
Skillset
• Fortune 500 Financial
• Code performance

21. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

22. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

23. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

24. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

25. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

26. alex.define()
Skillset
• Fortune 500 Financial
• Code performance
• IE6

27. alex.define()
Skillset
• Fortune 500 Financial • 1-3 month startups
• Code performance
• IE6

28. alex.define()
Skillset
• Fortune 500 Financial • 1-3 month startups
• Code performance • Get stuff done
• IE6

29. alex.define()
Skillset
• Fortune 500 Financial • 1-3 month startups
• Code performance • Get stuff done
• IE6 • Thick clients,
Backbone.js,
websockets

30. deferred.history

31. deferred.history
• November 2009, $.ajax
requests

32. deferred.history
• November 2009, $.ajax
requests
• Julian Aubourg steps up,
rewrites

33. deferred.history
• November 2009, $.ajax
requests
• Julian Aubourg steps up,
rewrites
• Suggested that internal
API be exposed

34. deferred.history
• November 2009, $.ajax
requests
• Julian Aubourg steps up,
rewrites
• Suggested that internal
API be exposed
• Reworked, released
January 2010

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. 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. 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. code.inspect()

39. code.inspect()
What exactly is a $.Deferred()?

40. code.inspect()
What exactly is a $.Deferred()?
State storage object:

41. code.inspect()
What exactly is a $.Deferred()?
State storage object:

42. code.inspect()
What exactly is a $.Deferred()?
‘pending’

43. code.inspect()
What exactly is a $.Deferred()?
‘pending’

44. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘pending’

45. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘pending’

46. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘pending’
‘rejected’

47. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘pending’
‘rejected’

48. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘rejected’

49. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘rejected’

50. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘rejected’

51. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘rejected’

52. code.inspect()
What exactly is a $.Deferred()?
‘resolved’
‘rejected’
}

53. code.inspect()
What exactly is a $.Deferred()?

54. code.inspect()
What exactly is a $.Deferred()?
• .always(fn)
• .done(fn)
• .fail(fn)

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. 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. 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. bringEmOut(examples)

59. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

60. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

61. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

62. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

63. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

64. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

65. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

66. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

67. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

68. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

69. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

70. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

71. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources

72. 1. Bundling AJAX Calls
Task at hand: Render a small sidebar with data from 3 different sources
$.when returns one deferred
to represent many

73. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t

74. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t

75. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t

76. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t

77. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t

78. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t
Any object that isn’t a deferred can still be
treated like one.

79. 2. Template Pattern
Task at hand: Single page app, some pages need data, others don’t
Any object that isn’t a deferred can still be
treated like one.
It will get immediately resolved.

80. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

81. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

82. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

83. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

84. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

85. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!

86. 3.Cache Money
Task at hand: Your app uses a rate limited API. Don’t go over!
Callbacks attached to deferreds
always get the same arguments

87. 4. Pretty Syntax
Task at hand: Make your javascript look awesome

88. 4. Pretty Syntax
Task at hand: Make your javascript look awesome
a) setTimeout(500, myFunction)
b) setTimeOut(myFunction, 500)
c) setTimeOut(500, myFunction)
d) setTimeout(myFunction, 500)

89. 4. Pretty Syntax
Task at hand: Make your javascript look awesome
a) setTimeout(500, myFunction)
b) setTimeOut(myFunction, 500)
c) setTimeOut(500, myFunction)
d) setTimeout(myFunction, 500) <<<

90. 4. Pretty Syntax
Task at hand: Make your javascript look awesome
a) setTimeout(500, myFunction)
b) setTimeOut(myFunction, 500)
c) setTimeOut(500, myFunction)
d) setTimeout(myFunction, 500) <<<

91. 4. Pretty Syntax
Task at hand: Make your javascript look awesome
a) setTimeout(500, myFunction)
b) setTimeOut(myFunction, 500)
c) setTimeOut(500, myFunction)
d) setTimeout(myFunction, 500) <<<

92. 4. Pretty Syntax
Task at hand: Make your javascript look awesome

93. 4. Pretty Syntax
Task at hand: Make your javascript look awesome

94. 4. Pretty Syntax
Task at hand: Make your javascript look awesome

95. 4. Pretty Syntax
Task at hand: Make your javascript look awesome

96. 4. Pretty Syntax
Task at hand: Make your javascript look awesome
The natural-language syntax is already
there, but feel free to add your own.
Return promises

97. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

98. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

99. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

100. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

101. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

102. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

103. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

104. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

105. 5.Arbitrary ‘events’
Task at hand: Get updates during a longer process

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. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances
Built in helper methods generate promises on their DOM nodes:

108. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances
Built in helper methods generate promises on their DOM nodes:
• .animate()
• .fadeIn()
• .fadeOut()
• .hide()
• .show()
• .slideUp()
• .slideDown()
• .Animate()

109. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances

110. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances

111. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances

112. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances

113. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances

114. 6. Managing
Animations
Task at hand: Implement a complex animation with tight tolerances
Syncing multiple animations is
hard without deferreds

115. Things I didn’t even
mention but are still
awesome:

116. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!

117. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!
• Post-resolution binding!

118. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!
• Post-resolution binding!
• Helpful .then(d, f) shortcut syntax!

119. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!
• Post-resolution binding!
• Helpful .then(d, f) shortcut syntax!
• Dependent AJAX calls!

120. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!
• Post-resolution binding!
• Helpful .then(d, f) shortcut syntax!
• Dependent AJAX calls!
• Memoizing expensive operations!

121. Things I didn’t even
mention but are still
awesome:
• Registering multiple callbacks!
• Post-resolution binding!
• Helpful .then(d, f) shortcut syntax!
• Dependent AJAX calls!
• Memoizing expensive operations!
• Implementing a publisher/subscriber pattern!

122. Deferred best practices

123. Deferred best practices
• When in doubt, return a deferred

124. Deferred best practices
• When in doubt, return a deferred
• Better yet, return a .promise()

125. Deferred best practices
• When in doubt, return a deferred
• Better yet, return a .promise()
• Powerful as properties on objects

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. 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. What we covered:

129. What we covered:
• Bundling AJAX calls together

130. What we covered:
• Bundling AJAX calls together
• Normalizing by using .done on non-deferreds

131. What we covered:
• Bundling AJAX calls together
• Normalizing by using .done on non-deferreds
• Implementing cache objects

132. What we covered:
• Bundling AJAX calls together
• Normalizing by using .done on non-deferreds
• Implementing cache objects
• Prettier syntax and DSLs

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. 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. talk.resolve()
• @alexmcpherson
• McPhersonIndustries.com
Credits:
j@ubourg
bit.ly/JvD71E [MSDN Addy/Julian]
bit.ly/MIOIK2 [Intridea Defs post]
Quick Left (esp. Sam and Nico)