Mrinal Wadhwa

The Art of Software Maintenance

Mrinal Wadhwa — Wed, 12 Oct 2011 06:43:15 +0000

Yesterday, I gave a presentation to team of young and enthusiastic software developers on processes and practices that they must adopt as their team grows and matures.

The presentation tried to use Robert M. Pirsig’s philosophical exploration of quality in his book Zen and the Art of Motorcycle Maintenance as a basis to explore — what is good quality software and things you should do as teams and individuals when trying to produce good quality software.

“What’s new?” is an interesting and broadening eternal question, but one which, if pursued exclusively, results only in an endless parade of trivia and fashion, the silt of tomorrow.

I would like, instead, to be concerned with the question “What is best?” a question which cuts deeply rather than broadly, a question whose answers tend to move the silt downstream.

Robert M. Pirsig, Zen and the Art of Motorcycle Maintenance

We discussed how I agree with Andrew Hunt and David Thomas, that all programming is maintenance programming and other fundamental ideas that good software teams should be concerned with, like how to strike a balance between Featuritis vs. the Happy User Peak

Other approaches, ideas, and practices that we discussed and those that I’ve learned to embrace over the years are discussed in some of the following articles and books that I highly recommend to anyone who is involved with building and/or delivering software in any role.

Articles
All Programming is Maintenance Programming
The Noble Art of Maintenance Programming
12 Steps to Better Code
Don’t Live with Broken Windows
Technical Debt
Technical Debt
Paying Down Your Technical Debt
Featuritis vs. the Happy User Peak
The First Rule of Programming: It’s Always Your Fault
Painless Bug Tracking
The F5 Key Is Not a Build Process
The Road To Build Enlightenment
Daily Builds Are Your Friend
The Build Server: Your Project’s Heart Monitor
The “Works on My Machine” Syndrome
I Pity The Fool Who Doesn’t Write Unit Tests
Twelve Benefits of Writing Unit Tests First
Code Tells You How, Comments Tell You Why
Discipline Makes Strong Developers
The Law of Leaky Abstractions
Programming by Coincidence
Coding: It’s Just Writing

Books
The Pragmatic Programer
Code Complete
The Mythical Man-Month: Essays on Software Engineering
Facts and Fallacies of Software Engineering
Peopleware: Productive Projects and Teams
Software Conflict 2.0: The Art and Science of Software Engineering
Head First Software Development
Clean Code: A Handbook of Agile Software Craftsmanship
The Design of Design: Essays from a Computer Scientist
Test Driven Development: By Example

If you have other similar recommendations, please do share.

Binary Programming in JavaScript

Mrinal Wadhwa — Sun, 02 Oct 2011 23:26:16 +0000

I presented at jsFoo this Saturday on working with binary data in JavaScript, here are the slides …

Thank you, to every one who came, I would love to know your feedback.

Loop unwinding, for fast loops in AS3

Mrinal Wadhwa — Mon, 22 Nov 2010 06:27:32 +0000

I’ve been working on optimizing some javascript code these days and I came across a technique for optimizing long loops called Duff’s Device or Loop Unwinding which seems pretty well known in the javascript world but I haven’t seen anyone use it in actionscript code.

The basic idea is that there is a small overhead associated with executing the loop body, so if we unfold the loop in a way that it does the work of 8 iterations in 1 iteration, we can save some time. My tests show that in long enough loops this technique can give us 8x to 10x performance gain.

Here are the results of my tests using Grant Skinner’s performance test harness …

Here are the actual test cases .. I borrowed the implementation from Miller Medeiros’ javascript test cases and Jeff Greenberg’s original javascript implementation …

Data Binding with Signals

Mrinal Wadhwa — Sat, 29 May 2010 04:01:12 +0000

