SlideShare ist ein Scribd-Unternehmen logo
1 von 34
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Ähnlich wie Functional Java Script - Webtechcon 2009

2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 20092009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
Caue Guerra
 
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
eCommConf
 
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case StudyTERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
Terminalfour
 
The Social Desktop - Keynote Akademy 2008
The Social Desktop - Keynote Akademy 2008The Social Desktop - Keynote Akademy 2008
The Social Desktop - Keynote Akademy 2008
Frank Karlitschek
 

Ähnlich wie Functional Java Script - Webtechcon 2009 (20)

2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 20092009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
2009, o ano do Ruby on Rails no Brasil - CaelumDay 2009
 
Processing
ProcessingProcessing
Processing
 
NoTube User Model slides
NoTube User Model slidesNoTube User Model slides
NoTube User Model slides
 
Caching, sharding, distributing - Scaling best practices
Caching, sharding, distributing - Scaling best practicesCaching, sharding, distributing - Scaling best practices
Caching, sharding, distributing - Scaling best practices
 
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
Wireframing Web 2.0  for Design and  Definition: London IA UXLondon reduxWireframing Web 2.0  for Design and  Definition: London IA UXLondon redux
Wireframing Web 2.0 for Design and Definition: London IA UXLondon redux
 
Software livre e padrões abertos no desenvolvimento Web
Software livre e padrões abertos no desenvolvimento WebSoftware livre e padrões abertos no desenvolvimento Web
Software livre e padrões abertos no desenvolvimento Web
 
How OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your HairHow OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
How OpenNTF Open Source Solutions Can Save You Time, Money And Your Hair
 
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
Gerd Leonhard Presentation at Emerging Communication Conference & Awards 2009...
 
Btree Nosql Oak
Btree Nosql OakBtree Nosql Oak
Btree Nosql Oak
 
Strategies Tech It Up
Strategies Tech It UpStrategies Tech It Up
Strategies Tech It Up
 
Vladimir Oane
Vladimir OaneVladimir Oane
Vladimir Oane
 
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case StudyTERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
TERMINALFOUR t44u 2009 - Permanent TSB & iQ Content Case Study
 
The State of the Social Desktop 2009
The State of the Social Desktop 2009The State of the Social Desktop 2009
The State of the Social Desktop 2009
 
Cloudera Desktop
Cloudera DesktopCloudera Desktop
Cloudera Desktop
 
Cross platform development
Cross platform developmentCross platform development
Cross platform development
 
The Social Desktop - Keynote Akademy 2008
The Social Desktop - Keynote Akademy 2008The Social Desktop - Keynote Akademy 2008
The Social Desktop - Keynote Akademy 2008
 
Rango
RangoRango
Rango
 
JavaScript for PHP Developers
JavaScript for PHP DevelopersJavaScript for PHP Developers
JavaScript for PHP Developers
 
Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009Mobile Apps Cross Platform - Droidcon 2009
Mobile Apps Cross Platform - Droidcon 2009
 
Vodafone 360 - Live Porting
Vodafone 360 - Live PortingVodafone 360 - Live Porting
Vodafone 360 - Live Porting
 

Mehr von wolframkriesing

react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
wolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
wolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
wolframkriesing
 

Mehr von wolframkriesing (20)

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

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 

Functional Java Script - Webtechcon 2009