HTML5 vs Silverlight
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,997
On Slideshare
9,708
From Embeds
289
Number of Embeds
9

Actions

Shares
Downloads
241
Comments
0
Likes
7

Embeds 289

http://www.franksworld.com 206
http://franksworld.com 73
http://codebadger.blogspot.com 3
https://www.linkedin.com 2
http://trunk.ly 1
http://b.hatena.ne.jp 1
http://www.thetableteer.com 1
http://codebadger.blogspot.de 1
http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • HTML 5 is really updated HTML, CSS, and Javascript specifications. What is considered by most people to be HTML 5 is actually several specifications that are all grouped under that name.\n
  • Although most features of HTML 5 will be mentioned by this presentation, I will not go in depth into any of these features. For more information, check out these links.\n
  • This presentation is given at .NET focused conferences so I’m discussing Silverlight. This presentation could just as easily be called HTML5 vs Plugins or HTML5 vs Native Apps.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Browser Percentages according to StatCounter\n
  • Mobile Browser Percentages according to StatCounter\n
  • Browser Plugins Installed according to RIA Stats\nNote that 72.68 % of browsers have Silverlight 2+ installed, while 73.37% of browsers have Canvas & Video support ... virtually the same!\n
  • \n
  • - Very simple key-value pair storage\n- jquery-jstore - jQuery based library implemented over local storage\n- 5MB limit with no API to increase quote - at the users’ mercy!\n
  • \n
  • A very simple key-value pair storage layer over Isolated Storage.\n\n
  • - You can write whatever you want to Isolated Storage, and its up to you to make sure you have space and whether files exist or not\n- 5MB space by default\n
  • \n
  • - this is an implementation of SQLite in javascript\n- W3C deprecated specification on 11/18/2010 which means you shouldn’t use it :-(\n
  • Firefox has stated it will never add support for Web SQL. Coupled with IE’s lack of interest, the W3C deprecated the specification.\n
  • - Indexed Database API, aka IndexedDB, formerly known as WebSimpleDB\n- this is an object store, not a relational database, storing Javascript Objects\n- Asynchronous and Transactional only\n- You can create indexes against your stored objects\n
  • - Microsoft is reportedly experimenting with the technology.\n- The best example I could find online did not work and was out of date\n- IMO, this technology shows great promise, but is not ready for prime time.\n
  • \n
  • \n
  • - CACHE MANIFEST section includes all resources loaded into cache\n- NETWORK section includes all resources not cached\n- FALLBACK section includes page to fall back to when offline and referencing a page that is not included in the cache\n
  • - The cache manifest document is referenced in whatever page you want to automatically load all resources into the local application cache.\n- This is brittle - a problem with loading any resource will cause the entire process to fail, and the error notifications are very limited.\n
  • - Note that onLine won’t tell you if your site is down or not responding - only whether the browser has network connectivity.\n- IE and Firefox have “Work Offline” menu options, but WebKit browsers don’t.\n
  • - Each browser has a different default size for the cache’s quota, with no API for checking the quota size or increasing it defined in the specification!\n- Again, at the users’ mercy for cache size.\n- Why no IE support?\n
  • The concept of Silverlight OOB couldn’t be distilled into a simple code sample, so I’m listing main capabilities here.\n
  • \n
  • Web Workers have no access to the DOM or the calling page; the only communication allowed is through messages.\n
  • Web Workers have no access to the DOM or the calling page; the only communication allowed is through messages.\n
  • - Silverlight has the concept of the UI Thread\n- Asynchronous networking calls return on a different thread (not UI)\n- DispatcherTimer class runs your code in a different thread\n- BackgroundWorker class is preferred, although you can go old school\n
  • \n
  • WebSocket API provides bi-directional, full-duplex communication over a single TCP socket.\n
  • The concept of Silverlight and WCF is too much for a simple code example, so I’ll just list the pertinent comparable features.\n
  • \n
  • \n
  • Supported in Chrome through the webkitNotifications property and in Firefox nightlies through the mozNotifications property. May slip to a later version in Firefox.\n
  • - only available out-of-browser\n- cannot receive keyboard focus or events\n- no stacking or queueing support - you have to handle that yourself\n
  • \n
  • \n
  • \n
  • Note that no single encoding works for all browsers -- you WILL end up referencing multiple encodings.\n
  • \n
  • Windows Phone 7 supports more containers and codecs.\n
  • \n
  • \n
  • \n
  • Note that no single encoding works for all browsers.\n
  • Bonus points if you notice that this looks just like the Audio for Silverlight.\n
  • I’m no video expert but I’m listing these features just to show that Silverlight has more video support than whats currently available in the HTML specification.\n
  • \n
  • \n
  • Note that Opera Mini’s partial support - it will display the canvas but is unable to play animations or complex operations.\n
  • This renders a very similar image as the HTML Canvas example.\nOf course, this could be created in code as the HTML Canvas objects were created in Javascript, but why the heck would you want to do that??\n
  • \n
  • These are all features considered part of HTML5 that I haven’t covered thus far. I didn’t consider them major talking points in the comparison with Silverlight, especially in the context of building business applications.\n
  • ... continued\n
  • These are all features of Silverlight that I wanted to call out because there isn’t any comparable feature of HTML5.\nXAML is a category unto itself - it covers so many HTML5 enhancements out of the box.\n
  • After considering all the features of each technology, it really all depends on what you need to solve your specific problem(s).\n
  • Thank You!\n

Transcript

  • 1. vsMatt Castohttp://mattcasto.info
  • 2. vsDid You Want an Answer?
  • 3. vs
  • 4. vsIt Depends
  • 5. vsOpinions
  • 6. vsReligion
  • 7. HTML5 is many things ...
  • 8. HTML5 is many things ...Offline / Storage MultimediaCommunication CSS 3Hardware Access 3D EffectsSemantics Performance
  • 9. HTML5 is many things ...
  • 10. This is not an overview of HTML5 Features.http://www.w3.org/html5http://www.html5rocks.com/http://slides.html5rocks.comhttp://diveintohtml5.org
  • 11. Silverlight
  • 12. vsPlatforms
  • 13. PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)
  • 14. PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)Just about everywhere
  • 15. PlatformsIE 9 (Vista, Win7)Firefox 3.5+ (WinXP, OSX, Android, Linux)Chrome (WinXP, OSX, Linux)Safari (OSX, iOS)Webkit (Android, etc)Just about everywhere ... to varying degrees.
  • 16. Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7
  • 17. Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7Don’t forget about Moonlight
  • 18. Platforms IE 6+ ( WinXP+) Firefox 2+ (WinXP, OSX) Chrome (WinXP+) Safari (OSX) Windows Phone 7Don’t forget about Moonlight ... even though Novell has.
  • 19. vsStorage
  • 20. StorageLocal Storage// use localStorage for persistent storage// use sessionStorage for per tab storagewindow.localStorage.setItem(value, area.value);window.sessionStorage.setItem(timestamp, (new Date()).getTime());var val = window.localStorage.getItem(value);window.localStorage.removeItem(value);window.localStorage.clear();
  • 21. StorageLocal StorageSource: http://caniuse.com
  • 22. StorageApplicationSettings / Site Settings// ApplicationSettings are plugin instance specific// SiteSettings are site (URL) specificprivate IsolatedStorageSettings userSettings = IsolatedStorageSettings.ApplicationSettings;private IsolatedStorageSettings siteSettings = IsolatedStorageSettings.SiteSettings;userSettings.Add("value", "hello world");userSettings.Remove("value");userSettings.Clear();
  • 23. StorageIsolated Storage// GetUserStoreForApplication() - plugin specific// GetUserStoreForSite() - site (URL) specificvar isf = IsolatedStorageFile.GetUserStoreForApplication();using (var isfs = new IsolatedStorageFileStream(fileName,FileMode.Create, isf)) using (StreamWriter sw = new StreamWriter(isfs)) sw.Write(data);using (var isfs = new IsolatedStorageFileStream(fileName,FileMode.Open, isf)) using (StreamReader sr = new StreamReader(isfs)) var allData = sr.ReadToEnd();
  • 24. vsDatabases
  • 25. DatabasesWeb SQL Databasevar db = openDatabase(exampleDB, 1.0, example database, 5 * 1024 * 1024);db.transaction(function (tx) { tx.executeSql(CREATE TABLE IF NOT EXISTS foo (id unique, text)); tx.executeSql(INSERT INTO foo (id, text) VALUES (1, "bar")); tx.executeSql(SELECT * FROM foo, [], function (tx, results) { var len = results.rows.length, i; for (i = 0; i < len; i++) { alert(results.rows.item(i).text); } });});
  • 26. DatabasesWeb SQL DatabaseSource: http://caniuse.com
  • 27. DatabasesIndexedDBvar trans = db.transaction(["foo"], IDBTransaction.READ_WRITE, 0);var store = trans.objectStore("foo");var request = store.put( {"bar": foobar} );request.onsuccess = function(e) { alert("Success!" + "rnrn" + e.value); };request.onerror = function(e) { alert("Error! " + "rnrn" + e.value); };
  • 28. DatabasesIndexedDBSource: http://caniuse.com
  • 29. Databases3rd Party Client-Side Databases for Silverlight • Sterling - http://sterling.codeplex.com/ • Perst - http://www.mcobject.com/silverlight-demo • siaqodb - http://siaqodb.com/ • effiproz - http://www.effiproz.com/ • Ninja Database - http://www.kellermansoftware.com/p-42-ninja- database-lite.aspx
  • 30. vsOffline
  • 31. OfflineAppCache - Cache ManifestCACHE MANIFEST# version 0.0.8index.htmlsite.cssjquery-1.4.1.jsemoticon_smile.pngemoticon_unhappy.pngNETWORK:noncached.htmlFALLBACK:/ offline.html
  • 32. OfflineAppCache - Referencing Caching<!DOCTYPE HTML><html manifest="cache.manifest"> <head><title>Hello AppCache</title></head> <body> <h1>Hello AppCache!</h1> </body></html>
  • 33. OfflineOnLine / Offline APIdocument.body.addEventListener("online", function() { checkOnLineState(); }, false);document.body.addEventListener("offline", function() { checkOnLineState(); }, false);checkOnLineState();function checkOnLineState() { if (typeof (navigator.onLine) == undefined) { alert("navigator.onLine isnt defined."); return; } if (navigator.onLine) { alert("You are online."); } else { alert("You are online."); }}
  • 34. OfflineAppCache & onLine APISource: http://caniuse.com
  • 35. OfflineOut-of-Browser (OOB)• OOB applications run in a separate window and work regardless of network connectivity.• Silverlight API gives full control of installation and updates.• Default Isolated Storage capacity increases from 5 MB to 25 MB• Web Browser control for OOB applications• With Elevated Trust you can call COM APIs• Silverlight 5 introduces p/invoke, multiple windows
  • 36. vsThreading
  • 37. ThreadingWeb Workersvar worker = new Worker("worker.js");worker.onmessage = function(e){ alert(e.data) };worker.postMessage("Hello Worker");worker.jsonmessage = function(e) { if (e.data === "Hello Worker") { postMessage("Hello World"); }};
  • 38. ThreadingWeb WorkersSource: http://caniuse.com
  • 39. ThreadingSilverlight BackgroundWorkervar bg = new BackgroundWorker{ WorkerReportsProgress = true, WorkerSupportsCancellation = true};bg.DoWork += (o, e) =>{ for (var i = 1; i <= 100; i++) { System.Threading.Thread.Sleep(500); ((BackgroundWorker) o).ReportProgress(i); }};bg.ProgressChanged += (o, e) => MessageBox.Show("Working %" + e.ProgressPercentage);bg.RunWorkerAsync();
  • 40. vsCommunication
  • 41. CommunicationWebSocket APIvar ws = new WebSocket("ws://websocket.example.com");ws.onopen = function(e) { alert("WebSocket connection open"); };ws.onmessage = function(e) { alert("WebSocket message received: " + e.data); };ws.onclose = function(e) { alert("WebSocket connection closed"); };ws.postMessage("Hello WebSocket");ws.disconnect();
  • 42. CommunicationSilverlight & WCF • Silverlight WCF client supports PollingDuplexHttpBinding for a simulated duplex communication over HTTP • Silverlight supports System.Net.Sockets for low level sockets communication • Silverlight supports UDP multicast clients over Sockets • The only thing Silverlight doesn’t support that WebSockets API does is secure socket communication
  • 43. vsNotification
  • 44. NotificationNotifications APIif (window.webkitNotifications.checkPermission() == 0) { // you can pass any url as a parameter window.webkitNotifications.createNotification(tweet.picture, tweet.title, tweet.text).show();} else { window.webkitNotifications.requestPermission();}
  • 45. NotificationNotifications APISource: http://caniuse.com
  • 46. NotificationSilverlight NotificationWindowif (App.Current.IsRunningOutOfBrowser){ var nw = new NotificationWindow(); nw.Content = "Look at me!"; nw.Show(5000); // milliseconds}
  • 47. vsAudio
  • 48. AudioAudio Tag
  • 49. AudioAudio TagSource: http://caniuse.com
  • 50. AudioAudio Tag Browser Ogg mp3 wavFirefox 3.5+ ✓ ✓ Safari 5+ ✓ ✓Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓
  • 51. AudioMediaElement<MediaElement x:Name="media" Source="example.mp3" Width="300" Height="300" />
  • 52. AudioMediaElement Container Codecs MP3 MP3 ASF WMA Standard & Professional AAC-LC, HE-AAC v1 (AAC+), HE-AAC v2 MP4 (eAAC+)
  • 53. vsVideo
  • 54. VideoVideo Tag
  • 55. VideoVideo TagSource: http://caniuse.com
  • 56. Video Browser Ogg H.264 WebM Firefox 3.5+ ✓ Firefox 4+ ✓ ✓ Safari 3+ ✓ Chrome 6+ ✓ ✓Opera 10.5+ ✓ ✓ IE 9 ✓ ✓iPhone Safari ✓ Android ✓ ✓
  • 57. VideoMediaElement<MediaElement x:Name="media" Source="example.wmv" Width="300" Height="300" />
  • 58. VideoMediaElement Container Codecs ASF WMV & VC-1 MP4 H.264Also Supports... • Progressive Download & Windows Media Streaming • Server Side Play Lists • Server Logs • Timeline Markers
  • 59. vsCanvas
  • 60. Canvas<canvas id="canvas" width="838" height="220"></canvas><script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = round; canvasContext.strokeStyle = rgba(255, 127, 0, 0.5); canvasContext.stroke();</script>
  • 61. CanvasCanvasSource: http://caniuse.com
  • 62. Canvas<Canvas x:Name="LayoutRoot" Background="White" > <Rectangle Canvas.Left="250" Canvas.Top="25" Height="100" Width="150" Stroke="Black" Fill="Black"/> <Path Canvas.Left="406" Canvas.Top="10" Height="290" Width="137" Stroke="#7FFF7F00" Fill="#00FFFFFF" StrokeThickness="15" StrokeLineJoin="Round" StrokeStartLineCap="Round" StrokeEndLineCap="Round"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure> <PathFigure.Segments> <ArcSegment Size="50,50" RotationAngle="45" IsLargeArc="True"SweepDirection="Counterclockwise" Point="0,250"/> </PathFigure.Segments> </PathFigure > </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path></Canvas>
  • 63. vsPotpourri
  • 64. Potpourri• Canvas 3D - WebGL• SVG (inline, etc)• Drag & Drop, Drop In, Drag Out• File System API• Geolocation API• Semantic HTML Tags• New form types (email, date, range, search, tel, color, number)
  • 65. Potpourri• CSS - Selectors, Rounded Corners, Shadows, Transitions, Tranforms, Animations, etc.• Webfonts• Javascript selectors (getElementsByClassName, querySelector, querySelectorAll)• data-* attributes• element.classList• Browser History API
  • 66. Potpourri• XAML• Languages - C#,Visual Basic.NET, Iron Ruby, Iron Python• 3D - Silverlight 5 Beta• GPU Hardware Acceleration• Devices - Webcam, Microphones• Printing - Bitmap in SL 4, Postscript vector in SL 5• COM Interop (Out-of-browser full trust)• P/Invoke (Out-of-browser full trust in SL 5)
  • 67. vsIt Depends
  • 68. vsMatt Castohttp://mattcasto.info