Silverlight vs HTML5 - Lessons learned from the real world...

3,187 views

Published on

Peter tells us from his last project: building a better EBay in Silverlight and shows us his view on this topic.

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
3,187
On SlideShare
0
From Embeds
0
Number of Embeds
201
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Silverlightvs. HTML5 - How to get the best out of the webhttp://blog.gfader.com
  • Comparison between online auctions: Ebay, GraysOnline, AuctionsPlusThe technology showdown: HTML5 vs SilverlightHow to implement communicationTechnologies usedSoftware development practicesMy lessons learned
  • Living room Plank
  • http://blog.gfader.com
  • AuctionsPlusJava applet
  • Selling cattle and sheep over the Internet
  • Selling cattle and sheep over the Internet
  • Why not selling enough sheep
  • Eager=eifrig
  • Why did they sell
  • 1983, Australian farmers were dialing into AuctionsPlus using a single phone number and a modem, and placing bids on rudimentary "green-screen" computers, making them unlikely tech pioneers.
  • 2002 - Java applet screenConnect to auctionRunning for 30minCountdown 1minCool! Cutting edge at the time
  • They call SSW: "We need some good German engineering"
  • Had a long night...Next morning went to the clientDecision: I consider everything that he said
  • No consortium, no long agreements, not multiple interests/vendors
  • http://www.paulstovell.com/presentation-technologies
  • you need to understand bothyou need to pick the platform that lets you do your job most effecteflymake your customers the happiest Use HTML when it makes sense to your solution. Use a plugin when it provides unique functionalityWhat gets you there faster?
  • you need to understand bothyou need to pick the platform that lets you do your job most effecteflymake your customers the happiest Use HTML when it makes sense to your solution. Use a plugin when it provides unique functionalityWhat gets you there faster?
  • In order to take decision, you need to know bothAdvantages/DisadvantagesKnow the technologyKnow your toolsKnow the key featuresyou need to pick the platform that lets you do your job most effecteflyMake you customer happy!
  • HTML5 vs Silverlight vs Flash/Flex vs Java FX
  • Prefer existing Microsoft knowledge
  • http://johnliu.net/blog/2011/4/29/rich-or-reach-pick-one.html
  • http://johnliu.net/blog/2011/4/29/rich-or-reach-pick-one.htmlSummarizes a blog post from Martin Fowler http://martinfowler.com/bliki/CrossPlatformMobile.html
  • Many weeks went into thisThis is not allowed to shareEvery time Silverlight comes out we confirm
  • Had a long night...Next morning went to the clientDecision: I consider everything that he said
  • My resultsAdam's arguments....
  • Explain: what we seeAuction, lots, detailsBid button
  • Eg Skype?A:Web services (slow, polling)RemotingSockets
  • Demo connection: TCP fallback HTTPOpen Cports and show the TCP socket connectionFirebug HTTP
  • SQL Reporting Services
  • SQL Reporting Services
  • That's ours
  • No emails No done criteriaURL
  • Details?Picture browser?
  • Details?Picture browser?
  • Not just best practice, but the only way to createSimilarities with MVC..XAML Databinding magic..
  • "The best way to not get spotted following someone is not following him"
  • Mime types on serverURL is dynamic, for local testingAdded Silverlight paramAllowHtmlPopupWindow=true so that the external XAP can open popupsAdded ExternalCallersFromCrossDomain="CrossDomainAccess" for the biddingclient
  • Mime types on serverURL is dynamic, for local testingAdded Silverlight paramAllowHtmlPopupWindow=true so that the external XAP can open popupsAdded ExternalCallersFromCrossDomain="CrossDomainAccess" for the biddingclient
  • SL SpyReflector single DLLsReflector replacement
  • GOOD Messages over the wire are very cryptic now Size of messages much smallerNot so good Our DTOsare very cryptic now as well ;-)
  • Date in XAP urlconst string filename = @"MySilverlightApp.xap"; string version = (new System.IO.FileInfo(Server.MapPath(filename))).LastWriteTime.ToShortDateString();Response.Write(" <param name=\\"source\\" value=\\"" + CDNDownloadURL + filename + "?" + version + "\\" />");
  • 1987, Australian farmers were dialing into AuctionsPlus using a single phone number and a modem, and placing bids on rudimentary "green-screen" computers, making them unlikely tech pioneers.
  • (to support Adam's IPad)
  • http://blog.gfader.com
  • Silverlight vs HTML5 - Lessons learned from the real world...

    1. 1. Silverlight HTML5 vs.How to get the best out of the web "A better EBay with Silverlight"
    2. 2. Agenda• Online Auctions• AuctionsPlus• The showdown• The communication• The technology & practices• 11 lessons learned
    3. 3. Peter GfaderItaly (my country)Australia (my fun)German (my language)blog.gfader.com (my findings)@peitor (my conversations)www.SSW.com.au (my company)
    4. 4. AuctionsPlus
    5. 5. A successful Go Live March 2011• This site can handle >2000 users Only limitation: bandwidth
    6. 6. The rural industryAuctionsPlus last year• 2,000,000 sheep• 80,000 cows
    7. 7. • Ebay • Sold 14 cows in 2010• Graysonline • Sold 28 cows in 2010
    8. 8. 1. Seller sells a cow2. 1 week Finishes at 3PM3. No extensions4. Be there or be square!
    9. 9. Eager Ernie• Googles "Ebay sniping"• Grabs an app• 2:59:59PM Purchase a cow for $140
    10. 10. 1. Seller sells a cow2. 1 week Finishes at 3PM3. No extensions 10 min20 extra bids gives more $$$Cows get milked at 5PM
    11. 11. Sleepy Sam• He waits till 2:59PM• He waits till 3:09PM• He waits till 3:19PM...
    12. 12. Sleepy Sam• He waits till 2:59PM• He waits till 3:09PM• He waits till 3:19PM...And gives upMilks the cows...Note: 50 bids means 500 mins
    13. 13. 1. Seller sells a cow2. 1 week3. Finishes at 3PM4. No extensions 30 sec
    14. 14. Smart Sam• He waits till 2:59PM• 50 bids @ 30 seconds• Sold at 3:25PM• He gets a cow and is happyBack to work...
    15. 15. Challenges• Real time bidding • Immediate Updates • Pushing data to users
    16. 16. 1983
    17. 17. 2002
    18. 18. Java applet• Java Install experience• Update experience • Java Runtime • App  Support phone calls
    19. 19. Java appletStart-up timeNew features?Rigid UIJava devs vs .NET devs
    20. 20. 2010 #1 Fix it?#2 Rewrite?
    21. 21. I called Adam Cogan: "Fixing is better" "Unnecessery risk" "Incremental change is better" "Code doesnt rust" "Do some refactoring"
    22. 22. The rewrite
    23. 23. Silverlight HTML5 vs.The showdown
    24. 24. Fact 1/2HTML runs everywhereSilverlight runs only in someplaces
    25. 25. Fact 2/2Silverlight always a little aheadSilverlight release every 6monthsHTML release every 6 yearshttp://en.wikipedia.org/wiki/HTML#Version_history_of_the_standardhttp://en.wikipedia.org/wiki/Microsoft_Silverlight#Release_history
    26. 26. Purpose• HTML • Content in browser• Silverlight • RIA
    27. 27. What we need?• Push updates to connected users• Not polling the server• Support lots of users > 2000• Immediate Updates • Push updates 4x sec • Update delay max ~1/4 sec
    28. 28. SL
    29. 29. Need unique plugin Use Pluginfunctionality?
    30. 30. Consider• Team Knowledge• Technology limitations What gets you there faster?
    31. 31. Proof of conceptHTML+JSvsHTML5 web socketsvsSilverlightvsFlash/FlexvsJava FX
    32. 32. Proof of conceptHTML+JSvsHTML5 web socketsvsSilverlightvsFlash/FlexvsJava FX
    33. 33. Limitationshttp://www.google.com/search?q= Limitations+Silverlighthttp://www.google.com/search?q= Limitations+HTML5
    34. 34. TL; DR
    35. 35. Proof of conceptCoding....
    36. 36. Advantages of Silverlight• Target 1 runtime• Instead of Browser version IE 6 … IE 9 FireFox 3 FireFox 4 Chrome 10 Safari 4 Safari 5 ...
    37. 37. Advantages of Silverlight• Target 1 runtime• Instead of Browser version OS version IE 6 … Windows XP IE 9 Windows 2000 FireFox 3 Windows 2008 FireFox 4 Chrome 10 x Windows 7 Mac OSX 10.4 Safari 4 Mac OSX 10.5 Safari 5 Mac OSX 10.6 ... ...
    38. 38. I called Adam Cogan: "HTML5 is the future" "jQuery gets you almost there" "XAML is harder than HTML" "Who cares if AJAX polls - Teach them to press F5" "Dont worry too much about what clients want Push back on that 4x sec"
    39. 39. #1 Making Silverlight walk• Linq to Entities• RIA Services - Automatic CRUD over WCF• [x] CheckboxNote: IObservable makes the data feellocalEg. from c in Customer ...
    40. 40. #2 Making Silverlight run• Client has to initiate the connection• Back to Adams F5 solution
    41. 41. Q: How do you push data from the server to the client?Eg Skype?A:Web services (slow polling)RemotingUDPSockets
    42. 42. #3 Making Silverlight danceSocketsWCF Connecting over sockets netTcpBinding Limitation port range: 4502-4532
    43. 43. Q: How do you push data from the server to the client?Eg Skype?A:Web services (slow, polling)RemotingUDPSockets
    44. 44. #3 Making Silverlight dance• WCF • Fallback to HTTP long polling "httpPollingDuplexBinding"
    45. 45. Additional technologies• ASP.NET MVC 3• SQL Server 2008• SQL Reporting Services• Lots of automated tests• Stress test over night• TFS 2010
    46. 46. Additional practices• Scrum (2 week sprints)• MVVM (SSW Designer worked by himself)• XP (Pair programming)• Tests (Confidence to Refactor)• Code reviews (Internal and by Adam)• Automated deployment (1 click "go live")• War roomAdam asks:"What about TFS work items?""Where are my Done emails?"
    47. 47. ADD** URL TASKBOARDhttp://rules.ssw.com.au/Management/RulesToBetterScrumUsingTFS/Pages/PhysicalTaskboard.aspx
    48. 48. 11 Lessons learnedWhat to do or not?
    49. 49. #1 What is NOT Silverlight?
    50. 50. #1 What is NOT Silverlight?http://blog.gfader.com/2010/05/silverlight-showing-html-content-inside.html
    51. 51. #2 Silverlight - BIG screen
    52. 52. #2 Silverlight - small window
    53. 53. Silverlight - Screen size
    54. 54. Silverlight - Window size
    55. 55. #2 Silverlight - Autozoom
    56. 56. #3 Silverlight - Warning Window size
    57. 57. #4 Getting feedback
    58. 58. #4 Getting feedback1. Getting screenshot • WriteableBitmap2. Convert WriteableBitmap to PNG3. Upload screen4. Upload feedback+sysinfo5. Send email to internal staff
    59. 59. #4 Getting feedback 1. PNG converter 2. 2 HTTP Handlers • File • SysInfo 3. Email is sent from serverhttp://blog.gfader.com/2010/06/customer-support-in-silverlight.html
    60. 60. #5 Avoid losing changes
    61. 61. #5 Avoid losing changes
    62. 62. #5 Avoid losing changes window.onbeforeunloadhttp://blog.gfader.com/2010/08/silverlight-prevent-users-from-losing.html
    63. 63. #6 MVVM
    64. 64. #7 Automated Deployment"If you dont have the right equipmentfor the job, you just have to make ityourself."MacGyver
    65. 65. Automated DeploymentWed night @Sydney .NET UG
    66. 66. #8 CDN for the XAP"The best way to not get spottedfollowing someone is not following him"MacGyver following a car
    67. 67. #8 CDN for the XAP"The best way to reduce bandwidth fromyour site, is by not delivering from yoursite"
    68. 68. #8 CDN for the XAP 1. Mime types on CDN AddType application/x-silverlight-app xap 2. Hosting page 1. AllowHtmlPopupWindow=true Allow external SL XAP to open popups 2. EnableHtmlAccess=true Allow SL access the DOM 3. App.manifest ExternalCallersFromCrossDomain="CrossDomainAccess"http://timheuer.com/blog/archive/2010/06/10/troubleshooting-debugging-silverlight-cross-domain-xap-hosting.aspx
    69. 69. Allow JavaScript access to scriptable objects defined in the XAP
    70. 70. #8 CDN for the XAP• Testing on localhost?• Dynamic URLs
    71. 71. #9 Obfuscate SL on Build Server "Sometimes things are hidden under the surface. You just gotta know how to bring em out." MacGyverhttp://blog.gfader.com/2011/04/silverlight-5-easy-steps-to-obfuscate.html
    72. 72. #9 Obfuscate SL on Build Server• Silverlight Spy• Reflector? • IL Spy • Just Decompile • dotPeek • ...
    73. 73. #10 DTO size"The tighter your plan, the more likelyyou are to run into somethingunpredictable."MacGyver
    74. 74. #10 DTO size
    75. 75. #10 DTO size
    76. 76. #10 DTO size
    77. 77. #10 DTO size
    78. 78. #10 DTO sizeSavings Small x Big = Big difference
    79. 79. Tools used• Wireshark• Fiddler
    80. 80. #11 Silverlight force updates"Typical. Just when youre gettingahead, someone changes the odds."MacGyver
    81. 81. #11 Silverlight force updates
    82. 82. #11 Silverlight force updates
    83. 83. #UNSOLVED: Databinding errors on build
    84. 84. #UNSOLVED: 1 click "rollback"
    85. 85. Summary• Online Auctions• AuctionsPlus• The showdown• The communication• The technology & practices• 11 lessons learned
    86. 86. Conclusion
    87. 87. Lessons learned ---Silverlight VS HTML
    88. 88. Lessons learnedKnow your toolsRight tool for the job
    89. 89. Lessons learnedTake your bosses word with a grain of salt ;-)
    90. 90. In the future Build on top of our great WCF serviceWe might write a HTML5 web sockets client…
    91. 91. Referenceshttp://martinfowler.com/bliki/CrossPlatformMobile.htmlhttp://www.paulstovell.com/presentation-technologieshttp://johnliu.net/blog/2011/4/29/rich-or-reach-pick-one.htmlhttp://tomasz.janczuk.org/http://caniuse.com/#feat=websockets
    92. 92. References - Toolshttp://www.wireshark.org/CPorts (TCPView with Filters)http://www.nirsoft.net/utils/cports.htmlhttp://getfirebug.com/http://www.fiddler2.com/http://firstfloorsoftware.com/silverlightspyhttp://www.deepseaobfuscator.com/
    93. 93. Thank you!More?This Wed @Sydney .NET UGTweet your feedback and questions
    94. 94. Thank you!Slides and all detailshttp:// blog.gfader.com

    ×