Using greasemonkey to prototype your web UI
When mock-ups and screenshots fail to deliver the idea that you are trying to convey, a prototype can deliver a strong impact. But why should you prototype with GreaseMonkey when you can check out code from source control and mock a web page with a few shabbily scribbled lines of javascript ?
I often find myself comparing GreaseMoney with the Netbeans swing builder for thick clients. Its great because you can deliver a quick UI without worrying about the underlying functionality. But where GreaseMoney differentiates itself is in its ability to mock a live web page. By live I mean one that is already deployed on production. Never underestimate the impact of mocking a feature on a live website. Changing the innerHTML of a few HTML elements and hacking out some JS can get you quick results.
How an idea is presented to a person that might green-light it is pretty critical.From my experience, here is how it usually plays out
| How you present your idea | Possible reaction |
|---|---|
| Prepare a slide deck / design document and email it | Sounds interesting. Lets try it sometime. |
| Mock the UI and send a link / jar | Pretty cool. Lets get this live by Mar this year |
| Screen scrap a live page and pretend to have implemented the feature | Holy cow ! We need that right now |
Of course, I am not trying to suggest that all ideas that you mock on a screen-scrapped live web site will kick off. An idea is great only when your potential users realize its significance and importance. The way you can get them excited about it, is to actually show them what it could look like. Once they are wowed, they will be eating out of your hand.
Be wary of the risk of getting folks too excited. Explain carefully that you are screen scrapping a page before you present it. The last thing you want is a customer thinking that you already implemented an idea
If you have never used GreaseMonkey before, the hello world tutorial is a great place to start. As you get your way around the simple stuff, you will eventually perform relatively complex operations like changing HTML content, setting timers, making ajax calls. Some of those steps will not work due to limitations in the way GreaseMonkey works. Which is when this common pitfalls page will be of great help.
Good luck mocking your web page.