<?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>Digital Dim Sum &#187; visualisation</title>
	<atom:link href="http://www.digitaldimsum.co.uk/category/computing/visualisation/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.digitaldimsum.co.uk</link>
	<description>Bite sized info snacks for the digital generation</description>
	<lastBuildDate>Tue, 23 Jun 2009 16:58:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Build Transformation across an Organization</title>
		<link>http://www.digitaldimsum.co.uk/2008/04/17/build-transformation-across-an-organization/</link>
		<comments>http://www.digitaldimsum.co.uk/2008/04/17/build-transformation-across-an-organization/#comments</comments>
		<pubDate>Thu, 17 Apr 2008 06:55:07 +0000</pubDate>
		<dc:creator>jonny</dc:creator>
				<category><![CDATA[build]]></category>
		<category><![CDATA[computing]]></category>
		<category><![CDATA[consulting]]></category>
		<category><![CDATA[visualisation]]></category>

		<guid isPermaLink="false">http://www.digitaldimsum.co.uk/?p=34</guid>
		<description><![CDATA[<p>My most recent project was helping a major online retailer  to mature their build process as part of a wider effort to improve their IT effectiveness through the injection of development best practices.</p>
<p>When we came onboard manual intervention was needed for any of their builds or deployments to work and so it was rare for more than a couple of builds or deployments to be completed successfully in a day. Now we often have up to 1,000 builds running every day &#8211; what’s more the majority of them now pass!</p>
<p>This article looks at a few of the techniques we’ve had to put in place to enable this transformation and what we’ve learnt along the way.</p>
<p><!--more--></p>
<h3>Dividing up builds &#8211; separation of responsibilities</h3>
<p>Initially we had two versions of the build &#8211; one that would run on commit and a second that would only run at night. The two versions did pretty much the same things, except the nightly builds would deploy to a shared testing environment. Deployments only happened at night to avoid disruption to the multiple teams working in this shared environment (another smell to be dealt with later). The on-commit build did compilation, unit testing and packaging &#8211; the nightly build did the same and then handled environment preparation and deployment.<br />
There were a few problems with this:</p>
<ul>
<li>The on-commit builds ran slowly because they were doing a lot of work</li>
<li>The nightly builds were very brittle since responsibility for different parts of the build (compilation, packaging, deployment etc) was split among multiple teams &#8211; a failure at any step would mean QA didn&#8217;t have a new build to test that day</li>
<li>It wasn&#8217;t <a title="Don't Repeat Yourself" href="http://en.wikipedia.org/wiki/Don't_repeat_yourself">DRY</a></li>
</ul>
<p>Our solution was to divide the monolithic build up into several smaller steps and tie the steps together into a &#8220;build pipeline&#8221;, with each step triggered by a successfully completed &#8220;upstream&#8221; build. Our pipeline was divided into quick, assemble, package, deployment and regression builds. “Downstream” builds would pick up the artifacts prepared at the previous step in the build.</p>
<p>This lead to various beneﬁts:</p>
<ul>
<li>Each build ran more quickly</li>
<li>We didn&#8217;t repeat steps</li>
<li>It was easier to divide up responsibilities for keeping the different builds green:
<ul>
<li>Developers :: <em>quick</em> build (compilation + unit tests)</li>
<li>Build team :: <em>assemble</em> build (jar, war, ear creation etc)</li>
<li>Deployment team :: <em>package + deployment</em> (preparing RPMs / configuration / deploying)</li>
<li>QA team :: <em>regression suites</em></li>
</ul>
</li>
<li>Because we used the &#8220;last known good&#8221; upstream artifact, deployments weren&#8217;t blocked by a last minute problem upstream in the pipeline.</li>
<li>We were now in a position to split the builds up over more boxes to achieve greater throughput through parallelism</li>
</ul>
<p>This concept of dividing the responsibilities (at least for ﬁrst and second line build support) had a major impact on improving success rates and response times to failures through an increased sense of ownership of the process.</p>
<h3>Tying the builds together &#8211; HTTP publishing</h3>
<p>In an ideal world the input for a downstream build should be the output from an upstream build &#8211; the appearance of a new artifact from one build would trigger the next build down the chain. In our situation that wasn’t quite possible (the server topology and optimal dividing lines between builds, from a speed point of view, didn’t favor communicating via artifacts) so we took a different approach.</p>
<p>Our solution was for builds to communicate with each other via small properties ﬁles, published locally and accessed over HTTP. On successful completion each build publishes a properties ﬁle (to the local Cruise web-server) containing the build number and SVN revision of the build. We built a custom Cruise publisher to handle this. We also built a custom Cruise HTTP modiﬁcation-set to watch for upstream builds and an HTTP label-incrementer to keep all the build numbers in the pipeline in sync. The same build number is used through each of the steps of the build, making it easier to check whether changes have ﬂowed through to the QA environment – more on this later.</p>
<h3>Watching the river flow &#8211; visualizing the build pipeline</h3>
<p>Once we had divided up the builds and added further applications, we ended up with close to 100 builds that needed to be managed and monitored. Since they were spread across multiple boxes to increase throughput this wasn&#8217;t as easy as just watching one large cruise page. So we built a centralized page for aggregating together the build results.<br />
<img class="alignnone size-full wp-image-35" title="Dashboard" src="http://www.digitaldimsum.co.uk/wp-content/uploads/2008/04/dashboard.gif" alt="" width="433" height="191" /></p>
<p>The dashboard page was comprised of a few separate components:</p>
<ul>
<li>Current build status grid</li>
<li>Graph of passing v failing builds over time</li>
<li>Graph of build times per type / step in the pipeline</li>
<li>Quick list of which builds are currently broken</li>
<li>Some basic code metrics</li>
</ul>
<p>We also provided similar drill-down pages, filtered just to show data on a single application or step in the pipeline. These then link through to the actual Cruise pages for log files, failure reasons and test results.</p>
<h3>Current build status grid</h3>
<p>The current build status grid  was probably the greatest breakthrough. The basic idea was to show the  current status of all our builds in a simply structured manner. Over  a few iterations we evolved a grid structure (a bit like battleships!).  The columns in the grid represented steps in the build pipeline and  the rows the different applications we were building. The columns were  repeated for each active branch. Cells were then green if the build  was good, red if it was bad and yellow if the last build was good, but  was more than 24 hours old (stale). Mouseovers give more details about  the selected build, such as when it ran and what its build number was.</p>
<p><img class="alignnone size-full wp-image-37" title="status-grid" src="http://www.digitaldimsum.co.uk/wp-content/uploads/2008/04/status-grid.gif" alt="" width="434" height="308" /></p>
<p>From this view informative  patterns were clearly distinguishable with a cursory glance. It became  obvious if problems were localized or spread across a specific application  or step in the pipeline.</p>
<p>Initially we emailed a snapshot  of the grid first thing in the morning and at the end of the day to  management and the teams. This had the wonderful effect of halting all  the annoying questions and sparking the interesting ones. Instead of  people asking whether a build was successful or what build number was  last deployed to QA we got questions like:</p>
<ul>
<li>Why are all the    assembly builds broken?</li>
<li>Why is all of application X broken?</li>
<li>Why hasn’t application Y built for 2 days?</li>
<li>Why is there a build on the prod support branch?</li>
<li>Wow – everything’s green – shall we go to the pub?</li>
</ul>
<p>This definitely shone the spotlight  in a few uncomfortable places, but the visible improvements this lead  to made it worthwhile. It became an invaluable tool for educating people  about how the pipeline works. Once people understood and were reliant  on the data we replaced the emails with a dynamic, self-service, application  hosting the data.</p>
<h3>Graphing build metrics over time</h3>
<p>We also had great success with  some of our time-based visualizations. Simply graphing the times of  each step in the build pipeline over the last month quickly highlighted  problems as they developed. In one case we realized that all the packaging  builds were getting geometrically slower and slower – a quick bit  of research showed that each build was adding new artifacts to SVN and  the ensuing checkouts were suffering. We fixed this problematic practice  and had a massive positive impact on the total throughput of the pipeline.</p>
<p>The historic view of successful  vs. failing builds over time was also a particularly useful tool while  we were focusing on improving the stability of our deployments to QA  / UAT. This gave us a simple report on how we were doing – 50% success  last week, 75% this week – woo hoo!</p>
<h3>Sparklines</h3>
<p>We found a simple yet effective  way of communicating a large amount of information about how a build  has been performing by using “sparklines”.</p>
<p><img class="alignnone size-full wp-image-36" title="sparklines" src="http://www.digitaldimsum.co.uk/wp-content/uploads/2008/04/sparklines.gif" alt="" width="434" height="242" /></p>
<p>For a given build these graphs  communicate the number, duration and success of a large quantity of  builds. You can quickly get an idea of how things are trending. Again  mouseovers provide more details, context and drill down.</p>
<h3>Under the hood</h3>
<p>Initially the grid was generated  and emailed by a scheduled round-robin script hitting all the build  servers. But this was slow, required us to configure all the build server  addresses in one place, wasn’t fault tolerant and stored no build  history. So we moved the build telemetry dashboard to a simple Rails  webapp employing CSS wizardry for the visualizations. The data was populated  via a basic RESTful API. Each build has a custom HTTP publisher (again  we built this) that fired off a simple set of information about the  build in a POST request:</p>
<ul>
<li>Project name</li>
<li>Build label</li>
<li>Date / time</li>
<li>Build duration</li>
<li>Build successful</li>
<li>Hostname of the Cruise server</li>
</ul>
<h3>Build naming conventions</h3>
<p>The one extra key to making  this all work was standardizing the format of the Cruise project name  so we could parse out the application, branch and pipeline step without  adding any extra complicated meta-data. We chose “&lt;branch&gt;-&lt;application&gt;-&lt;step&gt;”  as our format, e.g. “trunk-bigapp-quick” or “3.20-littleapp-assemble”.</p>
<h3>Where’s my build?</h3>
<p>Using our custom label incrementer  meant that each build in the pipeline for a given SVN revision would  have the same build number (e.g. “trunk-bigapp-quick.123”, “trunk-bigapp-assemble.123”,  “trunk-bigapp-deploy.123”). This made it much easier for developers  and QA to work out what builds and features had made it through to the  QA environments. We built on this by providing a customized version  of the currents status grid to answer exactly that question – where’s  my build?</p>
<p><img class="alignnone size-full wp-image-38" title="wheres my build?" src="http://www.digitaldimsum.co.uk/wp-content/uploads/2008/04/wheres-my-build.gif" alt="" width="434" height="157" /></p>
<p>The grid displays the latest  build number at each step – clearly showing how far changes have progressed  and also highlighting how a broken step breaks the pipe. This has become  a vital self-service tool for the dev, QA and deployment teams, and  has saved the build team from a lot of very dull questions.</p>
<p>A growing awareness of the  importance of the pipeline has allowed us to devote efforts towards  optimizing the total throughput. All the good lean principles definitely  apply at this point – looking at optimizing the whole system and working  out where we’re queuing or waiting too much nearly always deliver  the best results.</p>
<h3>And the rest  …</h3>
<p>These tools freed us up to  use the build team as a beach-head for spreading general coding, development  and automation best practices throughout the organization. Some of these  included:</p>
<ul>
<li>Untangling spaghetti dependencies with Ivy</li>
<li>Spawning multiple virtual machines for regression testing</li>
<li>Automating Cruise configuration and version updates</li>
<li>A whole host of black-belt Ant Fu</li>
<li>Correlating multiple code metrics to drive code quality improvements</li>
</ul>
<p>But those are stories for another  occasion …</p>
<p>[This article was originally written for an internal ThoughtWorks innovation newsletter - I've made some minor edits for this blog]</p>
]]></description>
		<wfw:commentRss>http://www.digitaldimsum.co.uk/2008/04/17/build-transformation-across-an-organization/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Blocks of Code</title>
		<link>http://www.digitaldimsum.co.uk/2007/05/16/blocks-of-code/</link>
		<comments>http://www.digitaldimsum.co.uk/2007/05/16/blocks-of-code/#comments</comments>
		<pubDate>Wed, 16 May 2007 20:11:07 +0000</pubDate>
		<dc:creator>jonny</dc:creator>
				<category><![CDATA[coding]]></category>
		<category><![CDATA[visualisation]]></category>

		<guid isPermaLink="false">http://www.digitaldimsum.co.uk/2007/05/16/blocks-of-code/</guid>
		<description><![CDATA[<p>Coding really is become child&#8217;s play. This <a href="http://news.bbc.co.uk/2/hi/technology/6647011.stm" title="Free tool offers 'easy' coding" target="_blank">recent BBC news article</a> points to some of the ways kids are being introduced to programming.</p>
<p>The good people at MIT have put together <a href="http://scratch.mit.edu/" title="Scratch @ MIT" target="_blank">scratch</a>  a visual tool allowing kids to do drag-n-drop coding. The <a href="http://llk.media.mit.edu/projects/scratch/help/" title="Scratch help screens" target="_blank">help screens</a> give a good idea of how it works. Basically differently shaped blocks are put together (lego style) to form programs: a loop looks like a capital C and holds all the nested statements; booleans are pointy ended and only fit in pointy slots &#8211; likewise numbers are round and only fit in round slots &#8230; a nice simple introduction to strongly-typed languages. It actually fits pretty closely with how I visualise blocks of code, so it looks like a great way to introduce children to the coding mind-set. The welcoming colourful blocks are non-threatening and simple to understand.</p>
<p><!--more-->If that all seems too point-n-clicky then there are also <a href="http://hacketyhack.net/" title="HacketyHack" target="_blank">efforts to get kids using Ruby</a>. It&#8217;s a simple hosted and sandboxed service giving children the chance to write real programs &#8211; like a blog in just 6 lines.</p>
<p>This block caught my attention:</p>
<blockquote><p><strong>WHITHER ART THOU, BASIC??</strong></p>
<p>In the 1980s, a language called BASIC swept the countryside.  It was a language <strong>beginners          could use</strong> to make their computer speak, play music.  You could easily draw a big smiley face          or a panda or whatever you like!</p></blockquote>
<p>I&#8217;m interested in their choice of Ruby as the simple &#8220;gateway&#8221; language (the first one&#8217;s free, tell your mates), since there have been various discussions about whether Ruby is too complex or powerful for many inexperienced QA and dev teams to be *trusted* with.</p>
<p>It&#8217;ll be interesting to see how these kinds of tools are adopted. Either way I think some people at my current client could use a more pointy-clicky programming language &#8230;</p>
]]></description>
		<wfw:commentRss>http://www.digitaldimsum.co.uk/2007/05/16/blocks-of-code/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Show don&#8217;t tell: Consulting with GraphViz</title>
		<link>http://www.digitaldimsum.co.uk/2007/05/06/show-dont-tell-consulting-with-graphviz/</link>
		<comments>http://www.digitaldimsum.co.uk/2007/05/06/show-dont-tell-consulting-with-graphviz/#comments</comments>
		<pubDate>Sun, 06 May 2007 18:12:18 +0000</pubDate>
		<dc:creator>jonny</dc:creator>
				<category><![CDATA[build]]></category>
		<category><![CDATA[consulting]]></category>
		<category><![CDATA[visualisation]]></category>

		<guid isPermaLink="false">http://www.digitaldimsum.co.uk/2007/05/06/show-dont-tell-visual-consulting-with-graphviz/</guid>
		<description><![CDATA[<p>I&#8217;ve often found that it&#8217;s much more effective to <em>show </em>clients what their problems are, rather than just <em>telling </em>them. Recently I&#8217;ve ended up using <a href="http://www.graphviz.org/" title="GraphViz" target="_blank">GraphViz </a>as a great tool for high-lighting complexity that needs to be addressed.</p>
<p>At the client I&#8217;m currently working for the complexity of the build scripts was getting out of hand. I wanted to goad the customer into prioritising some simplification work. So I turned to GraphViz to depict how complex the build was. The build we&#8217;re using is a large, centralised, Ant script that builds about 10 different applications. It manages everything through the process of compile, test, package and deploy.</p>
<p>I found the <a href="http://ant2dot.sourceforge.net/" title="ant2dot.xsl" target="_blank">handy ant2dot.xsl tool</a> that uses XSL  to transform an Ant build file into a DOT format graph representing the flow and dependencies between the various build targets.</p>
<p><!--more--></p>
<h3>Before</h3>
<p>The picture that emerged was pretty shocking:</p>
<p style="text-align: center"><img src="http://www.digitaldimsum.co.uk/wp-content/uploads/2007/05/build-scripts-before.png" alt="Before: build script target dependencies" /></p>
<p>Even printed out on the largest paper the client&#8217;s printer could handle you still couldn&#8217;t even read the target names. Images of the <a href="http://www.venganza.org/" title="Flying Spaghetti Monster" target="_blank">Flying Spaghetti Monster</a> kept jumping into my mind. But the tactic worked and when I showed the client the picture in our Iteration Planning Meeting they were quick to prioritise some work to simplify the build process.</p>
<h3>After</h3>
<p>After a month or so of gradual re-structuring and simplification I repeated the visualisation exercise to see how we were doing. The results were pretty striking:</p>
<p style="text-align: center"><img src="http://www.digitaldimsum.co.uk/wp-content/uploads/2007/05/build-scripts-after.png" alt="After: build script target dependencies" /></p>
<p>Needless to say the pictures told more than a thousand words could: the client was happy, we had a neater picture to help developers understand how the build scripts worked AND the builds were simpler.</p>
]]></description>
		<wfw:commentRss>http://www.digitaldimsum.co.uk/2007/05/06/show-dont-tell-consulting-with-graphviz/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
