Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Underscore.jsUnobtrusive Utilities for Javascript          Kevin Ball      Co-Founder & CTO       kball@fashioningchange.c...
What is Underscore.js?
What is Underscore.js?     Javascript Utility Library
What is Underscore.js?     Javascript Utility Library     • Complementary
What is Underscore.js?     Javascript Utility Library     • Complementary     • Unobtrusive
What is Underscore.js?     Javascript Utility Library     • Complementary     • Unobtrusive     • Flexible
ComplementaryjQuery
ComplementaryjQuery
ComplementaryjQuery   Functional Support
ComplementaryjQuery   Functional Support         • Collections         • Arrays         • Functions
Unobtrusive
Unobtrusive      Plays nice with others
Unobtrusive      Plays nice with others      •Does not modify built-in      objects      •Delegates to built-in      funct...
Flexible
Flexible      • Functional or        Object-oriented style      • Chainable
What Does It Do?• Fills in holes in the language• Provides functional support• Makes you happier writing Javascript
Examples: Arrays_.map([1, 2, 3], function(i) { return i * 2; });_([1, 2, 3]).map(function(i) {return i * 2;});
Doesn’t jQuery have      $.map?
Doesn’t jQuery have      $.map?_.map
Doesn’t jQuery have      $.map?_.map    _.each
Doesn’t jQuery have      $.map?_.map          _.each    _.reduce
Doesn’t jQuery have      $.map?_.map          _.each   _.select    _.reduce
Doesn’t jQuery have      $.map?_.map          _.each         _.select    _.reduce       _.detect
Doesn’t jQuery have      $.map?_.map            _.each         _.select      _.reduce       _.detect_.reject
Doesn’t jQuery have      $.map?_.map            _.each          _.select      _.reduce        _.detect_.reject         _.s...
Doesn’t jQuery have      $.map?_.map            _.each          _.select      _.reduce        _.detect_.reject         _.s...
Doesn’t jQuery have      $.map?_.map                _.each         _.select      _.reduce           _.detect_.reject      ...
Chaining• Use with object-oriented style• Chain method tells Underscore to return  wrapped objects• Value method returns t...
Chaining   var lyrics   = [  {line : 1,    words   :   "Im a lumberjack and Im okay"},  {line : 2,    words   :   "I sleep...
Function Utilities
Function Utilities_.bind(function, object)
Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])
Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])_.throttle(function, wait)
Object Utilities
Object Utilities_.isNumber(object)
Object Utilities_.isNumber(object)_.keys(object)
Object Utilities_.isNumber(object)_.keys(object)_.isEqual(object, other)
Conclusion
ConclusionGood libraries reduce the burden
ConclusionGood libraries reduce the burden        Underscore.js
Thank You!    Kevin BallCo-Founder & CTO kball@fashioningchange.com           @kbal11
Upcoming SlideShare
Loading in …5
×

Underscore.js

4,129 views

Published on

A quick overview of the Underscore.js utility javascript library. Presented 9/6/2011 to the San Diego JS meetup group.

Published in: Technology
  • Be the first to comment

Underscore.js

  1. 1. Underscore.jsUnobtrusive Utilities for Javascript Kevin Ball Co-Founder & CTO kball@fashioningchange.com @kbal11
  2. 2. What is Underscore.js?
  3. 3. What is Underscore.js? Javascript Utility Library
  4. 4. What is Underscore.js? Javascript Utility Library • Complementary
  5. 5. What is Underscore.js? Javascript Utility Library • Complementary • Unobtrusive
  6. 6. What is Underscore.js? Javascript Utility Library • Complementary • Unobtrusive • Flexible
  7. 7. ComplementaryjQuery
  8. 8. ComplementaryjQuery
  9. 9. ComplementaryjQuery Functional Support
  10. 10. ComplementaryjQuery Functional Support • Collections • Arrays • Functions
  11. 11. Unobtrusive
  12. 12. Unobtrusive Plays nice with others
  13. 13. Unobtrusive Plays nice with others •Does not modify built-in objects •Delegates to built-in functions if present
  14. 14. Flexible
  15. 15. Flexible • Functional or Object-oriented style • Chainable
  16. 16. What Does It Do?• Fills in holes in the language• Provides functional support• Makes you happier writing Javascript
  17. 17. Examples: Arrays_.map([1, 2, 3], function(i) { return i * 2; });_([1, 2, 3]).map(function(i) {return i * 2;});
  18. 18. Doesn’t jQuery have $.map?
  19. 19. Doesn’t jQuery have $.map?_.map
  20. 20. Doesn’t jQuery have $.map?_.map _.each
  21. 21. Doesn’t jQuery have $.map?_.map _.each _.reduce
  22. 22. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce
  23. 23. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect
  24. 24. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject
  25. 25. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy
  26. 26. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy _.include
  27. 27. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy _.include _.groupBy
  28. 28. Chaining• Use with object-oriented style• Chain method tells Underscore to return wrapped objects• Value method returns the final value at the end
  29. 29. Chaining var lyrics = [ {line : 1, words : "Im a lumberjack and Im okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "Hes a lumberjack and hes okay"}, {line : 4, words : "He sleeps all night and he works all day"}];_(lyrics).chain() .map(function(line) { return line.words.split( ); }) .flatten() .reduce(function(counts, word) { counts[word] = (counts[word] || 0) + 1; return counts;}, {}).value();=> {lumberjack : 2, all : 4, night : 2 ... } * Example from http://documentcloud.github.com/underscore/
  30. 30. Function Utilities
  31. 31. Function Utilities_.bind(function, object)
  32. 32. Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])
  33. 33. Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])_.throttle(function, wait)
  34. 34. Object Utilities
  35. 35. Object Utilities_.isNumber(object)
  36. 36. Object Utilities_.isNumber(object)_.keys(object)
  37. 37. Object Utilities_.isNumber(object)_.keys(object)_.isEqual(object, other)
  38. 38. Conclusion
  39. 39. ConclusionGood libraries reduce the burden
  40. 40. ConclusionGood libraries reduce the burden Underscore.js
  41. 41. Thank You! Kevin BallCo-Founder & CTO kball@fashioningchange.com @kbal11

×