I haven’t talked much about our startup project factors on this blog yet, but you will hear more and more about it from me over the coming weeks. Today, we’re open sourcing a very small but quite interesting part of the factors web client code. The client is built mostly in AS3 using an in house framework we call crayons. Crayons provides an application architecture as well as a library of user interface components along with a component architecture, you could think of it as a mixture of functionality provided by flex framework and cairngorm, but several times lighter since it only implements functionality we need for factors and doesn’t try to be too generic.

Among other things Crayons has a built in data binding framework which we’re open sourcing today. Data binding in crayons in based on Signals where an object dispatches a specialized ChangeSignal whenever a bindable property changes, for example the setter of a bindable property data in SomeModel object would look like this …

When an object signals a change in a property it has to pass in the old value of the property and the new value of the property. Unlike Flex, there is no [Bindable] metadata tag, an object can make one of its properties bindable by dispatching a ChangeSignal whenever that property changes. The ChangeSignal implementation is inspired by Jackson Dunstan’s TurboSignals instead of Rob Penner’s more flexible AS3Signals library because using a specialized signal made sense in this scenario .. just like flex, signaling a change in a property is something we do a lot in a crayons application, for example to signal change in model data or change in the property of a component, for data binding etc. so taking advantage of the speed of a specialized signal seemed reasonable. Also this especially helps data binding, since a Binding is really an implmentation of a ChangeSlot and Jackson’s already shown that such specialized slots are extremely fast. While in most cases its hard to justfy implementing a Slot interface just to add a listener and I would almost always go with adding a function listener, but in case of data binding since this is only used internally within the binding framework and the user of data binding is not bothered with it, implmentating a ChangeSlot was perfectly reasonable.

Now to use crayons data binding you can use a Binder object to bind a source ChangeSignal to a target property as follows …

The Binder class provides some other interesting apis to remove binding or to check if a binding exists. This binding implementation is heavily inspired from Eric Feminella’s implementation where he’s used as3signals. I refactored it for use with ChangeSignal and ChangeSlot and changed some other APIs for our needs.

That’s about it, you can get the complete crayons binding framework source code here on Github, do let me know what you think, any feedback would be very welcome.

Finally, I want to say thank you to Jackson Dunstan, Eric Feminella and Rob Penner who’s great work and research helped me implement this. I’ll buy you guys beer whenever we get a chance to meet

Preloaders in AS3

Mrinal Wadhwa — Fri, 02 Apr 2010 16:19:37 +0000

Update: Troy Gilbert suggested a much better solution for this in the comments below that uses -frame compiler option over the [Frame] metadata tag, I suggest you use his approach since it stops the compiler from bundling in Flex framework specific code like IFlexModuleFactory that you don’t really need.

Update: Troy further improved his class here

***

Today, I needed to create a preloader for a pure AS3 application compiled with mxmlc. I couldn’t find much documentation on the topic but this post by Keith Peters describes the solution in good detail, except his post is some what old and the code there doesn’t work with the latest compiler..

As Keith describes, the first thing you need to do to implement a preloader is move your application to the second frame of the movie, this is done by adding a [Frame] metadata tag above your document class and providing it with a factory class that will initialize your application, in case of Flex this factory is mx.core.SystemManager .. we will have to write our own.

Your document class would now look something like this …

Our ApplicationLoader factory class has to extend MovieClip (not Sprite) and has to implement the interface mx.core.IFlexModuleFactory (this is the main change since Keith’s post). In the below code, I’ve stubbed out functions from IFlexModuleFactory and you can leave the code as is for most applications, you will only need to change this if your application loads other SWF’s at runtime or if you’re building an AIR application.

When we compile our Example application the compiler will generate a class (you can see it with -keep) that subclasses our ApplicationLoader factory and implements some additional functionality .. an instance of this sits in the first frame of our movie, loads the second frame that has our application and shows a preloader while the application loads …

You may change the look of your preloader in the onEnterFrame method but since this first frame needs to load quickly keep it light and avoid using any classes that are not native to Flash Player.

