Your SlideShare is downloading. ×
Underscore.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Underscore.js

2,924
views

Published on

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

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

No Downloads
Views
Total Views
2,924
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
81
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. Underscore.jsUnobtrusive Utilities for Javascript Kevin Ball Co-Founder & CTO kball@fashioningchange.com @kbal11
    • 2. What is Underscore.js?
    • 3. What is Underscore.js? Javascript Utility Library
    • 4. What is Underscore.js? Javascript Utility Library • Complementary
    • 5. What is Underscore.js? Javascript Utility Library • Complementary • Unobtrusive
    • 6. What is Underscore.js? Javascript Utility Library • Complementary • Unobtrusive • Flexible
    • 7. ComplementaryjQuery
    • 8. ComplementaryjQuery
    • 9. ComplementaryjQuery Functional Support
    • 10. ComplementaryjQuery Functional Support • Collections • Arrays • Functions
    • 11. Unobtrusive
    • 12. Unobtrusive Plays nice with others
    • 13. Unobtrusive Plays nice with others •Does not modify built-in objects •Delegates to built-in functions if present
    • 14. Flexible
    • 15. Flexible • Functional or Object-oriented style • Chainable
    • 16. What Does It Do?• Fills in holes in the language• Provides functional support• Makes you happier writing Javascript
    • 17. Examples: Arrays_.map([1, 2, 3], function(i) { return i * 2; });_([1, 2, 3]).map(function(i) {return i * 2;});
    • 18. Doesn’t jQuery have $.map?
    • 19. Doesn’t jQuery have $.map?_.map
    • 20. Doesn’t jQuery have $.map?_.map _.each
    • 21. Doesn’t jQuery have $.map?_.map _.each _.reduce
    • 22. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce
    • 23. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect
    • 24. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject
    • 25. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy
    • 26. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy _.include
    • 27. Doesn’t jQuery have $.map?_.map _.each _.select _.reduce _.detect_.reject _.sortBy _.include _.groupBy
    • 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. 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. Function Utilities
    • 31. Function Utilities_.bind(function, object)
    • 32. Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])
    • 33. Function Utilities_.bind(function, object)_.memoize(function, [hashFunction])_.throttle(function, wait)
    • 34. Object Utilities
    • 35. Object Utilities_.isNumber(object)
    • 36. Object Utilities_.isNumber(object)_.keys(object)
    • 37. Object Utilities_.isNumber(object)_.keys(object)_.isEqual(object, other)
    • 38. Conclusion
    • 39. ConclusionGood libraries reduce the burden
    • 40. ConclusionGood libraries reduce the burden Underscore.js
    • 41. Thank You! Kevin BallCo-Founder & CTO kball@fashioningchange.com @kbal11