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

3.
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)

4.
AuctionsPlus

5.
A successful Go Live March 2011
• This site can handle >2000
users
Only limitation: bandwidth

6.
The rural industry
AuctionsPlus last year
• 2,000,000 sheep
• 80,000 cows

7.
• Ebay
• Sold 14 cows in 2010
• Graysonline
• Sold 28 cows in 2010

8.
1. Seller sells a cow
2. 1 week
Finishes at 3PM
3. No extensions
4. Be there or be square!

9.
Eager Ernie
• Googles "Ebay sniping"
• Grabs an app
• 2:59:59PM
Purchase a cow for $140

10.
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

11.
Sleepy Sam
• He waits till 2:59PM
• He waits till 3:09PM
• He waits till 3:19PM
...

12.
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

13.
1. Seller sells a cow
2. 1 week
3. Finishes at 3PM
4. No extensions
30 sec

14.
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...

15.
Challenges
• Real time bidding
• Immediate Updates
• Pushing data to users

16.
1983

17.
2002

18.
Java applet
• Java Install experience
• Update experience
• Java Runtime
• App
 Support phone calls

19.
Java applet
Start-up time
New features?
Rigid UI
Java devs vs .NET devs

20.
2010
#1 Fix it?
#2 Rewrite?

21.
I called Adam Cogan:
"Fixing is better"
"Unnecessery risk"
"Incremental change is better"
"Code doesn't rust"
"Do some refactoring"

22.
The rewrite

23.
Silverlight HTML5
vs.
The showdown

24.
Fact 1/2
HTML runs everywhere
Silverlight runs only in some
places

25.
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

26.
Purpose
• HTML
• Content in browser
• Silverlight
• RIA

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.
SL

29.
Need unique
plugin Use Plugin
functionality?

30.
Consider
• Team Knowledge
• Technology limitations
What gets you there faster?

31.
Proof of concept
HTML+JS
vs
HTML5 web sockets
vs
Silverlight
vs
Flash/Flex
vs
Java FX

32.
Proof of concept
HTML+JS
vs
HTML5 web sockets
vs
Silverlight
vs
Flash/Flex
vs
Java FX

33.
Limitations
http://www.google.com/search?q= Limitations+Silverlight
http://www.google.com/search?q= Limitations+HTML5

34.
TL; DR

35.
Proof of concept
Coding....

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

39.
#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
...

40.
#2 Making Silverlight run
• Client has to initiate the
connection
• Back to Adam's F5 solution

41.
Q: How do you push data from the
server to the client?
Eg Skype?
A:
Web services (slow polling)
Remoting
UDP
Sockets

42.
#3 Making Silverlight dance
Sockets
WCF
Connecting over sockets
netTcpBinding
Limitation port range: 4502-4532

43.
Q: How do you push data from the
server to the client?
Eg Skype?
A:
Web services (slow, polling)
Remoting
UDP
Sockets

44.
#3 Making Silverlight dance
• WCF
• Fallback to HTTP long polling
"httpPollingDuplexBinding"

45.
Additional technologies
• ASP.NET MVC 3
• SQL Server 2008
• SQL Reporting Services
• Lots of automated tests
• Stress test over night
• TFS 2010

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 room
Adam asks:
"What about TFS work items?"
"Where are my Done emails?"

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

48.
11 Lessons learned
What to do or not?

49.
#1 What is NOT Silverlight?

50.
#1 What is NOT Silverlight?
http://blog.gfader.com/2010/05/silverlight-showing-html-content-inside.html

51.
#2 Silverlight - BIG screen

52.
#2 Silverlight - small window

53.
Silverlight - Screen size

54.
Silverlight - Window size

55.
#2 Silverlight - Autozoom

56.
#3 Silverlight - Warning Window size

57.
#4 Getting feedback

58.
#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

59.
#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

60.
#5 Avoid losing changes

61.
#5 Avoid losing changes

62.
#5 Avoid losing changes
window.onbeforeunload
http://blog.gfader.com/2010/08/silverlight-prevent-users-from-losing.html

63.
#6 MVVM

64.
#7 Automated Deployment
"If you don't have the right equipment
for the job, you just have to make it
yourself."
MacGyver

65.
Automated Deployment
Wed night @Sydney .NET UG

66.
#8 CDN for the XAP
"The best way to not get spotted
following someone is not following him"
MacGyver following a car

67.
#8 CDN for the XAP
"The best way to reduce bandwidth from
your site, is by not delivering from your
site"

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.
Allow JavaScript access
to scriptable objects defined in the XAP

70.
#8 CDN for the XAP
• Testing on localhost?
• Dynamic URLs

71.
#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

72.
#9 Obfuscate SL on Build Server
• Silverlight Spy
• Reflector?
• IL Spy
• Just Decompile
• dotPeek
• ...

73.
#10 DTO size
"The tighter your plan, the more likely
you are to run into something
unpredictable."
MacGyver

74.
#10 DTO size

75.
#10 DTO size

76.
#10 DTO size

77.
#10 DTO size

78.
#10 DTO size
Savings
Small x Big
= Big difference

79.
Tools used
• Wireshark
• Fiddler

80.
#11 Silverlight force updates
"Typical. Just when you're getting
ahead, someone changes the odds."
MacGyver

81.
#11 Silverlight force updates

82.
#11 Silverlight force updates

83.
#UNSOLVED: Databinding errors on
build

84.
#UNSOLVED: 1 click "rollback"

85.
Summary
• Online Auctions
• AuctionsPlus
• The showdown
• The communication
• The technology & practices
• 11 lessons learned

86.
Conclusion

87.
Lessons learned
---
Silverlight VS HTML

88.
Lessons learned
Know your tools
Right tool for the job

89.
Lessons learned
Take your bosses word with a grain of salt ;-)

90.
In the future
Build on top of our great WCF service
We might write a HTML5 web sockets client…

91.
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

92.
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/

93.
Thank you!
More?
This Wed @Sydney .NET UG
Tweet your feedback and questions

94.
Thank you!
Slides and all details
http:// blog.gfader.com