We set out with a vision - to build a great web-app. A simple and elegant alternative to the bloated monitoring and reporting systems that so many of us battle with every day. Here we share the challenges we encountered and the decisions we made to achieve our goal. The tools and technologies we used to deliver clear data presentation, where we took inspiration from, and our hopes for the future.

1. Data Presentation in a Web-App
Journey of a start-up
Simon Oxley
Co-founder & CTO Aware Monitoring
http://awaremonitoring.com
@soxley

2. We monitor web-services
performance and availability.
› Websites › APIs
› XML Feeds › Forms
http://awaremonitoring.com

3. We’re Bootstrapping

4. Time vs. Cost

5. Tough Decisions

6. First, a tangent ... ...
First, a tangent

7. Software development
is a creative art.
Art | Music | Software

8. a blank canvas = infinite possibilities

9. Sometimes, a masterpiece is created.

10. ... and sometimes, it’s not.

11. Sometimes, the results are just painful!

12. Monitoring can be painful.
Pain = Opportunity

13. This is pain.

14. The unlimited canvas of
the desktop has led to PAIN.
No limits = No Restraints

15. Sometimes we don’t know when to stop

16. Restraints are a good thing.

17. The web has grown up
with restraints.

18. Innovation is happening in
the browser and on the web.
We wanted to be part of it.

19. We set some simple goals.

20. Web Services Monitoring 2.0
1. Instant On - be up and running in minutes
2. Easy to setup and configure
3. Deliver information of real value quickly

21. A small team on an epic journey

22. Decisions, decisions ...
Early technology
choices have a big impact.

23. Build the right foundations

24. Considerations
1. Time
2. Skills
3. Cost

25. It’s easy to take on too much

26. Our decisions
Python
HTML / CSS
JavaScript

27. Heavy lifting can be made easier

28. Maximising re-use
Python › Django
HTML / CSS
JavaScript › jQuery + Dojo

29. Standing on the shoulders of giants

30. User experience goals
› Simple and Obvious
› Fast in the browser
› Quick and Easy set-up

31. For our customers and us

32. UI Delivery
first: HTML / CSS
then: JavaScript › Light touch

33. No Flash

34. Why no flash?
Another piece to test + manage
Another skill required
CSS + JS is enough

35. Two high-level use-cases
1. Configure a monitor
2. Access results

36. Configuration

37. Content Tabs

38. Hide Optional Fields

39. Interactive

40. Data Presentation

41. Limit top-level detail

42. Drill down

43. Let the browser do
what it’s good at.
It’s easier, and faster

44. CSS Charts

45. CSS Charts
› Fast
› Accessible
› Styled

46. JavaScript Charts (Dojo)
Pie chart
Custom time period

47. We didn’t try to re-invent

48. Some things inspired
us along the way.
Learning from others

49. Key metrics

50. Bringing data together

51. Intelligence from data

52. Some of our tools

53. Balsamiq Mockups

54. Firebug & IE Debugbar

55. Page Speed & Y-Slow

56. Django Debug Toolbar

57. Observations

58. The browser is becoming a
container for applications.
Not just for the web

59. The original App Store

60. S3Fox

61. SQLite Manager

62. Web Apps are now a real
alternative to desktop.
In some cases better

63. Making life easy

64. “We’re at the intersection
of demand and capability”
Darrin Massena, Dec 2005
Picnik co-founder

65. HTML5: Exciting times ahead
› Canvas › Storage
› Video › Drag + Drop

66. Adoption is a barrier
Not everybody is an early-adopter,
some will take a while.

67. We’ll pick cherries

68. … and concentrate on value

69. Thanks
for
listening
@soxley

70. Credits
Bootstrapping: http://blog.guykawasaki.com/2006/01/the_art_of_boot.html
Balance: http://www.flickr.com/photos/archeon/2941655917/
The Matrix: Warner Bros. Pictures 1999
Blank canvas: http://rainbowstripe.wordpress.com
Stickman: Original artwork by @soxley
Illusion: http://www.flickr.com/photos/enet/26521372/
HP OpenView: http://fajri.freebsd.or.id/index.php/2007/07/29/
OpenOffice Toolbar: http://www.openofficetips.com/2006/01/28/toolbar-crazy/
Naughty Children: http://www.funny-games.biz/pictures/728-naughty-children.html
Mt Cook, NZ : Original photography by @soxley
Two-man Sled: http://www.flickr.com/photos/johnmcnab/4216604416/
Titled Barrel: http://www.geograph.org.uk/photo/299980
Spinning Plates: http://www.globeparty.com
Line-out: http://www.flickr.com/photos/woesinger/1464460733/
Keep it Simple: http://www.flickr.com/photos/wilderdom/3340381990/
Lever: http://en.wikipedia.org/wiki/File:Palanca-ejemplo.jpg
Mixing Desk: http://www.flickr.com/photos/teliko82/3227659253/
Mandelbrot: http://resumbrae.com/ub/dms423_f05/06/
Tools: http://www.flickr.com/photos/19646481@N06/4299545598/
From the bridge: http://commons.wikimedia.org/wiki/File:Watching_operations_from_the_bridge.jpg
Locomotive plans: Tools: http://www.flickr.com/photos/19646481@N06/4299545598/
Picnik: http://socialinnovationperspectives.blogspot.com/2010/02/guest-post-innovation-giving-birth-to.html
Cherries: http://www.flickr.com/photos/43927576@N00/3655970324
Piggy Bank: http://www.flickr.com/photos/alancleaver/4279482716/