Finally thank’s to Keith for his post that got me started and also for all the other cool stuff I’ve learned from him over the years.

SWF Machine: generating SWF binary from Erlang

Mrinal Wadhwa — Tue, 16 Mar 2010 22:38:27 +0000

SWF Machine is an Erlang program I’ve been writing, to generate SWF files from Erlang. This program takes a custom instruction set as input and generates SWF binary instructions, which once saved in an SWF file can be run in the Flash Player, here’s a quick demo of SWFMachine in action …

A similar attempt by Takashi Yamamiya and the eswf library on google code were quite helpful in getting me started, so thanks to them for sharing.

Magic in Graphs

Mrinal Wadhwa — Sun, 28 Feb 2010 09:36:07 +0000

I found a digital copy of Williard C. Brinton’s 1939 book “Graphic Presentation” via twitter and as I read through the book, it amazed me how little our data visualization techniques have evolved since Brinton wrote the book 70+ years ago. What was even more fascinating was this quote from the preface to the book by Henry D. Hubbard who worked for the U.S, National Bureau of Standards …

“There is a magic in graphs. The profile of a curve reveals in a flash a whole situation —the life history of an epidemic, a panic, or an era of prosperity. The curve informs the mind, awakens the imagination, convinces.”

– Henry D. Hubbard

These words so aptly describe the power of visualizing data.

Here are some interesting snapshots from the book, which I highly recommend checking out …

Erlang Web Server Benchmarks

Mrinal Wadhwa — Fri, 12 Feb 2010 04:58:04 +0000

Over the last few weeks I’ve been writing a server side web application framework for Erlang. Essentially, I looked at various available erlang frameworks like WebMachine, Nitrogen, BeepBeep, Yaws, ErlyWeb etc. and pulled out and assembled my own little framework with features I needed. I’ve also been writing an Erlang library for encoding/decoding AMF which will help me add some interesting Flash/Flex specific features to this framework.

Among other things this framework provides web server library specific request/response format abstraction similar to SimpleBridge, A Django templates implementation using ErlyDTL, an MVC implementation inspired from ErlyWeb and a lot more. Even with all this functionality I’m quite happy with the performance we’re able to achieve, so I thought I’d share some benchmarks with everyone.

Since the framework completely abstracts out the web server library used, I was able to try out various web options, but I think we’ll stick with Misultin for our production enviornment since it seems to perform significantly better than other implementations. Here are the results of running AutoBench on our framework powered by Misultin.

The server was running on an m1.large amazon instance running ubuntu and the tests was run from an m1.small amazon instance.

$ autobench --single_host --host1 xyz.com --quiet --low_rate 20 --high_rate 200 --rate_step 20 --num_call 100 -num_conn 5000 --timeout 5 --file results.tsv

Here are some more tests using a different tool Apache Bench
$ ab -k -n 500000 -c 1000 http://xyz.com/


Document Path:          /

Document Length:        27 bytes
Concurrency Level:      1000

Time taken for tests:   39.937 seconds

Complete requests:      500000

Failed requests:        0

Write errors:           0

Keep-Alive requests:    500000

Total transferred:      57510350 bytes

HTML transferred:       13502430 bytes

