functional java script - webtechcon 2009
DESCRIPTION
These slides (and the linked code samples) show some aspects of functional javascript programming.TRANSCRIPT
![Page 1: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/1.jpg)
Functional JavaScriptPractical Tips, Tricks and Experiences
@wolframkriesing @uxebu
Montag, 16. November 2009
![Page 2: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/2.jpg)
Montag, 16. November 2009
![Page 3: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/3.jpg)
JavaScript AJAX
CSSdojo
Browser
OpenSourceWeb2.0FrontEnd
Usability
UserExperience
django
mobilewidgets
Montag, 16. November 2009
![Page 4: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/4.jpg)
What is Functional Programming?
Montag, 16. November 2009
![Page 5: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/5.jpg)
Montag, 16. November 2009
![Page 6: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/6.jpg)
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
![Page 7: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/7.jpg)
avoids state and mutable data
Montag, 16. November 2009
![Page 8: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/8.jpg)
output value of a function depends only on the input
Montag, 16. November 2009
![Page 9: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/9.jpg)
What is it?•programming style
functions, closures, arguments, scope
•mathemetics
•stay focused
•practical, pragmatic
• functions create scope!
Montag, 16. November 2009
![Page 10: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/10.jpg)
Another Perspective
nums.slice(0,3)
take 3 nums
Montag, 16. November 2009
![Page 11: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/11.jpg)
Demosum.html
http://static.uxebu.com/~cain/functional-examples/sum.html
Montag, 16. November 2009
![Page 12: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/12.jpg)
Function creates scope
what else can?
Montag, 16. November 2009
![Page 13: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/13.jpg)
•(function(){})()
•create scope
•(function(d){...})(dojo)
•reduce side effects
•prototype overriding can screw you!
Montag, 16. November 2009
![Page 14: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/14.jpg)
•(function(){})()
•create scope
•(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
![Page 15: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/15.jpg)
Democreate-scope.html
http://static.uxebu.com/~cain/functional-examples/create-scope.html
Montag, 16. November 2009
![Page 16: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/16.jpg)
Closures
Montag, 16. November 2009
![Page 17: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/17.jpg)
Montag, 16. November 2009
![Page 18: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/18.jpg)
Are you lazy!
Montag, 16. November 2009
![Page 19: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/19.jpg)
You like to be?
Montag, 16. November 2009
![Page 20: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/20.jpg)
Be lazy!
Montag, 16. November 2009
![Page 21: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/21.jpg)
Lazy JavaScript...
Montag, 16. November 2009
![Page 22: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/22.jpg)
ROXMontag, 16. November 2009
![Page 23: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/23.jpg)
Demolazy.html
http://static.uxebu.com/~cain/functional-examples/lazy.html
Montag, 16. November 2009
![Page 24: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/24.jpg)
Demohitch.html
http://static.uxebu.com/~cain/functional-examples/hitch.html
Montag, 16. November 2009
![Page 25: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/25.jpg)
Use side effects
Montag, 16. November 2009
![Page 26: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/26.jpg)
Use side effects
Montag, 16. November 2009
![Page 27: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/27.jpg)
Montag, 16. November 2009
![Page 28: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/28.jpg)
["00300_car",
"00060_bike",
"00200_motorbike",
...]
[300, 60, 200, ...].sort()
Montag, 16. November 2009
![Page 29: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/29.jpg)
Montag, 16. November 2009
![Page 30: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/30.jpg)
Montag, 16. November 2009
![Page 31: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/31.jpg)
Demodojox.lang.functional.lambda
Montag, 16. November 2009
![Page 32: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/32.jpg)
Used where?
•AJAX
• jQuery, dojo, YUI, etc.
•$.each, $.map, ...
•$("div").css("color", "red")
•dojo.hitch()
•etc.
Montag, 16. November 2009
![Page 33: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/33.jpg)
Pros + Cons
•reduces cost
•simplify problems
•seperate concerns
•confidence++
• testability
• it's optional
•speed?
• think different
• learn when to use it
Montag, 16. November 2009
![Page 34: Functional Java Script - Webtechcon 2009](https://reader034.vdocuments.net/reader034/viewer/2022051817/547aa9e1b37959932b8b4b10/html5/thumbnails/34.jpg)
@wolframkriesing @uxebu
thx, Q&A
Montag, 16. November 2009