Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Jon Trelfa Presentation From Desktop To Web – Getting It Right

  • Be the first to comment

  • Be the first to like this

Jon Trelfa Presentation From Desktop To Web – Getting It Right

  1. 1. From Desktop to Web – Getting it Right Jon Trelfa Adayana, Inc.
  2. 2. Project Goals <ul><li>Migrate Mediaflightplan from the desktop to a web-based application </li></ul><ul><li>Provide a registration mechanism tied to the student’s textbook </li></ul><ul><li>Reduce or eliminate the ability to share a license </li></ul>
  3. 3. What is “Mediaflightplan”? <ul><li>Media/Ad campaign planning simulation software </li></ul><ul><li>Target audience: College Students and Professors </li></ul><ul><li>Used in conjunction with a textbook </li></ul>
  4. 4. Basic Workflow
  5. 5. Goals of the Simulation <ul><li>Target demographic gets the best advertising coverage </li></ul><ul><li>Campaign is within budget </li></ul>
  6. 6. Why? <ul><li>Software piracy ~ 50% </li></ul><ul><ul><li>1 CD -> all PCs in the lab </li></ul></ul><ul><ul><li>Professor’s instructions included the use of whiteout on reports to update the student’s name </li></ul></ul>
  7. 7. <ul><li>Software updates were expensive </li></ul><ul><ul><li>CDs distributed with books </li></ul></ul><ul><ul><li>No internet updates </li></ul></ul><ul><ul><ul><li>College network restrictions </li></ul></ul></ul><ul><ul><ul><li>Internet not prevalent in the first releases anyway </li></ul></ul></ul>
  8. 8. Demo Version 4: Last desktop release (Version 1 was released in 1986)
  9. 9. Demo Version 5: First Web Release: 2007
  10. 10. Advantages of V5 <ul><li>Significantly reduced piracy (increased sales!) </li></ul><ul><li>Reduced maintenance/upgrade costs: </li></ul><ul><ul><li>V4->V5 upgrade ~20% cheaper than desktop software upgrade </li></ul></ul><ul><ul><li>3 subsequent updates ~90% cheaper </li></ul></ul>
  11. 11. Lessons Learned with V5 <ul><li>Bandwidth </li></ul><ul><ul><li>Off-peak 5GB/month </li></ul></ul><ul><ul><li>Peak – 60GB/month </li></ul></ul><ul><li>Performance </li></ul><ul><ul><li>Too many simultaneous users caused timeouts </li></ul></ul>
  12. 12. <ul><li>Click-wait-click (web 1.0) broke the workflow of previous versions </li></ul><ul><li>Colleges don’t like cookies </li></ul><ul><li>Shared hosting model lasted 2 months </li></ul><ul><li>Larger code base </li></ul><ul><li>Limited Browser Compatibility (IE/Firefox only) </li></ul>
  13. 13. Demo Version 6: Current Release: 2009 (Ajax-ified)
  14. 14. Advantages over V5 - bandwidth <ul><li>V5 </li></ul><ul><li>125KB per page </li></ul><ul><li>Full page reload per step </li></ul><ul><li>Complete Simulation: 12MB </li></ul><ul><li>V6 </li></ul><ul><li>600KB initial download </li></ul><ul><li>XHR – 1KB each </li></ul><ul><li>Complete Simulation: 700KB </li></ul>
  15. 15. Advantages over V5 - Usability <ul><li>V5 </li></ul><ul><li>1 Click –> 1 page reload </li></ul><ul><li>Limited keyboard shortcuts </li></ul><ul><li>Have to remember where you left off </li></ul><ul><li>IE/FF Only </li></ul><ul><li>V6 </li></ul><ul><li>No page reloads </li></ul><ul><li>Keyboard shortcuts similar to a desktop application </li></ul><ul><li>Immediate feedback </li></ul><ul><li>All Major Browsers </li></ul>
  16. 16. Disadvantage <ul><li>Had to rewrite the textbok </li></ul>
  17. 17. V6 - Technical <ul><li>Prototype/Scriptaculous </li></ul><ul><li>Modalbox.js </li></ul><ul><li>Blueprint CSS Framework </li></ul><ul><li>CodeIgniter PHP Framework </li></ul><ul><li>FamFamFam Silk Icon Set </li></ul>
  18. 18. JavaScript Tidbits <ul><li>$ and $$ become slower as the document becomes larger </li></ul><ul><ul><li>$(‘element’).select() </li></ul></ul><ul><li>Bound events are lost when you clone an element </li></ul><ul><ul><li>$(‘element’).remove() </li></ul></ul>
  19. 19. Browser issues <ul><li>parseFloat().toLocaleString(): </li></ul><ul><ul><li>FF: 1,024,123 </li></ul></ul><ul><ul><li>IE: 1,024,123.00 </li></ul></ul><ul><ul><li>Safari: 1024123 </li></ul></ul><ul><li>Have to explicitly trap the Enter key in Safari or it will submit whatever form you’re in </li></ul><ul><li>IE8 Broke my IE-specific fixes </li></ul>
  20. 20. Advice <ul><li>Identify your IP before putting anything into Javascript </li></ul><ul><ul><li>We use XHR calls to get the IP-related data (calculation results) </li></ul></ul><ul><li>Try to hack your app: </li></ul><ul><ul><li>can it run standalone? </li></ul></ul><ul><ul><li>Have I reduced the barrier of entry? </li></ul></ul>
  21. 21. Please complete an evaluation.
  22. 22. Questions? Question?

×