SlideShare a Scribd company logo
Functional JavaScript
                            Practical Tips, Tricks and Experiences




                                @wolframkriesing     @uxebu




Montag, 16. November 2009
Montag, 16. November 2009
JavaScript Usability            AJAX
              Browser             mobile
     django                           widgets




   FrontEnd                              dojo
                            OpenSource
   Web2.0 CSS                  UserExperience
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
Demo
                                                 sum.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(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
Demo
                                               create-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
ROX
Montag, 16. November 2009
Demo
                                                  lazy.html



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




Montag, 16. November 2009
Demo
                                                 hitch.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
Demo
                            dojox.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
                               • speed?
           • seperate concerns think different
                               •
           • confidence++
                               • learn when to use it
           • testability
           • it's optional
Montag, 16. November 2009
thx, Q&A




                            @wolframkriesing   @uxebu




Montag, 16. November 2009

More Related Content

Similar to Functional Java Script - Webtechcon 2009 (20)

Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
Using The Page Object Pattern
Using The Page Object Pattern
Dante Briones
 
Enterprise javascriptsession3
Enterprise javascriptsession3
Troy Miles
 
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
Caue Guerra
 
The View - Lotusscript coding best practices
The View - Lotusscript coding best practices
Bill Buchan
 
Intro to JavaScript
Intro to JavaScript
Dan Phiffer
 
GeekCamp SG 2009 - CouchApps with CouchDB
GeekCamp SG 2009 - CouchApps with CouchDB
Arun Thampi
 
Back To The Future.Key 2
Back To The Future.Key 2
gueste8cc560
 
D5 crazy speed web development
D5 crazy speed web development
NAVER D2
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
Lê Thưởng
 
Introduction to Functional Programming
Introduction to Functional Programming
Dave Fancher
 
JavaScript Neednt Hurt - JavaBin talk
JavaScript Neednt Hurt - JavaBin talk
Thomas Kjeldahl Nilsson
 
Booting into functional programming
Booting into functional programming
Dhaval Dalal
 
25 Debugging
25 Debugging
Hadley Wickham
 
Sharable of qualities of clean code
Sharable of qualities of clean code
Eman Mohamed
 
Boost your-oop-with-fp
Boost your-oop-with-fp
Uberto Barbini
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
Rebecca Murphey
 
MUp Early Preview V6
MUp Early Preview V6
Michele Mostarda
 
Ruby World
Ruby World
evanphx
 
Functional Programming Introduction
Functional Programming Introduction
Roberto Lopez
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
Using The Page Object Pattern
Using The Page Object Pattern
Dante Briones
 
Enterprise javascriptsession3
Enterprise javascriptsession3
Troy Miles
 
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
Caue Guerra
 
The View - Lotusscript coding best practices
The View - Lotusscript coding best practices
Bill Buchan
 
Intro to JavaScript
Intro to JavaScript
Dan Phiffer
 
GeekCamp SG 2009 - CouchApps with CouchDB
GeekCamp SG 2009 - CouchApps with CouchDB
Arun Thampi
 
Back To The Future.Key 2
Back To The Future.Key 2
gueste8cc560
 
D5 crazy speed web development
D5 crazy speed web development
NAVER D2
 
Lecture 03 - JQuery.pdf
Lecture 03 - JQuery.pdf
Lê Thưởng
 
Introduction to Functional Programming
Introduction to Functional Programming
Dave Fancher
 
Booting into functional programming
Booting into functional programming
Dhaval Dalal
 
Sharable of qualities of clean code
Sharable of qualities of clean code
Eman Mohamed
 
Boost your-oop-with-fp
Boost your-oop-with-fp
Uberto Barbini
 
Using Objects to Organize your jQuery Code
Using Objects to Organize your jQuery Code
Rebecca Murphey
 
Ruby World
Ruby World
evanphx
 
Functional Programming Introduction
Functional Programming Introduction
Roberto Lopez
 

More from wolframkriesing (20)

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functions
wolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeister
wolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
wolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)
wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behind
wolframkriesing
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
wolframkriesing
 
Baby steps
Baby steps
wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google Spreadsheets
wolframkriesing
 
