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.

Functional Java Script - Webtechcon 2009

1,240 views

Published on

These slides (and the linked code samples) show some aspects of functional javascript programming.

Published in: Technology

Functional Java Script - Webtechcon 2009

  1. 1. Functional JavaScript Practical Tips, Tricks and Experiences @wolframkriesing @uxebu Montag, 16. November 2009
  2. 2. Montag, 16. November 2009
  3. 3. JavaScript Usability AJAX Browser mobile django widgets FrontEnd dojo OpenSource Web2.0 CSS UserExperience Montag, 16. November 2009
  4. 4. What is Functional Programming? Montag, 16. November 2009
  5. 5. Montag, 16. November 2009
  6. 6. treats computation as the evaluation of mathematical functions avoids state and mutable data output value of a function depends only on the input Montag, 16. November 2009
  7. 7. avoids state and mutable data Montag, 16. November 2009
  8. 8. output value of a function depends only on the input Montag, 16. November 2009
  9. 9. What is it? • programming style functions, closures, arguments, scope • mathemetics • stay focused • practical, pragmatic • functions create scope! Montag, 16. November 2009
  10. 10. Another Perspective nums.slice(0,3) take 3 nums Montag, 16. November 2009
  11. 11. Demo sum.html http://static.uxebu.com/~cain/functional-examples/sum.html Montag, 16. November 2009
  12. 12. Function creates scope what else can? Montag, 16. November 2009
  13. 13. •(function(){})() • create scope •(function(d){...})(dojo) • reduce side effects • prototype overriding can screw you! Montag, 16. November 2009
  14. 14. •(function(d){...})(dojo) • reduce side effects • prototype overriding can screw you! • function returning a function • apply/call allow to pass context • closures Montag, 16. November 2009
  15. 15. Demo create-scope.html http://static.uxebu.com/~cain/functional-examples/create-scope.html Montag, 16. November 2009
  16. 16. Closures Montag, 16. November 2009
  17. 17. Montag, 16. November 2009
  18. 18. Are you lazy! Montag, 16. November 2009
  19. 19. You like to be? Montag, 16. November 2009
  20. 20. Be lazy! Montag, 16. November 2009
  21. 21. Lazy JavaScript... Montag, 16. November 2009
  22. 22. ROX Montag, 16. November 2009
  23. 23. Demo lazy.html http://static.uxebu.com/~cain/functional-examples/lazy.html Montag, 16. November 2009
  24. 24. Demo hitch.html http://static.uxebu.com/~cain/functional-examples/hitch.html Montag, 16. November 2009
  25. 25. Use side effects Montag, 16. November 2009
  26. 26. Use side effects Montag, 16. November 2009
  27. 27. Montag, 16. November 2009
  28. 28. ["00300_car", "00060_bike", "00200_motorbike", ...] [300, 60, 200, ...].sort() Montag, 16. November 2009
  29. 29. Montag, 16. November 2009
  30. 30. Montag, 16. November 2009
  31. 31. Demo dojox.lang.functional.lambda Montag, 16. November 2009
  32. 32. Used where? • AJAX • jQuery, dojo, YUI, etc. • $.each, $.map, ... • $("div").css("color", "red") • dojo.hitch() • etc. Montag, 16. November 2009
  33. 33. Pros + Cons • reduces cost • simplify problems • speed? • seperate concerns think different • • confidence++ • learn when to use it • testability • it's optional Montag, 16. November 2009
  34. 34. thx, Q&A @wolframkriesing @uxebu Montag, 16. November 2009

×