From Desktop to Web – From Desktop to Web – Getting it RightGetting it Right

Jon TrelfaAdayana, Inc.

Project GoalsProject Goals

• Migrate Mediaflightplan from the desktop to

a web-based application

• Provide a registration mechanism tied to the

student’s textbook

• Reduce or eliminate the ability to share a

license

What is “Mediaflightplan”?What is “Mediaflightplan”?

• Media/Ad campaign planning simulation

software

• Target audience: College Students and

Professors

• Used in conjunction with a textbook

Basic WorkflowBasic Workflow

Goals of the SimulationGoals of the Simulation

• Target demographic gets the best

advertising coverage

• Campaign is within budget

Why?Why?

• Software piracy ~ 50%

• 1 CD -> all PCs in the lab

• Professor’s instructions included the

use of whiteout on reports to update

the student’s name

• Software updates were expensive

• CDs distributed with books

• No internet updates• College network restrictions

• Internet not prevalent in the first

releases anyway

DemoDemo

Version 4: Last desktop release(Version 1 was released in 1986)

DemoDemo

Version 5: First Web Release: 2007

Advantages of V5Advantages of V5

• Significantly reduced piracy (increased sales!)

• Reduced maintenance/upgrade costs:

• V4->V5 upgrade ~20% cheaper than

desktop software upgrade

• 3 subsequent updates ~90% cheaper

Lessons Learned with V5Lessons Learned with V5

• Bandwidth

• Off-peak 5GB/month

• Peak – 60GB/month

• Performance

• Too many simultaneous users

caused timeouts

• Click-wait-click (web 1.0) broke the workflow of

previous versions

• Colleges don’t like cookies

• Shared hosting model lasted 2 months

• Larger code base

• Limited Browser Compatibility (IE/Firefox only)

DemoDemo

Version 6: Current Release: 2009(Ajax-ified)

Advantages over V5 - bandwidthAdvantages over V5 - bandwidth

V5

• 125KB per page

• Full page reload per

step

• Complete

Simulation: 12MB

V6

• 600KB initial

download

• XHR – 1KB each

• Complete

Simulation: 700KB

Advantages over V5 - UsabilityAdvantages over V5 - Usability

V5

• 1 Click –> 1 page

reload

• Limited keyboard

shortcuts

• Have to remember

where you left off

• IE/FF Only

V6

• No page reloads

• Keyboard shortcuts

similar to a desktop

application

• Immediate feedback

• All Major Browsers

DisadvantageDisadvantage

• Had to rewrite the textbok

V6 - TechnicalV6 - Technical

• Prototype/Scriptaculous

• Modalbox.js

• Blueprint CSS Framework

• CodeIgniter PHP Framework

• FamFamFam Silk Icon Set

JavaScript TidbitsJavaScript Tidbits

• $ and $$ become slower as the document

becomes larger

• $(‘element’).select()

• Bound events are lost when you clone an

element

• $(‘element’).remove()

Browser issuesBrowser issues

• parseFloat().toLocaleString():

• FF: 1,024,123

• IE: 1,024,123.00

• Safari: 1024123

• Have to explicitly trap the Enter key in Safari or it

will submit whatever form you’re in

• IE8 Broke my IE-specific fixes

AdviceAdvice

• Identify your IP before putting anything into

Javascript

• We use XHR calls to get the IP-related

data (calculation results)

• Try to hack your app:

• can it run standalone?

• Have I reduced the barrier of entry?

Please complete Please complete an evaluation. an evaluation.

Question?

Questions?Questions?