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

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

40. Proof of concept
Coding....

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?"

56. ADD** URL TASKBOARD
http://rules.ssw.com.au/Management/RulesToBetterScrumUsingTFS/Pages/PhysicalTaskboard.aspx

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

70. #4 Getting feedback

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…

108. References
http://martinfowler.com/bliki/CrossPlatformMobile.html
http://www.paulstovell.com/presentation-technologies
http://johnliu.net/blog/2011/4/29/rich-or-reach-pick-one.html
http://tomasz.janczuk.org/
http://caniuse.com/#feat=websockets

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