Data Presentation in a Web-App Journey of a start-up Simon Oxley - - PowerPoint PPT Presentation

▶
data presentation in a web app
SMART_READER_LITE
LIVE PREVIEW

Data Presentation in a Web-App Journey of a start-up Simon Oxley - - PowerPoint PPT Presentation

Oct 05, 2023 441 likes •1.15k views

Data Presentation in a Web-App Journey of a start-up Simon Oxley Co-founder & CTO Aware Monitoring http://awaremonitoring.com @soxley We monitor web-services performance and availability. Websites APIs XML Feeds Forms

slide-1
SLIDE 1

@soxley

Data Presentation in a Web-App

Co-founder & CTO Aware Monitoring

http://awaremonitoring.com

Simon Oxley

Journey of a start-up

slide-2
SLIDE 2

http://awaremonitoring.com

› APIs › Websites › XML Feeds › Forms

We monitor web-services

performance and availability.

slide-3
SLIDE 3

We’re Bootstrapping

slide-4
SLIDE 4

Time vs. Cost

slide-5
SLIDE 5

Tough Decisions

slide-6
SLIDE 6

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

slide-7
SLIDE 7

Software development

is a creative art.

Art | Music | Software

slide-8
SLIDE 8

a blank canvas = infinite possibilities

slide-9
SLIDE 9

Sometimes, a masterpiece is created.

slide-10
SLIDE 10

... and sometimes, it’s not.

slide-11
SLIDE 11

Sometimes, the results are just painful!

slide-12
SLIDE 12

Monitoring can be painful.

Pain = Opportunity

slide-13
SLIDE 13

This is pain.

slide-14
SLIDE 14

The unlimited canvas of

the desktop has led to PAIN.

No limits = No Restraints

slide-15
SLIDE 15

Sometimes we don’t know when to stop

slide-16
SLIDE 16

Restraints are a good thing.

slide-17
SLIDE 17

The web has grown up with restraints.

slide-18
SLIDE 18

Innovation is happening in

the browser and on the web.

We wanted to be part of it.

slide-19
SLIDE 19

We set some simple goals.

slide-20
SLIDE 20
  • 1. Instant On - be up and running in minutes

Web Services Monitoring 2.0

  • 3. Deliver information of real value quickly
  • 2. Easy to setup and configure
slide-21
SLIDE 21

A small team on an epic journey

slide-22
SLIDE 22

Decisions, decisions ...

Early technology

choices have a big impact.

slide-23
SLIDE 23

Build the right foundations

slide-24
SLIDE 24
  • 1. Time

Considerations

  • 3. Cost
  • 2. Skills
slide-25
SLIDE 25

It’s easy to take on too much

slide-26
SLIDE 26

Python

Our decisions JavaScript HTML / CSS

slide-27
SLIDE 27

Heavy lifting can be made easier

slide-28
SLIDE 28

Python › Maximising re-use

JavaScript › HTML / CSS

Django jQuery + Dojo

slide-29
SLIDE 29

Standing on the shoulders of giants

slide-30
SLIDE 30

User experience goals

› Simple and Obvious

› Fast in the browser › Quick and Easy set-up

slide-31
SLIDE 31

For our customers and us

slide-32
SLIDE 32

UI Delivery first: HTML / CSS then: JavaScript Light touch

›

slide-33
SLIDE 33

No Flash

slide-34
SLIDE 34

Why no flash?

Another piece to test + manage Another skill required

CSS + JS is enough

slide-35
SLIDE 35

Two high-level use-cases

  • 1. Configure a monitor
  • 2. Access results
slide-36
SLIDE 36

Configuration

slide-37
SLIDE 37

Content Tabs

slide-38
SLIDE 38

Hide Optional Fields

slide-39
SLIDE 39

Interactive

slide-40
SLIDE 40

Data Presentation

slide-41
SLIDE 41

Limit top-level detail

slide-42
SLIDE 42

Drill down

slide-43
SLIDE 43

Let the browser do what it’s good at.

It’s easier, and faster

slide-44
SLIDE 44

CSS Charts

slide-45
SLIDE 45

› Fast

› Accessible › Styled

CSS Charts

slide-46
SLIDE 46

Pie chart Custom time period

JavaScript Charts (Dojo)

slide-47
SLIDE 47

We didn’t try to re-invent

slide-48
SLIDE 48

Some things inspired

us along the way.

Learning from others

slide-49
SLIDE 49

Key metrics

slide-50
SLIDE 50

Bringing data together

slide-51
SLIDE 51

Intelligence from data

slide-52
SLIDE 52

Some of our tools

slide-53
SLIDE 53

Balsamiq Mockups

slide-54
SLIDE 54

Firebug & IE Debugbar

slide-55
SLIDE 55

Page Speed & Y-Slow

slide-56
SLIDE 56

Django Debug Toolbar

slide-57
SLIDE 57

Observations

slide-58
SLIDE 58

The browser is becoming a

container for applications.

Not just for the web

slide-59
SLIDE 59

The original App Store

slide-60
SLIDE 60

S3Fox

slide-61
SLIDE 61

SQLite Manager

slide-62
SLIDE 62

Web Apps are now a real

alternative to desktop.

In some cases better

slide-63
SLIDE 63

Making life easy

slide-64
SLIDE 64

“We’re at the intersection

  • f demand and capability”

Darrin Massena, Dec 2005

Picnik co-founder

slide-65
SLIDE 65

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

slide-66
SLIDE 66

Adoption is a barrier

Not everybody is an early-adopter,

some will take a while.

slide-67
SLIDE 67

We’ll pick cherries

slide-68
SLIDE 68

… and concentrate on value

slide-69
SLIDE 69

@soxley

Thanks

for

listening

slide-70
SLIDE 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/