Functional Java Script - Webtechcon 2009

Functional JavaScriptPractical Tips, Tricks and Experiences

@wolframkriesing @uxebu

Montag, 16. November 2009


JavaScript AJAX

CSSdojo

Browser

OpenSourceWeb2.0FrontEnd

Usability

UserExperience

django

mobilewidgets


What is Functional Programming?



treats computation as the evaluation of mathematical functions

avoids state and mutable data

output value of a function depends only on the input


http://en.wikipedia.org/wiki/Immutable_object

http://en.wikipedia.org/wiki/Computation

http://en.wikipedia.org/wiki/Computation

http://en.wikipedia.org/wiki/Function_%28mathematics%29

http://en.wikipedia.org/wiki/Function_%28mathematics%29

http://en.wikipedia.org/wiki/Program_state



avoids state and mutable data






output value of a function depends only on the input


What is it?•programming style

functions, closures, arguments, scope

•mathemetics

•stay focused

•practical, pragmatic

• functions create scope!


Another Perspective

nums.slice(0,3)

take 3 nums


Demosum.html

http://static.uxebu.com/~cain/functional-examples/sum.html




Function creates scope

what else can?


•(function(){})()

•create scope

•(function(d){...})(dojo)

•reduce side effects

•prototype overriding can screw you!


•(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


Democreate-scope.html

http://static.uxebu.com/~cain/functional-examples/create-scope.html




Closures



Are you lazy!


You like to be?


Be lazy!


Lazy JavaScript...


ROXMontag, 16. November 2009

Demolazy.html

http://static.uxebu.com/~cain/functional-examples/lazy.html




Demohitch.html

http://static.uxebu.com/~cain/functional-examples/hitch.html




Use side effects


Use side effects



["00300_car",

"00060_bike",

"00200_motorbike",

...]

[300, 60, 200, ...].sort()




Demodojox.lang.functional.lambda


Used where?

•AJAX

• jQuery, dojo, YUI, etc.

•$.each, $.map, ...

•$("div").css("color", "red")

•dojo.hitch()

•etc.


Pros + Cons

•reduces cost

•simplify problems

•seperate concerns

•confidence++

• testability

• it's optional

•speed?

• think different

• learn when to use it


@wolframkriesing @uxebu

thx, Q&A


Technology

Functional Java Script - Webtechcon 2009