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

3,082

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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,082
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
88
Comments
0
Likes
3
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
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×