<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>LAMPlights &#187; javascript</title>
	<atom:link href="http://www.hermanradtke.com/blog/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.hermanradtke.com</link>
	<description>Personal anecdotes from my experiences using the LAMP stack</description>
	<lastBuildDate>Wed, 25 Jan 2012 18:14:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>managing multiple jQuery promises</title>
		<link>http://www.hermanradtke.com/blog/managing-multiple-jquery-promises/</link>
		<comments>http://www.hermanradtke.com/blog/managing-multiple-jquery-promises/#comments</comments>
		<pubDate>Fri, 13 May 2011 07:15:12 +0000</pubDate>
		<dc:creator>Herman Radtke</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[promise]]></category>

		<guid isPermaLink="false">http://www.hermanradtke.com/?p=696</guid>
		<description><![CDATA[The new jQuery 1.5 version has support for promises.  Promises allows code to be dependent on the completion of an asynchronous event.  Promises are most commonly used when making an AJAX request.  I recently had to solve a problem where I was issuing many AJAX requests and wanted to make sure all were completed before [...]]]></description>
			<content:encoded><![CDATA[<p>The new jQuery 1.5 version has support for promises.  Promises allows code to be dependent on the completion of an asynchronous event.  Promises are most commonly used when making an AJAX request.  I recently had to solve a problem where I was issuing many AJAX requests and wanted to make sure all were completed before moving on to the next task.  To make matters more complicated, I was issuing the requests using jsonp.  Some of the requests were chained from other requests as well.  Trying to track all the promises by individually was becoming a mess.  After speaking with a colleague, I set about creating a function to manage multiple promises.<span id="more-696"></span></p>
<p>If you are unfamiliar with promises, I suggest you read this <a title="Using Deferreds in jQuery 1.5" href="http://www.erichynds.com/jquery/using-deferreds-in-jquery/" target="_blank">article</a>.  I borrowed the code for managing multiple promises from <a title="Promise utilities for node" href="https://github.com/kriszyp/node-promise" target="_blank">https://github.com/kriszyp/node-promise</a>.  Essentially, we can use a promise to wrap many promises.  Only once the given set of promises are completely resolved does the wrapper promise resolve itself.  This is commonly called "all()".</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> all <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>array<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> deferred <span style="color: #339933;">=</span> $.<span style="color: #660066;">Deferred</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> fulfilled <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> length <span style="color: #339933;">=</span> array.<span style="color: #660066;">length</span><span style="color: #339933;">;</span>
    <span style="color: #003366; font-weight: bold;">var</span> results <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>length <span style="color: #339933;">===</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        deferred.<span style="color: #660066;">resolve</span><span style="color: #009900;">&#40;</span>results<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
        array.<span style="color: #660066;">forEach</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>promise<span style="color: #339933;">,</span> i<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
            $.<span style="color: #660066;">when</span><span style="color: #009900;">&#40;</span>promise<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">then</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>value<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                results<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> value<span style="color: #339933;">;</span>
                fulfilled<span style="color: #339933;">++;</span>
                <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>fulfilled <span style="color: #339933;">===</span> length<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                    deferred.<span style="color: #660066;">resolve</span><span style="color: #009900;">&#40;</span>results<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">return</span> deferred.<span style="color: #660066;">promise</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Looking at the implementation, the above function is pretty straightforward.  Let's look at an example on how to use it.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> users <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #3366CC;">'john'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'ringo'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'paul'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'george'</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> promises <span style="color: #339933;">=</span> <span style="color: #009900;">&#91;</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
&nbsp;
users.<span style="color: #660066;">forEach</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>user<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    promises.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">return</span> $.<span style="color: #660066;">Deferred</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>dfd<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            $.<span style="color: #660066;">get</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/account/'</span> <span style="color: #339933;">+</span> user<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
               dfd.<span style="color: #660066;">resolve</span><span style="color: #009900;">&#40;</span>data<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">promise</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
$.<span style="color: #660066;">when</span><span style="color: #009900;">&#40;</span>all<span style="color: #009900;">&#40;</span>promises<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">then</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>results<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #006600; font-style: italic;">// do something with the results</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>The above example is making a series of requests for account information on a list of users.  Looping over the array of users, we push an anonymous function into an array call promises.  This anonymous function simply gives all() something to execute when call it.  We then wrap each ajax request in a promise  using $.Deferred().  We specify a callback that is the ajax request and then call promise() on $.Deferred.  The effect of this is that the all() function will iterate of the array of promises and execute each anonymous function.  The anonymous function returns the promise and the all() function keeps track of the state of each promise.  Once all the promises have been resolved, the all() function will resolve itself internal promise.  This allows use to use the all() function as single argument to $.when() that represents a set of promises we are expecting to finish.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.hermanradtke.com/blog/managing-multiple-jquery-promises/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>PHP goes functional in version 5.3</title>
		<link>http://www.hermanradtke.com/blog/php-goes-functional-in-version-5-3/</link>
		<comments>http://www.hermanradtke.com/blog/php-goes-functional-in-version-5-3/#comments</comments>
		<pubDate>Sat, 13 Mar 2010 08:25:17 +0000</pubDate>
		<dc:creator>Herman Radtke</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[aop]]></category>
		<category><![CDATA[closure]]></category>
		<category><![CDATA[functional]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[li3]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[php53]]></category>
		<category><![CDATA[zendframework]]></category>

		<guid isPermaLink="false">http://www.hermanradtke.com/blog/?p=363</guid>
		<description><![CDATA[It has been said that all languages, over time, implement a dialect of lisp.  PHP appears to be no exception.  In PHP 5.3 lambda (or anonymous) functions and closures were added to the language.  These give PHP somewhat of a functional feel and can be very useful tools for solving problems.  One great example is [...]]]></description>
			<content:encoded><![CDATA[<p>It has been said that all languages, over time, implement a dialect of lisp.  <a class="zem_slink" title="PHP" rel="homepage" href="http://www.php.net/">PHP</a> appears to be no exception. <br />
<span id="more-363"></span><br />
In PHP 5.3 lambda (or anonymous) functions and closures were added to the language.  These give PHP somewhat of a functional feel and can be very useful tools for solving problems.  One great example is the <a href="http://rad-dev.org/lithium">Lithium</a> framework use of closures to implement filters.  Filters are an implementation of <a class="zem_slink" title="Aspect-oriented programming" rel="wikipedia" href="http://en.wikipedia.org/wiki/Aspect-oriented_programming">aspect oriented programming</a> (AOP).  Other frameworks, like <a class="zem_slink" title="Zend Framework" rel="homepage" href="http://framework.zend.com/">Zend Framework</a>, are looking at these new functional tools to streamline complex and/or heavy components.  I strongly believe that these new functional features will be the new "hotness" for PHP in the coming year.  Expect quite a few conference sessions and tutorials devoted this very topic.</p>
<p>All this talk of <a class="zem_slink" title="Functional programming" rel="wikipedia" href="http://en.wikipedia.org/wiki/Functional_programming">functional language</a> features is great, but Lithium is still in development, Zend Framework 2.0 is a ways away, you have an upcoming project deadline and you want to know how this stuff can help you now.  Easy: go read or watch JavaScript examples.  Seriously.  Watching <a class="zem_slink" title="Douglas Crockford" rel="homepage" href="http://crockford.com/">Douglas Crockford</a>'s videos on YUI theatre or reading through <a class="zem_slink" title="Ext (JavaScript library)" rel="homepage" href="http://extjs.com/">ExtJS</a> source code can give you really good insight into the power of functional language features.  The syntax may be different, but the core ideas are the same.</p>
<p>The new functional feel of PHP seems to have started a trend towards a unified constructor.  This has been a common practice in the JavaScript community for some time.  The great thing is that the PHP array is very similar to the JavaScript object.  In fact, the <a class="zem_slink" title="JSON" rel="homepage" href="http://json.org">JSON</a> extension to PHP makes them completely interchangeable.  Here is a quick example of one unified constructor implementation in PHP:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
&nbsp;
<span style="color: #000088;">$p</span> <span style="color: #339933;">=</span> <span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span>
    <span style="color: #0000ff;">'a'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #0000ff;">'hi'</span><span style="color: #339933;">,</span>
    <span style="color: #0000ff;">'adder'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000000; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #000088;">$n</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #b1b100;">return</span> <span style="color: #000088;">$n</span> <span style="color: #339933;">+</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span>
    <span style="color: #0000ff;">'c'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">,</span>
    <span style="color: #0000ff;">'d'</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000000; font-weight: bold;">new</span> stdClass
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">class</span> base <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">function</span> __construct<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span> <span style="color: #000088;">$params</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #b1b100;">foreach</span> <span style="color: #009900;">&#40;</span><span style="color: #000088;">$params</span> <span style="color: #b1b100;">as</span> <span style="color: #000088;">$key</span> <span style="color: #339933;">=&gt;</span> <span style="color: #000088;">$value</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #000088;">$this</span><span style="color: #339933;">-&gt;</span><span style="color: #000088;">$key</span> <span style="color: #339933;">=</span> <span style="color: #000088;">$value</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">class</span> foo <span style="color: #000000; font-weight: bold;">extends</span> base <span style="color: #009900;">&#123;</span> <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #000088;">$foo</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> foo<span style="color: #009900;">&#40;</span><span style="color: #000088;">$p</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>I have a bunch of ideas (some great, some maybe not so great) that I plan on implementing using lambda functions and closures.  I will be adding new components to my <a href="http://github.com/hradtke/crimson">Crimson</a> library and discussing them here.</p>
<div class="zemanta-pixie" style="margin-top: 10px; height: 15px;"><a class="zemanta-pixie-a" title="Reblog this post [with Zemanta]" href="http://reblog.zemanta.com/zemified/276ba760-1b29-4059-bb14-8c6143cf67fc/"><img class="zemanta-pixie-img" style="border: medium none; float: right;" src="http://img.zemanta.com/reblog_e.png?x-id=276ba760-1b29-4059-bb14-8c6143cf67fc" alt="Reblog this post [with Zemanta]" /></a><span class="zem-script more-related pretty-attribution"><script src="http://static.zemanta.com/readside/loader.js" type="text/javascript"></script></span></div>
]]></content:encoded>
			<wfw:commentRss>http://www.hermanradtke.com/blog/php-goes-functional-in-version-5-3/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>

