QCon London 2010: Journey of a start-up

1,189 views
1,137 views

Published on

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.

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
  • Very impressive presentations, I like it very much. Thanks a lot.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,189
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

QCon London 2010: Journey of a start-up

  1. 1. Data Presentation in a Web-App Journey of a start-up Simon Oxley Co-founder & CTO Aware Monitoring http://awaremonitoring.com @soxley
  2. 2. We monitor web-services performance and availability. › Websites › APIs › XML Feeds › Forms http://awaremonitoring.com
  3. 3. We’re Bootstrapping
  4. 4. Time vs. Cost
  5. 5. Tough Decisions
  6. 6. First, a tangent ... ... First, a tangent
  7. 7. Software development is a creative art. Art | Music | Software
  8. 8. a blank canvas = infinite possibilities
  9. 9. Sometimes, a masterpiece is created.
  10. 10. ... and sometimes, it’s not.
  11. 11. Sometimes, the results are just painful!
  12. 12. Monitoring can be painful. Pain = Opportunity
  13. 13. This is pain.
  14. 14. The unlimited canvas of the desktop has led to PAIN. No limits = No Restraints
  15. 15. Sometimes we don’t know when to stop
  16. 16. Restraints are a good thing.
  17. 17. The web has grown up with restraints.
  18. 18. Innovation is happening in the browser and on the web. We wanted to be part of it.
  19. 19. We set some simple goals.
  20. 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. 21. A small team on an epic journey
  22. 22. Decisions, decisions ... Early technology choices have a big impact.
  23. 23. Build the right foundations
  24. 24. Considerations 1. Time 2. Skills 3. Cost
  25. 25. It’s easy to take on too much
  26. 26. Our decisions Python HTML / CSS JavaScript
  27. 27. Heavy lifting can be made easier
  28. 28. Maximising re-use Python › Django HTML / CSS JavaScript › jQuery + Dojo
  29. 29. Standing on the shoulders of giants
  30. 30. User experience goals › Simple and Obvious › Fast in the browser › Quick and Easy set-up
  31. 31. For our customers and us
  32. 32. UI Delivery first: HTML / CSS then: JavaScript › Light touch
  33. 33. No Flash
  34. 34. Why no flash? Another piece to test + manage Another skill required CSS + JS is enough
  35. 35. Two high-level use-cases 1. Configure a monitor 2. Access results
  36. 36. Configuration
  37. 37. Content Tabs
  38. 38. Hide Optional Fields
  39. 39. Interactive
  40. 40. Data Presentation
  41. 41. Limit top-level detail
  42. 42. Drill down
  43. 43. Let the browser do what it’s good at. It’s easier, and faster
  44. 44. CSS Charts
  45. 45. CSS Charts › Fast › Accessible › Styled
  46. 46. JavaScript Charts (Dojo) Pie chart Custom time period
  47. 47. We didn’t try to re-invent
  48. 48. Some things inspired us along the way. Learning from others
  49. 49. Key metrics
  50. 50. Bringing data together
  51. 51. Intelligence from data
  52. 52. Some of our tools
  53. 53. Balsamiq Mockups
  54. 54. Firebug & IE Debugbar
  55. 55. Page Speed & Y-Slow
  56. 56. Django Debug Toolbar
  57. 57. Observations
  58. 58. The browser is becoming a container for applications. Not just for the web
  59. 59. The original App Store
  60. 60. S3Fox
  61. 61. SQLite Manager
  62. 62. Web Apps are now a real alternative to desktop. In some cases better
  63. 63. Making life easy
  64. 64. “We’re at the intersection of demand and capability” Darrin Massena, Dec 2005 Picnik co-founder
  65. 65. HTML5: Exciting times ahead › Canvas › Storage › Video › Drag + Drop
  66. 66. Adoption is a barrier Not everybody is an early-adopter, some will take a while.
  67. 67. We’ll pick cherries
  68. 68. … and concentrate on value
  69. 69. Thanks for listening @soxley
  70. 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/

×