Silverlight vs HTML5 - Lessons learned from the real world...
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 2,905 views

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

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

Statistics

Views

Total Views
2,905
Views on SlideShare
2,750
Embed Views
155

Actions

Likes
0
Downloads
36
Comments
0

5 Embeds 155

http://blog.gfader.com 131
http://feeds.feedburner.com 20
http://www.linkedin.com 2
url_unknown 1
http://www.slashdocs.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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(" ");
  • 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... Silverlight vs HTML5 - Lessons learned from the real world... Presentation Transcript

  • Silverlight HTML5 vs.How to get the best out of the web "A better EBay with Silverlight"
  • Agenda• Online Auctions• AuctionsPlus• The showdown• The communication• The technology & practices• 11 lessons learned
  • Peter GfaderItaly (my country)Australia (my fun)German (my language)blog.gfader.com (my findings)@peitor (my conversations)www.SSW.com.au (my company)
  • AuctionsPlus
  • A successful Go Live March 2011• This site can handle >2000 users Only limitation: bandwidth
  • The rural industryAuctionsPlus last year• 2,000,000 sheep• 80,000 cows
  • • Ebay • Sold 14 cows in 2010• Graysonline • Sold 28 cows in 2010
  • 1. Seller sells a cow2. 1 week Finishes at 3PM3. No extensions4. Be there or be square!
  • Eager Ernie• Googles "Ebay sniping"• Grabs an app• 2:59:59PM Purchase a cow for $140
  • 1. Seller sells a cow2. 1 week Finishes at 3PM3. No extensions 10 min20 extra bids gives more $$$Cows get milked at 5PM
  • Sleepy Sam• He waits till 2:59PM• He waits till 3:09PM• He waits till 3:19PM...
  • 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
  • 1. Seller sells a cow2. 1 week3. Finishes at 3PM4. No extensions 30 sec
  • Smart Sam• He waits till 2:59PM• 50 bids @ 30 seconds• Sold at 3:25PM• He gets a cow and is happyBack to work...
  • Challenges• Real time bidding • Immediate Updates • Pushing data to users
  • 1983
  • 2002
  • Java applet• Java Install experience• Update experience • Java Runtime • App  Support phone calls
  • Java appletStart-up timeNew features?Rigid UIJava devs vs .NET devs
  • 2010 #1 Fix it?#2 Rewrite?
  • I called Adam Cogan: "Fixing is better" "Unnecessery risk" "Incremental change is better" "Code doesnt rust" "Do some refactoring"
  • The rewrite
  • Silverlight HTML5 vs.The showdown
  • Fact 1/2HTML runs everywhereSilverlight runs only in someplaces
  • 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
  • Purpose• HTML • Content in browser• Silverlight • RIA
  • 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
  • SL
  • Need unique plugin Use Pluginfunctionality?
  • Consider• Team Knowledge• Technology limitations What gets you there faster?
  • Proof of conceptHTML+JSvsHTML5 web socketsvsSilverlightvsFlash/FlexvsJava FX
  • Proof of conceptHTML+JSvsHTML5 web socketsvsSilverlightvsFlash/FlexvsJava FX
  • Limitationshttp://www.google.com/search?q= Limitations+Silverlighthttp://www.google.com/search?q= Limitations+HTML5
  • TL; DR
  • Proof of conceptCoding....
  • Advantages of Silverlight• Target 1 runtime• Instead of Browser version IE 6 … IE 9 FireFox 3 FireFox 4 Chrome 10 Safari 4 Safari 5 ...
  • 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 ... ...
  • 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"
  • #1 Making Silverlight walk• Linq to Entities• RIA Services - Automatic CRUD over WCF• [x] CheckboxNote: IObservable makes the data feellocalEg. from c in Customer ...
  • #2 Making Silverlight run• Client has to initiate the connection• Back to Adams F5 solution
  • Q: How do you push data from the server to the client?Eg Skype?A:Web services (slow polling)RemotingUDPSockets
  • #3 Making Silverlight danceSocketsWCF Connecting over sockets netTcpBinding Limitation port range: 4502-4532
  • Q: How do you push data from the server to the client?Eg Skype?A:Web services (slow, polling)RemotingUDPSockets
  • #3 Making Silverlight dance• WCF • Fallback to HTTP long polling "httpPollingDuplexBinding"
  • Additional technologies• ASP.NET MVC 3• SQL Server 2008• SQL Reporting Services• Lots of automated tests• Stress test over night• TFS 2010
  • 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?"
  • ADD** URL TASKBOARDhttp://rules.ssw.com.au/Management/RulesToBetterScrumUsingTFS/Pages/PhysicalTaskboard.aspx
  • 11 Lessons learnedWhat to do or not?
  • #1 What is NOT Silverlight?
  • #1 What is NOT Silverlight?http://blog.gfader.com/2010/05/silverlight-showing-html-content-inside.html
  • #2 Silverlight - BIG screen
  • #2 Silverlight - small window
  • Silverlight - Screen size
  • Silverlight - Window size
  • #2 Silverlight - Autozoom
  • #3 Silverlight - Warning Window size
  • #4 Getting feedback
  • #4 Getting feedback1. Getting screenshot • WriteableBitmap2. Convert WriteableBitmap to PNG3. Upload screen4. Upload feedback+sysinfo5. Send email to internal staff
  • #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
  • #5 Avoid losing changes
  • #5 Avoid losing changes
  • #5 Avoid losing changes window.onbeforeunloadhttp://blog.gfader.com/2010/08/silverlight-prevent-users-from-losing.html
  • #6 MVVM
  • #7 Automated Deployment"If you dont have the right equipmentfor the job, you just have to make ityourself."MacGyver
  • Automated DeploymentWed night @Sydney .NET UG
  • #8 CDN for the XAP"The best way to not get spottedfollowing someone is not following him"MacGyver following a car
  • #8 CDN for the XAP"The best way to reduce bandwidth fromyour site, is by not delivering from yoursite"
  • #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
  • Allow JavaScript access to scriptable objects defined in the XAP
  • #8 CDN for the XAP• Testing on localhost?• Dynamic URLs
  • #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
  • #9 Obfuscate SL on Build Server• Silverlight Spy• Reflector? • IL Spy • Just Decompile • dotPeek • ...
  • #10 DTO size"The tighter your plan, the more likelyyou are to run into somethingunpredictable."MacGyver
  • #10 DTO size
  • #10 DTO size
  • #10 DTO size
  • #10 DTO size
  • #10 DTO sizeSavings Small x Big = Big difference
  • Tools used• Wireshark• Fiddler
  • #11 Silverlight force updates"Typical. Just when youre gettingahead, someone changes the odds."MacGyver
  • #11 Silverlight force updates
  • #11 Silverlight force updates
  • #UNSOLVED: Databinding errors on build
  • #UNSOLVED: 1 click "rollback"
  • Summary• Online Auctions• AuctionsPlus• The showdown• The communication• The technology & practices• 11 lessons learned
  • Conclusion
  • Lessons learned ---Silverlight VS HTML
  • Lessons learnedKnow your toolsRight tool for the job
  • Lessons learnedTake your bosses word with a grain of salt ;-)
  • In the future Build on top of our great WCF serviceWe might write a HTML5 web sockets client…
  • 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
  • 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/
  • Thank you!More?This Wed @Sydney .NET UGTweet your feedback and questions
  • Thank you!Slides and all detailshttp:// blog.gfader.com