Silverlight vs HTML5 - Lessons learned from the real world...
1 like1,835 views
Peter tells us from his last project: building a better EBay in Silverlight and shows us his view on this topic.
![#1 Making Silverlight walk
• Linq to Entities
• RIA Services - Automatic CRUD over
WCF
• [x] Checkbox
Note: IObservable makes the data feel
local
Eg. from c in Customer
...](https://image.slidesharecdn.com/silverlight-lessons-learned-110519191625-phpapp01/85/Silverlight-vs-HTML5-Lessons-learned-from-the-real-world-48-320.jpg)
More Related Content
What's hot (20)
Viewers also liked (8)
Similar to Silverlight vs HTML5 - Lessons learned from the real world... (20)
More from Peter Gfader (20)
Recently uploaded (20)
Silverlight vs HTML5 - Lessons learned from the real world...
- 1. Silverlight HTML5 vs. How to get the best out of the web "A better EBay with Silverlight"
- 2. Agenda • Online Auctions • AuctionsPlus • The showdown • The communication • The technology & practices • 11 lessons learned
- 4. Peter Gfader Italy (my country) Australia (my fun) German (my language) blog.gfader.com (my findings) @peitor (my conversations) www.SSW.com.au (my company)
- 6. AuctionsPlus
- 8. A successful Go Live March 2011 • This site can handle >2000 users Only limitation: bandwidth
- 9. The rural industry AuctionsPlus last year • 2,000,000 sheep • 80,000 cows
- 10. • Ebay • Sold 14 cows in 2010 • Graysonline • Sold 28 cows in 2010
- 11. 1. Seller sells a cow 2. 1 week Finishes at 3PM 3. No extensions 4. Be there or be square!
- 12. Eager Ernie • Googles "Ebay sniping" • Grabs an app • 2:59:59PM Purchase a cow for $140
- 13. 1. Seller sells a cow 2. 1 week Finishes at 3PM 3. No extensions 10 min 20 extra bids gives more $$$ Cows get milked at 5PM
- 14. Sleepy Sam • He waits till 2:59PM • He waits till 3:09PM • He waits till 3:19PM ...
- 15. Sleepy Sam • He waits till 2:59PM • He waits till 3:09PM • He waits till 3:19PM ... And gives up Milks the cows... Note: 50 bids means 500 mins
- 16. 1. Seller sells a cow 2. 1 week 3. Finishes at 3PM 4. No extensions 30 sec
- 17. Smart Sam • He waits till 2:59PM • 50 bids @ 30 seconds • Sold at 3:25PM • He gets a cow and is happy Back to work...
- 18. Challenges • Real time bidding • Immediate Updates • Pushing data to users
- 19. 1983
- 20. 2002
- 21. Java applet • Java Install experience • Update experience • Java Runtime • App Support phone calls
- 22. Java applet Start-up time New features? Rigid UI Java devs vs .NET devs
- 23. 2010 #1 Fix it? #2 Rewrite?
- 24. I called Adam Cogan: "Fixing is better" "Unnecessery risk" "Incremental change is better" "Code doesn't rust" "Do some refactoring"
- 25. The rewrite
- 26. Silverlight HTML5 vs. The showdown
- 27. Fact 1/2 HTML runs everywhere Silverlight runs only in some places
- 28. Fact 2/2 Silverlight always a little ahead Silverlight release every 6 months HTML release every 6 years http://en.wikipedia.org/wiki/HTML#Version_history_of_the_standard http://en.wikipedia.org/wiki/Microsoft_Silverlight#Release_history
- 29. Purpose • HTML • Content in browser • Silverlight • RIA
- 30. 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
- 31. SL
- 33. Need unique plugin Use Plugin functionality?
- 34. Consider • Team Knowledge • Technology limitations What gets you there faster?
- 35. Proof of concept HTML+JS vs HTML5 web sockets vs Silverlight vs Flash/Flex vs Java FX
- 36. Proof of concept HTML+JS vs HTML5 web sockets vs Silverlight vs Flash/Flex vs Java FX
- 37. Limitations http://www.google.com/search?q= Limitations+Silverlight http://www.google.com/search?q= Limitations+HTML5
- 39. TL; DR
- 42. Advantages of Silverlight • Target 1 runtime • Instead of Browser version IE 6 … IE 9 FireFox 3 FireFox 4 Chrome 10 Safari 4 Safari 5 ...
- 43. 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 ... ...
- 44. 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" "Don't worry too much about what clients want Push back on that 4x sec"
- 48. #1 Making Silverlight walk • Linq to Entities • RIA Services - Automatic CRUD over WCF • [x] Checkbox Note: IObservable makes the data feel local Eg. from c in Customer ...
- 49. #2 Making Silverlight run • Client has to initiate the connection • Back to Adam's F5 solution
- 50. Q: How do you push data from the server to the client? Eg Skype? A: Web services (slow polling) Remoting UDP Sockets
- 51. #3 Making Silverlight dance Sockets WCF Connecting over sockets netTcpBinding Limitation port range: 4502-4532
- 52. Q: How do you push data from the server to the client? Eg Skype? A: Web services (slow, polling) Remoting UDP Sockets
- 53. #3 Making Silverlight dance • WCF • Fallback to HTTP long polling "httpPollingDuplexBinding"
- 54. Additional technologies • ASP.NET MVC 3 • SQL Server 2008 • SQL Reporting Services • Lots of automated tests • Stress test over night • TFS 2010
- 55. 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 room Adam asks: "What about TFS work items?" "Where are my Done emails?"
- 57. 11 Lessons learned What to do or not?
- 58. #1 What is NOT Silverlight?
- 59. #1 What is NOT Silverlight? http://blog.gfader.com/2010/05/silverlight-showing-html-content-inside.html
- 61. #2 Silverlight - BIG screen
- 62. #2 Silverlight - small window
- 63. Silverlight - Screen size
- 64. Silverlight - Window size
- 68. #2 Silverlight - Autozoom
- 69. #3 Silverlight - Warning Window size
- 71. #4 Getting feedback 1. Getting screenshot • WriteableBitmap 2. Convert WriteableBitmap to PNG 3. Upload screen 4. Upload feedback+sysinfo 5. Send email to internal staff
- 72. #4 Getting feedback 1. PNG converter 2. 2 HTTP Handlers • File • SysInfo 3. Email is sent from server http://blog.gfader.com/2010/06/customer-support-in-silverlight.html
- 73. #5 Avoid losing changes
- 74. #5 Avoid losing changes
- 75. #5 Avoid losing changes window.onbeforeunload http://blog.gfader.com/2010/08/silverlight-prevent-users-from-losing.html
- 76. #6 MVVM
- 77. #7 Automated Deployment "If you don't have the right equipment for the job, you just have to make it yourself." MacGyver
- 78. Automated Deployment Wed night @Sydney .NET UG
- 82. #8 CDN for the XAP "The best way to not get spotted following someone is not following him" MacGyver following a car
- 83. #8 CDN for the XAP "The best way to reduce bandwidth from your site, is by not delivering from your site"
- 84. #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
- 86. Allow JavaScript access to scriptable objects defined in the XAP
- 87. #8 CDN for the XAP • Testing on localhost? • Dynamic URLs
- 88. #9 Obfuscate SL on Build Server "Sometimes things are hidden under the surface. You just gotta know how to bring 'em out." MacGyver http://blog.gfader.com/2011/04/silverlight-5-easy-steps-to-obfuscate.html
- 89. #9 Obfuscate SL on Build Server • Silverlight Spy • Reflector? • IL Spy • Just Decompile • dotPeek • ...
- 90. #10 DTO size "The tighter your plan, the more likely you are to run into something unpredictable." MacGyver
- 91. #10 DTO size
- 92. #10 DTO size
- 93. #10 DTO size
- 94. #10 DTO size
- 95. #10 DTO size Savings Small x Big = Big difference
- 96. Tools used • Wireshark • Fiddler
- 97. #11 Silverlight force updates "Typical. Just when you're getting ahead, someone changes the odds." MacGyver
- 98. #11 Silverlight force updates
- 99. #11 Silverlight force updates
- 100. #UNSOLVED: Databinding errors on build
- 101. #UNSOLVED: 1 click "rollback"
- 102. Summary • Online Auctions • AuctionsPlus • The showdown • The communication • The technology & practices • 11 lessons learned
- 103. Conclusion
- 104. Lessons learned --- Silverlight VS HTML
- 105. Lessons learned Know your tools Right tool for the job
- 106. Lessons learned Take your bosses word with a grain of salt ;-)
- 107. In the future Build on top of our great WCF service We might write a HTML5 web sockets client…
- 109. References - Tools http://www.wireshark.org/ CPorts (TCPView with Filters) http://www.nirsoft.net/utils/cports.html http://getfirebug.com/ http://www.fiddler2.com/ http://firstfloorsoftware.com/silverlightspy http://www.deepseaobfuscator.com/
- 110. Thank you! More? This Wed @Sydney .NET UG Tweet your feedback and questions
- 111. Thank you! Slides and all details http:// blog.gfader.com
Editor's Notes
- #2: Silverlightvs. HTML5 - How to get the best out of the webhttp://blog.gfader.com
- #3: Comparison between online auctions: Ebay, GraysOnline, AuctionsPlusThe technology showdown: HTML5 vs SilverlightHow to implement communicationTechnologies usedSoftware development practicesMy lessons learned
- #4: Living room Plank
- #5: http://blog.gfader.com
- #6: AuctionsPlusJava applet
- #7: Selling cattle and sheep over the Internet
- #8: Selling cattle and sheep over the Internet
- #11: Why not selling enough sheep
- #13: Eager=eifrig
- #14: Why did they sell
- #20: 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.
- #21: 2002 - Java applet screenConnect to auctionRunning for 30minCountdown 1minCool! Cutting edge at the time
- #24: They call SSW: "We need some good German engineering"
- #25: Had a long night...Next morning went to the clientDecision: I consider everything that he said
- #29: No consortium, no long agreements, not multiple interests/vendors
- #32: http://www.paulstovell.com/presentation-technologies
- #33: 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?
- #34: 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?
- #35: 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!
- #36: HTML5 vs Silverlight vs Flash/Flex vs Java FX
- #37: Prefer existing Microsoft knowledge
- #39: http://johnliu.net/blog/2011/4/29/rich-or-reach-pick-one.html
- #40: 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
- #42: Many weeks went into thisThis is not allowed to shareEvery time Silverlight comes out we confirm
- #45: Had a long night...Next morning went to the clientDecision: I consider everything that he said
- #46: My resultsAdam's arguments....
- #48: Explain: what we seeAuction, lots, detailsBid button
- #51: Eg Skype?A:Web services (slow, polling)RemotingSockets
- #54: Demo connection: TCP fallback HTTPOpen Cports and show the TCP socket connectionFirebug HTTP
- #55: SQL Reporting Services
- #56: SQL Reporting Services
- #57: That's ours
- #58: No emails No done criteriaURL
- #60: Details?Picture browser?
- #61: Details?Picture browser?
- #78: Not just best practice, but the only way to createSimilarities with MVC..XAML Databinding magic..
- #85: "The best way to not get spotted following someone is not following him"
- #86: 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
- #89: 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
- #90: SL SpyReflector single DLLsReflector replacement
- #97: GOOD Messages over the wire are very cryptic now Size of messages much smallerNot so good Our DTOsare very cryptic now as well ;-)
- #99: 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 + "\\" />");
- #104: 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.
- #109: (to support Adam's IPad)
- #113: http://blog.gfader.com