Functional Javascript

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    12 Favorites & 1 Group

    Functional Javascript - Presentation Transcript

    1. Functional Javascript function(i){return i}; Ben Nolan
    2. About me • New Zealander living in Munich • Blog at bennolan.com • Developer of Behaviour.js and Groupswiki • I promote functional-ish javascript
    3. Target Audience • Intermediate javascript developers that haven’t used prototypes enumerable functions. • People that don’t quite follow .bind and anonymous functions(){}
    4. Table of Contents • Why Functional? • Lambdas and binding • Enumerable functions • Examples • Takeaways
    5. Why Functional? • Many small functions - Bugs are reduced by this methodology • Code is more self-descriptive, promotes teamwork • Testing is simplified
    6. Why not functional? • Code looks obtuse to new developers return function(i){return this.calc(i)}.bind(this); • Prototype’s functional extensions are slower than native loops. This is getting better in later versions of prototype.
    7. Anonymous functions • Also known as Lambdas alert(function(){ return “hello”; }()); • Simply put - it’s a function that doesn’t have a name
    8. Benefit of the Lambda • Don’t have to pollute your scope with lots of function names. function mysort(x,y){return x<=>y}; ary.sort(mysort); or ary.sort(function(x,y){return x<>y});
    9. Benefit of the Lambda • Functions have their own scope. while(true){ var x = 5; // not locally scoped } function(){ var x = ‘a’; // locally scoped } • Easier to make idempotent functions - no stomping on other variables
    10. The bind Function • Bind is required because Javascript doesn’t automatically call methods in the correct scope • Bind returns an anonymous function that calls a method in the scope of the argument • (It’s a form of currying)
    11. Binding to a Banana function x(){ alert(this); } x(); // [object Window] y = x.bind('Banana!') y(); // [string Banana!]
    12. Binding to “this” Wrong: MyClass.prototype = { initialize : function(){ document.body.onclick = this.onclick(); }, onclick : function(){ this.doSomething(); }, doSomething : function(){ } }
    13. Binding to “this” Wrong: MyClass.prototype = { initialize : function(){ document.body.onclick = this.onclick; }, onclick : function(){ this.doSomething(); }, doSomething : function(){ } }
    14. Binding to “this” Right: MyClass.prototype = { initialize : function(){ document.body.onclick = this.onclick.bind(this); }, onclick : function(){ this.doSomething(); }, doSomething : function(){ } }
    15. Some idioms • Smaller functions are better. Less code means it’s easier to inspect and easier to test. Use lots of small functions.
    16. Some idioms • Idempotent functions are the ideal. ie Functions that don’t alter the dom or the properties of a object - they just return a value.
    17. Some idioms • Pragmatism not idealism. Start with dirty big functions - refactor to smaller nicer functions as you can.
    18. The Enumerables • Prototype introduces ruby-ish enumerable functions to javascript. • Convert a javascript array to an enumerable array with the $A() function. $A([1,2,3]);
    19. Enumerable Example • Old-style javascript: function getInsidesOf(ary){ var outp = new Array; for (i in ary){outp.push(i.innerHTML);} return outp; } (nb: this code alters the variable i in the global namespace - an easy mistake to make)
    20. Enumerable Example • Using functional Javascript: function getInsidesOf(ary){ return $A(ary).pluck(‘innerHTML’); }
    21. Cool enum. methods • Invoke(methodName) elements in the array invokes methodName on each • Pluck(propertyName) gathered from each element returns an array of the property in the array • inGroupsOf(integer) eg: [1,2,3,4,5] -> [[1,2],[3,4],[5]]
    22. Enums and lambdas • The most powerful enum methods require a function as an argument. • You can sort, filter and order with these tools.
    23. Lambdas and Enum. • Simplest example: return $A([1,2,3,4,5]).map( function(i){ return i+1; } }); // Returns [2,3,4,5,6]
    24. Lambdas and Enum. Create an • Simplest example: array with enum extensions return $A([1,2,3,4,5]).map( function(i){ return i+1; } }); // Returns [2,3,4,5,6]
    25. Lambdas and Enum. • Simplest example: return $A([1,2,3,4,5]).map( Anonymous function(i){ function return i+1; } }); // Returns [2,3,4,5,6]
    26. Filtering Elements • Get an array of selected checkboxes: $$(‘input[type=checkbox]’).select(function(el){ return el.selected; });
    27. Filtering Elements Get an array of input tags • $$(‘input[type=checkbox]’).select(function(el){ return el.selected; });
    28. Filtering Elements Call the select function • $$(‘input[type=checkbox]’).select(function(el){ return el.selected; });
    29. Filtering Elements Pass a function as an argument • $$(‘input[type=checkbox]’).select(function(el){ return el.selected; });
    30. Updating Elements • Empty the innerHTML of all A elements: $$(‘a’).each(function(el){ el.update(‘’); });
    31. How I structure apps • Use OO-style classes (class.create and object.extend) • Try and use a minimum of private properties in my classes - introspect the dom instead • Try and use idempotent functions
    32. Example code • I have a rich-text-editor written with Prototype. • Browsers use different markup IE Safari Mozilla strong <span style=..> em
    33. Example code • Convert bolded spans to <b> tags $$(\"span\").each(function(el){ if(el.getStyle('font-weight')=='bold'){ el.convertTo(‘B’); } });
    34. Example code • Find an element which has the style: “display:block” return this.getAncestors().find(function(el){ return el.getStyle('display') == 'block'; });
    35. Take aways • Use many small functions that are idempotent • Use enumerable functions • Use anonymous functions liberally • See prototypejs.org for more information

    + guest4d57e6guest4d57e6, 3 years ago

    custom

    4399 views, 12 favs, 2 embeds more stats

    Functional javascript presentation Ben Nolan showed more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 4399
      • 3989 on SlideShare
      • 410 from embeds
    • Comments 0
    • Favorites 12
    • Downloads 251
    Most viewed embeds
    • 365 views on http://bennolan.com
    • 45 views on http://www.bennolan.com

    more

    All embeds
    • 365 views on http://bennolan.com
    • 45 views on http://www.bennolan.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events