ECMAScript 6 for real
ECMAScript 6 for real
wolframkriesing
 
Refactoring out of the mess
Refactoring out of the mess
wolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meant
wolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing
 
Better Code through TDD
Better Code through TDD
wolframkriesing
 
April JavaScript Tools
April JavaScript Tools
wolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevcon
wolframkriesing
 
EmbedJS
EmbedJS
wolframkriesing
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
wolframkriesing
 
JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functions
wolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeister
wolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
wolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)
wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behind
wolframkriesing
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google Spreadsheets
wolframkriesing
 
Refactoring out of the mess
Refactoring out of the mess
wolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meant
wolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevcon
wolframkriesing
 
JavaScript Tools (PHPConference 2011, Berlin)
JavaScript Tools (PHPConference 2011, Berlin)
wolframkriesing
 
Ad

Recently uploaded (20)

Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptx
FIDO Alliance
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
No-Code Workflows for CAD & 3D Data: Scaling AI-Driven Infrastructure
Safe Software
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
Analysis of the changes in the attitude of the news comments caused by knowin...
Analysis of the changes in the attitude of the news comments caused by knowin...
Matsushita Laboratory
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
Crypto Super 500 - 14th Report - June2025.pdf
Crypto Super 500 - 14th Report - June2025.pdf
Stephen Perrenod
 
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
War_And_Cyber_3_Years_Of_Struggle_And_Lessons_For_Global_Security.pdf
biswajitbanerjee38
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
“Addressing Evolving AI Model Challenges Through Memory and Storage,” a Prese...
Edge AI and Vision Alliance
 
Artificial Intelligence in the Nonprofit Boardroom.pdf
Artificial Intelligence in the Nonprofit Boardroom.pdf
OnBoard
 
Ad

Functional Java Script - Webtechcon 2009

  • 1. Functional JavaScript Practical Tips, Tricks and Experiences @wolframkriesing @uxebu Montag, 16. November 2009
  • 3. JavaScript Usability AJAX Browser mobile django widgets FrontEnd dojo OpenSource Web2.0 CSS UserExperience Montag, 16. November 2009
  • 4. What is Functional Programming? Montag, 16. November 2009
  • 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. avoids state and mutable data Montag, 16. November 2009
  • 8. output value of a function depends only on the input Montag, 16. November 2009
  • 9. What is it? • programming style functions, closures, arguments, scope • mathemetics • stay focused • practical, pragmatic • functions create scope! Montag, 16. November 2009
  • 10. Another Perspective nums.slice(0,3) take 3 nums Montag, 16. November 2009
  • 11. Demo sum.html http://static.uxebu.com/~cain/functional-examples/sum.html Montag, 16. November 2009
  • 12. Function creates scope what else can? Montag, 16. November 2009
  • 13. •(function(){})() • create scope •(function(d){...})(dojo) • reduce side effects • prototype overriding can screw you! Montag, 16. November 2009
  • 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. Demo create-scope.html http://static.uxebu.com/~cain/functional-examples/create-scope.html Montag, 16. November 2009
  • 18. Are you lazy! Montag, 16. November 2009
  • 19. You like to be? Montag, 16. November 2009
  • 20. Be lazy! Montag, 16. November 2009
  • 23. Demo lazy.html http://static.uxebu.com/~cain/functional-examples/lazy.html Montag, 16. November 2009
  • 24. Demo hitch.html http://static.uxebu.com/~cain/functional-examples/hitch.html Montag, 16. November 2009
  • 25. Use side effects Montag, 16. November 2009
  • 26. Use side effects Montag, 16. November 2009
  • 28. ["00300_car", "00060_bike", "00200_motorbike", ...] [300, 60, 200, ...].sort() Montag, 16. November 2009
  • 31. Demo dojox.lang.functional.lambda Montag, 16. November 2009
  • 32. Used where? • AJAX • jQuery, dojo, YUI, etc. • $.each, $.map, ... • $("div").css("color", "red") • dojo.hitch() • etc. Montag, 16. November 2009
  • 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. thx, Q&A @wolframkriesing @uxebu Montag, 16. November 2009