Functional Java Script - Webtechcon 2009

Functional JavaScriptPractical Tips, Tricks and Experiences

@wolframkriesing @uxebu

Montag, 16. November 2009

Montag, 16. November 2009

JavaScript AJAX

CSSdojo

Browser

OpenSourceWeb2.0FrontEnd

Usability

UserExperience

django

mobilewidgets

Montag, 16. November 2009

What is Functional Programming?

Montag, 16. November 2009

Montag, 16. November 2009

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

avoids state and mutable data

Montag, 16. November 2009

output value of a function depends only on the input

Montag, 16. November 2009

What is it?•programming style

functions, closures, arguments, scope

•mathemetics

•stay focused

•practical, pragmatic

• functions create scope!

Montag, 16. November 2009

Another Perspective

nums.slice(0,3)

take 3 nums

Montag, 16. November 2009

Demosum.html

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

Montag, 16. November 2009

Function creates scope

what else can?

Montag, 16. November 2009

•(function(){})()

•create scope

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

•reduce side effects

•prototype overriding can screw you!

Montag, 16. November 2009

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

Democreate-scope.html

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

Montag, 16. November 2009

Closures

Montag, 16. November 2009

Montag, 16. November 2009

Are you lazy!

Montag, 16. November 2009

You like to be?

Montag, 16. November 2009

Be lazy!

Montag, 16. November 2009

Lazy JavaScript...

Montag, 16. November 2009

ROXMontag, 16. November 2009

Demolazy.html

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

Montag, 16. November 2009

Demohitch.html

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

Montag, 16. November 2009

Use side effects

Montag, 16. November 2009

Use side effects

Montag, 16. November 2009

Montag, 16. November 2009

["00300_car",

"00060_bike",

"00200_motorbike",

...]

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

Montag, 16. November 2009

Montag, 16. November 2009

Montag, 16. November 2009

Demodojox.lang.functional.lambda

Montag, 16. November 2009

Used where?

•AJAX

• jQuery, dojo, YUI, etc.

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

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

•dojo.hitch()

•etc.

Montag, 16. November 2009

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

@wolframkriesing @uxebu

thx, Q&A

Montag, 16. November 2009