Requests per second:    12519.82 [#/sec] (mean)

Time per request:       79.873 [ms] (mean)

Time per request:       0.080 [ms] (mean, across all concurrent requests)

Transfer rate:          1406.29 [Kbytes/sec] received
Connection Times (ms)

              min  mean[+/-sd] median   max

Connect:        0    2  71.8      0    3005

Processing:     1   78  25.9     77     732

Waiting:        1   78  25.9     77     732

Total:          1   80  79.3     77    3427
Percentage of the requests served within a certain time (ms)

  50%     77

  66%     87

  75%     94

  80%     98

  90%    110

  95%    119

  98%    132

  99%    144

 100%   3427 (longest request)

Running the ab test without the keep alive (-k) option, causes the request rate to fall drastically to around the 3600 r/sec level but looking at the Tornado performance tests here, 3600 seems reasonably good. I haven’t tried adding nginx similar to that Tornado setup, not sure if that would help.

An Introduction to Rich Internet Applications

Mrinal Wadhwa — Sat, 23 Jan 2010 20:48:19 +0000

I had the opportunity to present a 4.5 hr lecture on Building Rich Internet Applications at ACM’s Compute 2010 today. We started out by defining what an RIA is and exploring the various RIA platforms available, we then further explored the Flash Platform in more detail, wrote some experimental code to understand the internals of Flash Player, looked at Flex 4 and its various new features and also spent some time understanding the Flex Component Lifecycle

Here’s the slide deck from beginning of the lecture which tries to define what an RIA is and explores the architecture a typical RIA platform …

Going Commando in Flash Builder

Mrinal Wadhwa — Thu, 03 Dec 2009 01:49:35 +0000

Along with the Custom Components in Flex 4 presentation I shared yesterday, I also gave a 15 minute lightening talk at Adobe DevSummit on Keyboard Productivity in Flash Builder, this was just a quick show and tell where I walked people through various ways of what Jeff Atwood calls Going Commando …

Shortcuts

Here are some Flash Builder Keyboard shortcuts I use very frequently, if you have suggestions on others that are especially handy, please let me know …

CMD + 3	- the swiss knife of a commando, jump to anywhere inside eclipse
CMD + SHIFT + T	- find type
CMD + SHIFT + R	- find resource
CMD + O	- find/jump within class
CMD + E	- switch editors (CMD 3 also works for this)
CMD + D	- delete line which has cursor, without having to select
ALT + Up/Down Arrows	- Move Line/Selection Up/Down
ALT + CMD + Up/Down Arrows	- Copy Line/Selection Up/Down
CMD + W	- Close tab

* CMD on OSX = CTRL on Windows

Customize

If you press CMD+3 and type “keys”, you’ll see the keyboard customization preferences panel for Flash Builder, I recommend spending some time customizing Builder for your own needs, for example I use CMD+1 and CMD+2 to switch between Develop/Debug perspectives. I barely use the NumPad on my keyboard so I’ve customized it to be all keyboard shortcuts, pressing CMD+0 inserts snippets

Snippets

Having a good snippets plugin can greatly improve a developer’s productivity, I love how Snippets work in TextMate, I’m still searching for a good solution for this in Flash Builder, till now I’ve been using CFEclipse’s SnipTreeView but the problem is it only works with AS3 code and can’t handle MXML. I was so desperate one day that I figured out that it fails because the CFEclipse InsertSnippetAction class on Line No 71 assumes that the editor is an ITextEditor, while this is true for most Eclipse editors, the MXML editor is actually made of 2 editors a Design Editor and an ITextEditor, so the type cast on Line 71 fails … I never got to building CFEclipse on my own though. But, it looks like Lee Brimelow did, he has released a fix which makes SnipTreeView work with MXML editor, unfortunately though Lee’s fix doesn’t work for me because of a Java version issue on OSX Leopard.

Another handy Mac only tool is TextExpander. It sometimes breaks your formatting in eclipse, but that has gotten better with Flash Builders new auto formatting improvements.

Multi Clipboard

A multi-clipboard tool is another must have for all developers, I use Jumpcut on OSX and it is a big big productivity boost to not have switch between files and applications when copying and pasting. I don’t know any good equivalent for Windows, so if you know of one, please let me know.

Finally, I have to thank Chetan Sachdev because he got me hooked to optimizing my workflow using the keyboard while we were working together on a project earlier this year.

I would love to know if you have any other handy tips on Going Commando.

Custom Components in Flex 4

Mrinal Wadhwa — Tue, 01 Dec 2009 11:21:21 +0000

I gave a presentation on Custom Components in Flex 4 at Adobe Devsummit last week in Chennai and today in Hyderabad, here’s the slidedeck where we create an Imperial StormTrooper component

Flash, Erlang and Realtime Collaborative Interfaces

Mrinal Wadhwa — Sat, 28 Nov 2009 02:49:20 +0000

I’ve been learning Erlang for the past few weeks and loving the simplicity and beauty of the language. As part of a discussion at SAP TechEd, last week, I ended up creating a simple, rather rudimentary prototype of a realtime messaging server that enables collaborative user interfaces where multiple users can simultaneously work with the same interface …

Here’s a video of the code in action …

As you watch the above video, note as I drag a rectangle in any one Flash application, its sends AMF encoded binary messages to the server and the server multicasts these messages to other connected clients and those clients update in almost realtime. While in the example above all the application instances are running on the same system, they could just as easily be running on different systems and still communicate via the server.

Here the code for the Erlang server …

0001 -module(server).
0002 -export([start/1,stop/0]).
0003 
0004 -define(TCP_OPTIONS,[binary,
0005                      {packet, 0},
0006                      {active, false},
0007                      {reuseaddr, true}]).
0008 
0009 start(Port) ->
0010 	 Pid = spawn(fun() -> manage([]) end),
0011     register(client_manager, Pid),
0012 	 {ok, Socket} = gen_tcp:listen(Port, ?TCP_OPTIONS),
0013     accept(Socket).
0014 
0015 stop() -> todo.
0016 
0017 accept(Socket) ->
0018   	 {ok, NewSocket} = gen_tcp:accept(Socket),
0019     spawn(fun() -> recieve(NewSocket) end),
0020     client_manager ! {connected, NewSocket},
0021     accept(Socket).
0022 
0023 recieve(Socket) ->
0024     case gen_tcp:recv(Socket, 0) of
0025         {ok, Data} ->
0026             client_manager ! {multicast,Socket,Data},
0027             recieve(Socket);
0028         {error, closed} ->
0029  		 client_manager ! {disconnect, Socket}
0030     end.
0031 
0032 manage(Sockets) ->
0033     receive
0034         {connected, Socket} ->
0035             NewSockets = [Socket | Sockets];
0036         {disconnected, Socket} ->
0037             NewSockets = lists:delete(Socket, Sockets);
0038         {multicast,Socket, Data} ->
0039             multicast(Socket, Sockets, Data),
0040             NewSockets = Sockets
0041     end,
0042     manage(NewSockets).
0043 
0044 multicast(FromSocket, ToSockets, Data) ->
0045     SendData = fun(Socket) -> gen_tcp:send(Socket, Data) end,
0046     Sockets = [ S || S <- ToSockets, S /= FromSocket],
0047     lists:foreach(SendData, Sockets).

The state of Enterprise UIs : “It’s a design thinking problem”

Mrinal Wadhwa — Tue, 08 Sep 2009 16:46:22 +0000

James Governor of RedMonk yesterday kicked off an interesting discussion about the state of Enterprise User Interfaces, more specifically Enterprise Portals and points out …

“… That’s right- less painful for users. Products like IBM WebSphere Portal and SAP Netweaver Portal were supposed to bring much improved user interaction models to enterprise IT, but unfortunately traditional systems-focused IT departments, rather than user interaction specialists and their web brethren, did the work …”

James eludes to the crux of the problem in the above quote and Thomas Otter highlights it further in a comment saying …

I sense that most of the problems/challenges with enterprise UI are not just a tool challenge. It is a design thinking problem. Until design thinking permeates enterprise application development, UI will be a sore point.

Thomas is right, it is a design thinking problem, more precisely, the problem is that there are no design thinkers in most teams that build or customize enterprise software…. A quick search for Job posts with keywords “interaction designer SAP” and other related terms on various reputed job boards here, here, here and a few other places revealed almost no relevant results .. clearly we don’t even realize yet that we need to design the interaction a user has with the software we build .. so it should be no surprise that our business software is a pain to use.

It is easy to blame vendors like SAP and IBM in this scenario though … our company portal is a pain to use, SAP must not have done a good job building it .. this is not always the right assumption, software like SAP portal etc. are platforms that allow an extreme amount of customization and often its this team doing the customization that puts together most of what a user will experience .. believe it or not SAP portal is HTML and JavaScript in your browser … yes the same HTML and JavaScript that powers GMail, Google Reader, Apple.com or numerous other engaging experiences on the Internet that you can find listed on various web showcases like this and this.

I bet if the same people who build these experiences on the web were part of the team building and customizing your corporate portal we would not be having this conversation. Yet, I’ve been on this side of similar conversations many times before and this is right about the time where you hear the words …

“… but, I don’t need all this flashy stuff on my business app …”

Unfortunately, many business decision makers very often fail to see beyond the commercial glitz of well designed applications on the Internet and quickly dismiss or underrate the need of an Interaction designer on their team. They miss to see that Interaction design is about thinking and researching how a users interacts with your software, how he feels and how can his feelings be optimized to pleasure, comfort and satisfaction. Its not about rounded corners or gradients or “flashy” animations .. those are just some visual design tools that sometimes (not always) help enhance how a user feels when using software.

Things are changing though, as Anne points out in a comment on James’ post .. the last year or so has seen a lot of new interest in the business value of good user interfaces and James’ post mentions that companies like Deloitte and Accenture realize this value and “have built practices dedicated to using Adobe technology to make existing enterprise applications and their portal front ends less painful for users”. He goes on to quote Jaco Von Eeden from Deloitte …

“Virtually every ERP deal we see we ask where can we use Adobe. We have a reasonable revenue flow and fantastic pipeline.”

This increasing interest in the value of good user interfaces is great for the industry, but I’m not sure if the above approach that Deloitte is embracing is the right way to go .. we should not be force fitting a particular technology into a solution, but instead asking what is the best way to solve a problem and what is the best technology to build that solution.

Adobe’s technologies can be used to build some great solutions but this choice of using a particular technology should not be made by business drivers … instead, it should be based on proper understanding of what is needed. Remember, it is very easy to use these so called Rich Internet Applications technologies to build a Not So Rich Internet Application.

Flex 4: Random Layout and Step Layout

Mrinal Wadhwa — Sat, 22 Aug 2009 14:01:00 +0000

Yesterday at the Bangalore Flex User Group Meeting after Khan’s excellent talk on LCDS3, Fiber and the Modeler Plugin we had some time left to so I decided to show everyone how cool and easy layouts in Flex 4 are ..

Here are two quick layouts we wrote during the meeting as I showed everyone how easy it is to write a custom layout …

Random Layout

Step Layout

These layouts are currently somewhat crude but the idea was to convey how easy it is to write your own layouts … here the code for RandomLayout … just one simple function …

Of course, these layout algorithms can get more complex … here’s the StepLayout code …

For more elaborate examples you may want to checkout the ConcentricLayout example I posted last week or Ryan Campbell’s very cool 3D Layouts. Evtim, an engineer on the Flex SDK team also has some detailed posts on how to write Layouts on his blog.

Flex 4 is awesome.

UPDATE: You can view the complete source of the above example here or download it from here.

Flex 4 Concentric Layout

Mrinal Wadhwa — Sun, 16 Aug 2009 16:16:49 +0000

Layouts in Flex 4 are decoupled from containers and its quite simple to define your own layout. Yesterday I wrote ConcentricLayout.

ConcentricLayout arranges layout elements in such a way that their centers are aligned and their size sequentially decreases. The width of each layout element is less than the previous element by a value specified using the horizontalGap property and the height of each layout element is less than the previous element by a value specified using the verticalGap property. If the element has an explicit width or an explicit height it still aligns its center but is not resized. You can tell the layout to force a resize of all elements and ignore their explicitly specified size using the forceResize flag

Here’s a quick example: